responsive-layout-builder
Build responsive layouts with CSS Grid, Flexbox, and container queries. Use when creating responsive designs, fixing layout issues, or building mobile-first layouts.
- Installs
- 356
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/onewave-ai/claude-skills --skill responsive-layout-builder- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads responsive-layout-builder automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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
/* 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
// 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>
/* 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
// 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>
/* Plain CSS */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}
3. Sidebar Layout
// 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
<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
// 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
<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)
/* Define container */
.card-container {
container-type: inline-size;
}
/* Query the container */
@container (min-width: 400px) {
.card {
display: flex;
flex-direction: row;
}
}
// 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
// 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
FAQ
What does the responsive-layout-builder skill do?
Build responsive layouts with CSS Grid, Flexbox, and container queries. Use when creating responsive designs, fixing layout issues, or building mobile-first layouts.
How do I install responsive-layout-builder?
Run npx skills add https://github.com/onewave-ai/claude-skills --skill responsive-layout-builder in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/responsive-layout-builder/ (personal) or .claude/skills/responsive-layout-builder/ (project).
Which AI agents can use responsive-layout-builder?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is responsive-layout-builder safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains responsive-layout-builder?
It is published by onewave-ai in onewave-ai/claude-skills. It has 356 recorded installs.
More from onewave-ai/claude-skills
landing-page-copywriter
onewave-ai/claude-skills
Writes conversion-focused landing page copy - headlines, subheads, value propositions, feature and benefit blocks, social proof, FAQs, and CTA button text - using PAS, AIDA, or StoryBrand. Use when the user wants words for a landing page, sales page, product or pricing page, waitlist page, homepage hero, or ad-to-page flow, including rewriting weak copy, generating headline or CTA variants for A/B tests, or turning a product description into page sections. Use landing-page-optimizer instead for auditing an existing page's performance, and a frontend skill for building the page itself.
code-review-pro
onewave-ai/claude-skills
Performs a deep code review of files, modules, a diff, or a branch - finding security vulnerabilities (mapped to OWASP Top 10:2025), correctness bugs, performance problems, and maintainability issues - and returns severity-ranked findings with evidence and concrete fixes. Use when the user asks to review, audit, or sanity-check code, asks "is this safe", "what's wrong with this", "find bugs", or wants a security or performance pass before shipping. For posting line comments on a GitHub pull request, use git-pr-reviewer.
screenshot-to-code
onewave-ai/claude-skills
Turns a screenshot, mockup, Figma export, or photo of a UI into working front-end code - React + Tailwind CSS v4 by default, or Next.js, Vue, or plain HTML/CSS - matching layout, spacing, colors, and typography, then renders the result and compares it against the image to close visual gaps. Use whenever the user shares an image of a website, app screen, dashboard, component, or wireframe and wants it built, cloned, recreated, or "made real", or says "code this up", "build this design", or "match this screenshot".
csv-excel-merger
onewave-ai/claude-skills
Merges, appends, joins, and deduplicates multiple CSV, TSV, and Excel files (including multi-sheet workbooks) with pandas - mapping mismatched column names to one schema, normalizing keys, resolving conflicting values, tracking which file each row came from, and verifying the row math. Use when the user wants to combine spreadsheets or exports, stack monthly files, consolidate contact or lead lists, VLOOKUP-style join two sheets on an ID or email, or dedupe records across sources, even if they only say "put these together" or "clean up these lists into one".
technical-writer
onewave-ai/claude-skills
Writes and restructures technical documentation - READMEs, tutorials, how-to guides, user guides, architecture docs, onboarding guides, runbooks and SOPs, troubleshooting guides, release notes, and knowledge base articles - grounded in the actual code or product, with commands and examples verified where possible. Use when the user asks to document a project, feature, system, or process, write or fix a README, explain a codebase to new developers, turn notes into a guide, or make existing docs clearer. For endpoint-by-endpoint API reference or OpenAPI specs, use api-documentation-writer; for CLAUDE.md or AGENTS.md files, use claude-md-writer.
sports-betting-analyzer
onewave-ai/claude-skills
Analyze spreads, over/unders, prop bets. Historical trends, situational stats, value bet identification. For entertainment/education only.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.