Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
ancoleman avatar

Designing Layouts

ancoleman/ai-design-components

  • 82 installs
  • 426 repo stars
  • Updated December 11, 2025
  • ancoleman/ai-design-components

designing-layouts is a Claude skill that builds responsive CSS layout systems using grid, flexbox, container queries, breakpoints, and spacing tokens.

About

This skill provides guidance for building responsive layout systems using modern CSS: grid systems, flexbox patterns, container queries, spacing scales, and mobile-first breakpoints. A developer uses it when structuring app shells, dashboards with sidebars, card grids, or split-pane interfaces. It includes design-token integration and scripts to generate breakpoints and validate layout accessibility.

  • CSS Grid, Flexbox, and container-query layout patterns
  • Mobile-first breakpoint and spacing-token systems
  • Scripts for breakpoints, fluid typography, and accessibility validation

Designing Layouts by the numbers

  • 82 all-time installs (skills.sh)
  • Ranked #1,104 of 2,245 Frontend Development skills by installs in the Skillselion catalog
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
At a glance

designing-layouts capabilities & compatibility

Capabilities
responsive layout · css grid layout · flexbox layout · ui design
Use cases
frontend · ui design · web design
IDEs
vscode · cursor ide
From the docs

What designing-layouts says it does

This skill provides comprehensive guidance for creating responsive layout systems using modern CSS techniques.
SKILL.md
Container queries are production-ready in all modern browsers (2025).
SKILL.md
npx skills add https://github.com/ancoleman/ai-design-components --skill designing-layouts

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs82
repo stars★ 426
Last updatedDecember 11, 2025
Repositoryancoleman/ai-design-components ↗

What it does

Building responsive layouts (grids, flexbox, container queries, breakpoints) for app shells, dashboards, and card galleries.

Who is it for?

Structuring responsive app layouts, dashboards, and card grids with modern CSS.

Skip if: Backend or data work with no UI/CSS layout involved.

When should I use this skill?

Building responsive dashboards, grid layouts, split-pane interfaces, or breakpoint systems.

What you get

A responsive, token-driven layout with the right grid/flexbox/container-query method and validated accessibility.

  • Responsive layout
  • Breakpoint system
  • Spacing token scale

By the numbers

  • 12-column grid pattern
  • 5 mobile-first breakpoints (640/768/1024/1280/1536px)
  • 3 bundled layout scripts

Files

SKILL.mdMarkdownGitHub ↗

Layout Systems & Responsive Design

Purpose

This skill provides comprehensive guidance for creating responsive layout systems using modern CSS techniques. It covers grid systems, flexbox patterns, container queries, spacing systems, and mobile-first design strategies to build flexible, accessible interfaces that adapt seamlessly across devices.

When to Use

Invoke this skill when:

  • Building responsive admin dashboards with sidebars and headers
  • Creating grid-based layouts for content cards or galleries
  • Implementing masonry or Pinterest-style layouts
  • Designing split-pane interfaces with resizable panels
  • Establishing responsive breakpoint systems
  • Structuring application shells with navigation and content areas
  • Building mobile-first responsive designs
  • Creating flexible spacing and container systems

Layout Patterns

Grid Systems

For structured, two-dimensional layouts, use CSS Grid with design tokens.

12-Column Grid:

.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding-x);
}

.col-span-6 { grid-column: span 6; }
.col-span-4 { grid-column: span 4; }
.col-span-3 { grid-column: span 3; }

Auto-Fit Responsive Grid:

.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--grid-gap);
}

For complex grid layouts and advanced patterns, see references/layout-patterns.md.

Flexbox Patterns

For one-dimensional layouts and alignment control.

Holy Grail Layout:

.holy-grail {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.holy-grail__body {
  flex: 1;
  display: flex;
}

.holy-grail__nav {
  width: var(--sidebar-width);
  flex-shrink: 0;
}

.holy-grail__main {
  flex: 1;
  min-width: 0; /* Prevent overflow */
}

.holy-grail__aside {
  width: var(--sidebar-width);
  flex-shrink: 0;
}

For additional flexbox patterns including sticky footer and centering, see references/css-techniques.md.

Container Queries

For component-responsive design that adapts based on container size, not viewport.

.card-container {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    grid-template-columns: auto 1fr;
    gap: var(--spacing-lg);
  }
}

@container card (min-width: 600px) {
  .card {
    grid-template-columns: 200px 1fr auto;
  }
}

Container queries are production-ready in all modern browsers (2025). For detailed usage and fallback strategies, see references/responsive-strategies.md.

Responsive Breakpoints

Use mobile-first approach with semantic breakpoints.

/* Mobile-first breakpoints using design tokens */
@media (min-width: 640px) {  /* sm: Tablet portrait */
  .container { max-width: 640px; }
}

@media (min-width: 768px) {  /* md: Tablet landscape */
  .container { max-width: 768px; }
}

@media (min-width: 1024px) { /* lg: Desktop */
  .container { max-width: 1024px; }
}

@media (min-width: 1280px) { /* xl: Wide desktop */
  .container { max-width: 1280px; }
}

@media (min-width: 1536px) { /* 2xl: Ultra-wide */
  .container { max-width: 1536px; }
}

For fluid typography and advanced responsive techniques, see references/responsive-strategies.md.

Spacing Systems

Implement consistent spacing using design tokens.

/* Base unit: 4px or 8px */
:root {
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
}

/* Apply systematically */
.section { padding: var(--section-spacing) 0; }
.container { padding: 0 var(--container-padding-x); }
.card { padding: var(--spacing-lg); }
.stack > * + * { margin-top: var(--spacing-md); }

CSS Framework Integration

Tailwind CSS

For utility-first approach with custom configuration:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        'xs': 'var(--spacing-xs)',
        'sm': 'var(--spacing-sm)',
        'md': 'var(--spacing-md)',
        'lg': 'var(--spacing-lg)',
        'xl': 'var(--spacing-xl)',
      },
      screens: {
        'sm': '640px',
        'md': '768px',
        'lg': '1024px',
        'xl': '1280px',
        '2xl': '1536px',
      }
    }
  }
}

For Tailwind patterns and optimization, see references/library-guide.md.

How to Use

1. Define Layout Requirements

Determine layout type and responsive behavior needed.

2. Choose Layout Method

  • CSS Grid: Two-dimensional layouts, complex grids
  • Flexbox: One-dimensional layouts, alignment
  • Container Queries: Component-responsive designs

3. Implement with Design Tokens

Use design tokens from skills/design-tokens/ for consistent spacing, breakpoints, and sizing.

4. Generate Configurations

For responsive breakpoints:

node scripts/generate_breakpoints.js --approach mobile-first

For fluid typography scale:

node scripts/calculate_fluid_typography.js --min-vw 320 --max-vw 1920

5. Validate Accessibility

Check semantic HTML and landmark regions:

node scripts/validate_layout_accessibility.js path/to/component.tsx

6. Test Responsiveness

Test across device sizes using responsive preview tools and actual devices.

Scripts

  • scripts/generate_breakpoints.js - Generate responsive breakpoint system
  • scripts/calculate_fluid_typography.js - Calculate fluid typography scales
  • scripts/validate_layout_accessibility.js - Validate semantic HTML and ARIA landmarks

References

  • references/layout-patterns.md - Common layout patterns (sidebar, masonry, split-pane)
  • references/responsive-strategies.md - Mobile-first design and responsive techniques
  • references/css-techniques.md - Modern CSS features (Grid, Flexbox, Container Queries)
  • references/accessibility-layouts.md - Semantic HTML and ARIA landmarks
  • references/library-guide.md - Framework integration (Tailwind, styled-components)
  • references/performance-optimization.md - CSS performance and layout thrashing

Examples

  • examples/admin-layout.tsx - Complete admin dashboard with sidebar
  • examples/responsive-grid.tsx - Auto-responsive grid system
  • examples/masonry-layout.tsx - Pinterest-style masonry grid
  • examples/split-pane.tsx - Resizable split-pane interface

Assets

  • assets/breakpoint-config.json - Standard breakpoint configurations
  • assets/layout-templates.json - Common layout templates
  • assets/spacing-scale.json - Spacing system configurations

Related skills

vercel-labsVercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.587k29.6kvercel-labsVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.267k29.6kshadcnShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.257k120kxixu-meDevelop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72leonxlnxMinimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita212k69.4kleonxlnxImage To CodeConvert high-fidelity design images into production-ready, visually accurate frontend code that avoids generic AI design pitfalls.177k69.4k

FAQ

When should I use CSS Grid vs Flexbox?

Use CSS Grid for two-dimensional layouts and complex grids; use Flexbox for one-dimensional layouts and alignment.

What are container queries for?

Component-responsive design that adapts based on container size instead of the viewport.

Frontend Developmentuiux
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.