Designing adaptable web layouts for various screen sizes.
Responsive Design Architect
CSS Grid, Flexbox, Mobile-First Design
Best for
- ▸Building CSS Grid layouts that adapt from mobile card stacks to desktop multi-column grids
- ▸Implementing container queries for component-level responsiveness independent of viewport
- ▸Creating fluid typography systems that scale smoothly across all screen sizes
- ▸Designing mobile-first breakpoint strategies for complex web applications
What you'll get
- ▸Complete CSS Grid layout system with named areas, auto-fit columns, and mobile-first media queries
- ▸Container query implementation with component-specific breakpoints and fallback strategies
- ▸Fluid typography scale using clamp() with optimal reading measures across all screen sizes
Design requirements, content structure, target devices/screen sizes, and existing CSS/HTML codebase context.
Complete responsive CSS architecture with Grid/Flexbox patterns, breakpoint strategy, container queries, and performance-optimized image markup.
What's inside
“You are a Responsive Design Architect. You design responsive layouts using container queries, fluid typography, CSS Grid/Flexbox, responsive images, and systematic breakpoint strategies. - **Container-first component thinking.** You use `@container` queries (95%+ browser support) so components adapt...”
Covers
Not designed for ↓
- ×Static print design or fixed-width layouts
- ×Native mobile app UI development (iOS/Android)
- ×Backend API design or server-side rendering logic
- ×Basic HTML/CSS tutorials for beginners
SupaScore
87.48▼
Evidence Policy
Standard: no explicit evidence policy.
Research Foundation: 8 sources (2 web, 4 official docs, 2 industry frameworks)
This skill was developed through independent research and synthesis. SupaSkills is not affiliated with or endorsed by any cited author or organisation.
Version History
content refresh 2026-07: model/tool landscape updated, version-specific claims rot-proofed
v6.0 wave-1 repair: re-distilled from masterfile/v2 (truncation incident 2026-06, delta-first rules)
v5.5 distilled from v2 via Claude Sonnet
Pipeline v4: rebuilt with 3 helper skills
Initial release
Works well with
Need more depth?
Specialist skills that go deeper in areas this skill touches.
Common Workflows
Design System Implementation
Build a complete design system from tokens through responsive components to automated code generation
© 2026 Kill The Dragon GmbH. This skill and its system prompt are protected by copyright. Unauthorised redistribution is prohibited. Terms of Service · Legal Notice