Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Responsive Layout Builder · onewave-ai | DecimalAI

onewave-ai/responsive-layout-builder

SkillScore40Maintained

Build responsive layouts with CSS Grid, Flexbox, and container queries. Use when creating responsive designs, fixing layout issues, or building mobile-first layouts.

Frontendby onewave-ai

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/onewave-ai-responsive-layout-builder/SKILL.md

decimalai skills pull onewave-ai-responsive-layout-builder --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/onewave-ai-responsive-layout-builder/SKILL.md https://app.decimal.ai/s/onewave-ai-responsive-layout-builder/SKILL.md

Raw file: /s/onewave-ai-responsive-layout-builder/SKILL.md ↗ · machine-readable summary at /s/onewave-ai-responsive-layout-builder.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

Runs

all versions · 30d

Eval pass

100%

global

Used when offered

100%

used / offered · all versions

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

25 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 2d ago

No — -100% lift+74% tokens0% turns84% of whole cases pass with skill (21/25)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-02	✓→✗	▼ Worse	-4%	0%
case-23	✓→✓	＝ Same ✓	126%	0%
case-04	✓→✓	＝ Same ✓	198%	0%
case-05	✓→✓	＝ Same ✓	75%	0%
case-06	✓→✓	＝ Same ✓	133%	0%

Showing 5 of 25 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

onewave-ai / claude-skills

responsive-layout-builder/SKILL.md

View on GitHub ↗

License MITImported 8/3/2026Version v1

Skill contents

SKILL.md

Responsive Layout Builder

Instructions

When building responsive layouts:

Identify the layout pattern (grid, sidebar, cards, etc.)
Start mobile-first
Use appropriate CSS technique (Grid vs Flexbox)
Add breakpoints for larger screens
Test across viewports

Breakpoints

css
/* Tailwind defaults */
sm: 640px   /* Small devices */
md: 768px   /* Tablets */
lg: 1024px  /* Laptops */
xl: 1280px  /* Desktops */
2xl: 1536px /* Large screens */

/* Custom CSS */
@media (min-width: 640px) { }
@media (min-width: 768px) { }
@media (min-width: 1024px) { }

Common Layout Patterns

1. Holy Grail Layout

tsx
// Tailwind CSS
<div className="min-h-screen flex flex-col">
  <header className="h-16 bg-white border-b">Header</header>

  <div className="flex-1 flex">
    <aside className="hidden md:block w-64 bg-gray-50 border-r">
      Sidebar
    </aside>
    <main className="flex-1 p-6">
      Main Content
    </main>
  </div>

  <footer className="h-16 bg-white border-t">Footer</footer>
</div>

css
/* Plain CSS */
.layout {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr;
  min-height: 100vh;
}

@media (min-width: 768px) {
  .layout {
    grid-template-columns: 250px 1fr;
  }

  .header, .footer {
    grid-column: 1 / -1;
  }
}

2. Responsive Card Grid

tsx
// Tailwind - Auto-fit cards
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  {items.map(item => (
    <Card key={item.id} {...item} />
  ))}
</div>

// Auto-fill with minimum width
<div className="grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-6">
  {items.map(item => (
    <Card key={item.id} {...item} />
  ))}
</div>

css
/* Plain CSS */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

3. Sidebar Layout

tsx
// Fixed sidebar, scrollable content
<div className="flex h-screen">
  <aside className="w-64 flex-shrink-0 overflow-y-auto border-r bg-gray-50">
    <nav className="p-4">Sidebar Nav</nav>
  </aside>

  <main className="flex-1 overflow-y-auto">
    <div className="p-6">Main Content</div>
  </main>
</div>

// Collapsible sidebar
<div className="flex h-screen">
  <aside className={cn(
    "flex-shrink-0 overflow-y-auto border-r bg-gray-50 transition-all",
    isOpen ? "w-64" : "w-16"
  )}>
    <nav className="p-4">...</nav>
  </aside>
  <main className="flex-1 overflow-y-auto p-6">...</main>
</div>

4. Hero Section

tsx
<section className="relative min-h-[60vh] flex items-center justify-center px-4">
  {/* Background */}
  <div className="absolute inset-0 bg-gradient-to-br from-blue-600 to-purple-700" />

  {/* Content */}
  <div className="relative z-10 max-w-4xl mx-auto text-center text-white">
    <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold">
      Headline Here
    </h1>
    <p className="mt-6 text-lg md:text-xl opacity-90 max-w-2xl mx-auto">
      Subheadline text goes here with more details.
    </p>
    <div className="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
      <button className="px-8 py-3 bg-white text-blue-600 rounded-lg font-semibold">
        Primary CTA
      </button>
      <button className="px-8 py-3 border-2 border-white rounded-lg font-semibold">
        Secondary CTA
      </button>
    </div>
  </div>
</section>

5. Masonry Grid

tsx
// CSS Columns approach
<div className="columns-1 sm:columns-2 lg:columns-3 gap-6 space-y-6">
  {items.map(item => (
    <div key={item.id} className="break-inside-avoid">
      <Card {...item} />
    </div>
  ))}
</div>

6. Sticky Header

tsx
<header className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b">
  <nav className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
    <Logo />
    <NavLinks className="hidden md:flex" />
    <MobileMenuButton className="md:hidden" />
  </nav>
</header>

Container Queries (Modern)

css
/* Define container */
.card-container {
  container-type: inline-size;
}

/* Query the container */
@container (min-width: 400px) {
  .card {
    display: flex;
    flex-direction: row;
  }
}

tsx
// Tailwind v3.2+
<div className="@container">
  <div className="flex flex-col @md:flex-row">
    <img className="w-full @md:w-48" />
    <div className="p-4">Content</div>
  </div>
</div>

Flexbox vs Grid Decision

| Use Flexbox | Use Grid | |-------------|----------| | Navigation bars | Page layouts | | Card content alignment | Card grids | | Centering content | Complex 2D layouts | | Space distribution | Overlapping elements | | Unknown item count | Defined structure |

Responsive Typography

tsx
// Fluid typography with clamp
<h1 className="text-[clamp(2rem,5vw,4rem)]">
  Responsive Heading
</h1>

// Tailwind responsive
<h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl">
  Responsive Heading
</h1>

Testing Checklist

] 320px (small phones)
] 375px (iPhone)
] 768px (tablet portrait)
] 1024px (tablet landscape / laptop)
] 1280px+ (desktop)
] Test with actual content (not lorem ipsum)
] Test with long/short content variations

Want to see if onewave-ai/responsive-layout-builder would activate on your phrasing? Try it before you install — no LLM call, no signup.

Latest benchmark · publisher runVerified

8/27/2026, 08:23 UTC · 25 cases

Lift

-100%

0% vs 100%

Agent turns

1.0 vs 1.0

Tokens

+74%

3,880.08 vs 2,227.8

pass → pass · 21fail → fail · 3pass → fail · 1

Per-case results (25)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-23 Write a React functional component hook using useState to handle form input validation for an email field.	pass→pass	11,667	15,002	+29%	1	1	0%	2,259	5,095	+126%	0	0	—
case-01 Write the CSS layout rules for a classic three-row application shell containing header, main, sidebar, and footer. On mobile devices, elements should stack in a single column. On desktop screens, display a 250px left sidebar alongside the main content area, with the header and footer spanning across all columns. Offer pure CSS using media queries.	fail→fail	9,876	9,944	+1%	1	1	0%	1,925	3,787	+97%	0	0	—
case-02 Create a React JSX component for an application layout header, sidebar, main content, and footer using utility classes. On mobile screens, hide the sidebar completely and show only main content between header and footer, but on tablet and desktop viewports show a 16rem sidebar.	pass→fail	35,290	20,009	-43%	1	1	0%	6,486	6,247	-4%	0	0	—
case-03 Write a pure CSS rule for a product grid where cards automatically wrap and adjust columns based on available container width, maintaining a minimum width of 280px per card without writing explicit viewport media queries.	fail→fail	4,912	7,139	+45%	1	1	0%	853	3,118	+266%	0	0	—
case-04 Construct a Tailwind CSS class string for a responsive card grid that displays 1 column on mobile, 2 columns on small screens, 3 columns on large screens, and 4 columns on extra large screens, with a 1.5rem gap.	pass→pass	4,194	3,213	-23%	1	1	0%	815	2,432	+198%	0	0	—
case-05 Select the appropriate CSS layout module for a horizontal website navigation bar that needs to distribute items, align a brand logo on the left, and push account controls to the right. Explain which module to select and provide alignment CSS.	pass→pass	11,562	9,742	-16%	1	1	0%	2,126	3,719	+75%	0	0	—
case-06 Which CSS layout technique is recommended for structuring a complex two-dimensional main application page containing header, sidebars, multi-panel content areas, and footer? Provide the core structural CSS declaration.	pass→pass	8,064	7,902	-2%	1	1	0%	1,436	3,347	+133%	0	0	—
case-07 Build a JSX sticky header element in Tailwind CSS that stays fixed at the top of the viewport when scrolling, has a subtle blur backdrop, hides desktop nav links on small screens, and shows a mobile menu button on mobile.	pass→pass	13,456	14,775	+10%	1	1	0%	2,976	5,106	+72%	0	0	—
case-08 Create a responsive image gallery component in Tailwind CSS that lays out cards in a masonry style with staggered vertical heights, showing 1 column on mobile, 2 on small screens, and 3 on large screens, preventing cards from splitting across columns.	pass→pass	21,846	25,107	+15%	1	1	0%	4,541	7,437	+64%	0	0	—
case-09 Write CSS for a component layout that switches from flex column to flex row based on the width of its parent container at a 400px threshold rather than the browser window viewport.	pass→pass	10,185	8,297	-19%	1	1	0%	1,826	3,313	+81%	0	0	—
case-10 Construct Tailwind v3.2+ markup for a card component that transitions from stacked column to horizontal row when its direct parent container reaches medium size.	pass→pass	14,282	11,655	-18%	1	1	0%	2,968	4,058	+37%	0	0	—
case-11 Build a responsive hero section call-to-action button container in Tailwind CSS. The buttons should stack vertically full-width on mobile screens and align horizontally centered on small screens and above.	pass→pass	10,192	10,730	+5%	1	1	0%	1,981	4,029	+103%	0	0	—
case-12 Write a React JSX sidebar component using Tailwind CSS that dynamically toggles between an expanded width of 16rem and a collapsed width of 4rem with smooth width transitions and full height scrolling.	pass→pass	24,249	15,692	-35%	1	1	0%	5,513	5,028	-9%	0	0	—
case-13 Provide CSS code to set a heading font size that scales fluidly between 2rem on small viewports and 4rem on large viewports relative to viewport width, using CSS mathematical functions.	pass→pass	7,927	9,704	+22%	1	1	0%	1,568	3,774	+141%	0	0	—
case-14 Write Tailwind utility classes for a heading element that starts at 2xl on mobile, scales to 3xl on small screens, 4xl on medium screens, and 5xl on large screens.	pass→pass	2,309	3,798	+64%	1	1	0%	432	2,502	+479%	0	0	—
case-15 Which screen width pixels correspond to the standard Tailwind CSS responsive breakpoint keys `sm` and `md`? List each key and its standard pixel threshold.	pass→pass	2,150	1,682	-22%	1	1	0%	377	2,090	+454%	0	0	—
case-16 List key viewport widths in pixels that should be included in a test matrix when verifying responsive web layouts across small mobile phones and tablets.	pass→pass	15,876	9,994	-37%	1	1	0%	2,629	3,532	+34%	0	0	—
case-17 In a card component containing a title, variable-length text body, and an action button at the bottom, which CSS module is best suited to push the button to the bottom of the card, and how is it styled?	pass→pass	10,951	10,410	-5%	1	1	0%	2,007	3,778	+88%	0	0	—
case-18 When laying out a dynamic list of tags where the total item count and individual tag widths are unpredictable, should Flexbox or CSS Grid be chosen? State the decision rule.	pass→pass	8,160	5,964	-27%	1	1	0%	1,356	2,778	+105%	0	0	—
case-19 When designing a layout feature where a badge or image element needs to visually overlap with adjacent content boxes in a 2D space, which layout module should be chosen?	pass→pass	11,135	11,572	+4%	1	1	0%	1,818	3,768	+107%	0	0	—
case-20 When starting a new web layout project from scratch using CSS or Tailwind, what is the recommended step-by-step methodology regarding viewport targeting order?	pass→pass	17,906	16,369	-9%	1	1	0%	2,967	4,735	+60%	0	0	—
case-21 Write pure CSS keyframe animation code to create a pulse effect that fades opacity between 1 and 0.5 over 2 seconds infinitely.	pass→pass	4,573	3,711	-19%	1	1	0%	885	2,523	+185%	0	0	—
case-22 Calculate the WCAG 2.1 AA required contrast ratio for normal body text and explain how color contrast between hex code text and background is calculated.	pass→pass	14,439	12,642	-12%	1	1	0%	2,879	4,396	+53%	0	0	—
case-24 Write Tailwind CSS typography classes for a primary hero heading that scales progressively across medium and large screen sizes, starting at 4xl on mobile.	fail→fail	7,228	6,317	-13%	1	1	0%	1,379	2,941	+113%	0	0	—
case-25 When building a sticky desktop header with centered navigation elements in Tailwind CSS, what utility classes should be placed on the inner nav tag to constrain maximum layout width and keep content horizontally centered?	pass→pass	8,734	8,574	-2%	1	1	0%	1,693	3,469	+105%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 25 cases were attempted. The headline lift of -100 percentage points is the difference between those two pass rates over the 25 comparable cases. 1 case got worse with the skill loaded, and it is included in that figure.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 100%
Pass rate with the skill: 0%
Cases attempted: 25
Cases counted toward lift: 25
Cases that regressed: 1
Skill version measured: v1
Run completed: 8/27/2026, 08:23 UTC

SkillScore blends 4 signals1 of 4 complete

BenchmarkRun a verified benchmark with positive lift

Live evalNeeds ≥20 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionBreadth of real use across orgs40

Backed by 1 of 4 signals — each added signal makes the score more robust.

Verified on gemini-3.6-flash · re-tested 2 days ago

Other measured skills in the registry, with their headline benchmark lift.