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 combine fluid grids, flexible images, and media queries with modern CSS (container queries, :has() selector, subgrid) to build adaptive, performant interfaces across all devices. - **Content-first breakpoints:** Set breakpoints where content breaks, not at ...”
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
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