🎨 Frontend Engineering · CSS & Design Systems

Build layouts that survive real content

Use fluid grids, container queries, and content-driven breakpoints instead of pixel-perfect mockups.

intermediate~30 minFrontend EngineersFull-Stack DevelopersDesign Engineers

Steps

1Design mobile-first with min-width queries only
2Prefer grid auto-fit + minmax over fixed column counts
3Use clamp() for fluid type between readable bounds
4Test with worst-case content: longest name, no image, RTL locale
5Apply container queries for card-based components inside varying columns
6Verify horizontal scrollbar never appears between 320px and 2560px

Common Pitfalls

▲Breakpoints tuned to the designer's laptop width
▲Text truncation hiding critical numbers like prices

Commands

Install with skills CLI

$ npx skills add aniruddhaadak80/skills --skill css-design-systems-responsive-layout-system

Install globally

$ npx skills add aniruddhaadak80/skills --skill css-design-systems-responsive-layout-system -g

Tags

#css#layout#responsive#frontend-engineering#css-design-systems

Install this skill

$ npx skills add aniruddhaadak80/skills --skill css-design-systems-responsive-layout-system -a opencode

SKILL.md

# Build layouts that survive real content

> Use fluid grids, container queries, and content-driven breakpoints instead of pixel-perfect mockups.

## When to Use This Skill

Use fluid grids, container queries, and content-driven breakpoints instead of pixel-perfect mockups.

## Steps

1. Design mobile-first with min-width queries only
2. Prefer grid auto-fit + minmax over fixed column counts
3. Use clamp() for fluid type between readable bounds
4. Test with worst-case content: longest name, no image, RTL locale
5. Apply container queries for card-based components inside varying columns
6. Verify horizontal scrollbar never appears between 320px and 2560px

## Common Pitfalls

- Breakpoints tuned to the designer's laptop width
- Text truncation hiding critical numbers like prices

View source on GitHub ↗

Encode brand decisions as named tokens (CSS variables) consumed by utilities so themes change in one place.

🎨 Frontend Engineering·~35m

Open →

Set up design tokens for color, space, type (Vanilla CSS)intermediate

Encode brand decisions as named tokens (CSS variables) consumed by utilities so themes change in one place.

🎨 Frontend Engineering·~35m

Open →

Add motion that guides attentionintermediate

Animate with purpose: entrance choreography, micro-interactions, and reduced-motion respect.

🎨 Frontend Engineering·~30m

Open →