Build responsive layouts with CSS Grid, Flexbox, and container queries. Use when creating responsive designs, fixing layout issues, or building mobile-first layouts.
The English summary is being prepared. Showing the original description.
See how to installReview the instructions the agent will receive before you install.
When building responsive layouts:
/* 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) { }
// 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;
}
}
// 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;
}
// 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>
<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>
// 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>
<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>
/* 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>
| 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 |
// 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>
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Audit websites for accessibility issues and WCAG compliance. Use when checking accessibility, fixing a11y issues, or ensuring WCAG compliance.
The English summary is being prepared. Showing the original description.
Deploy a 2-layer parallel agent hierarchy for large, parallelizable work — big refactors, multi-file migrations, codebase-wide audits, bulk generation. A top-tier commander (Fable or Opus) orchestrates the swarms; the user picks a power level (Max Power / Heavy / Balanced / Economy) that sets the Opus/Sonnet/Haiku model mix per layer. Layer 1 is 3-50+ specialist agents, each with its own full context window; Layer 2 is 2+ sub-agents per member. Includes git safety, tiered sizing, a pre-deploy gate, phantom-completion checks, and multi-wave follow-up.
The English summary is being prepared. Showing the original description.
Use to test whether an AI agent, prompt, or skill actually works before or after it ships — build a small eval set, score runs, and catch regressions when the prompt or model changes. Trigger when the user asks whether a prompt is good, wants to compare models or versions, sees inconsistent agent output, or is about to put an agent in front of customers.
The English summary is being prepared. Showing the original description.
Deploys swarms of sub-agents for massive parallel data processing tasks. Unlike agent-army (which is for code changes), this is for DATA tasks -- processing 1000 documents, analyzing datasets, bulk content generation. Configurable swarm size, task distribution, result aggregation, progress tracking, and error recovery.
The English summary is being prepared. Showing the original description.
Designs and deploys custom agent teams for specific business workflows. Interactive discovery of business processes, then generates complete team configurations with specialized agent roles, tool access, communication protocols, and handoff rules.
The English summary is being prepared. Showing the original description.
Agent-to-Agent (A2A) communication protocol. Connect two or more Claude agents that pass messages, share context, delegate tasks, and collaborate. Implements structured handoffs, shared memory, and multi-agent conversations.
The English summary is being prepared. Showing the original description.