Responsive Web Design
Install this when you need mobile-first layouts with Grid, Flexbox, and breakpoints that hold up from phone to desktop.
Overview
responsive-web-design is an agent skill for the Build phase that creates adaptive layouts with CSS Grid, Flexbox, and mobile-first media queries.
Install
npx skills add https://github.com/aj-geddes/useful-ai-prompts --skill responsive-web-designWhat is this skill?
- Mobile-first CSS with min-width media queries and progressive enhancement
- Flexbox column-to-row container patterns with gap-based spacing
- CSS Grid from single column to multi-column breakpoints
- Reference guides for media-query strategy and Flexbox/Grid depth
- Targets multi-device, accessible, cross-browser layout systems
Adoption & trust: 722 installs on skills.sh; 250 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your UI looks fine on desktop but breaks on small screens because breakpoints and layout primitives were bolted on late.
Who is it for?
Indie builders implementing landing pages, dashboards, or content sites who want agent-guided responsive CSS without a separate mobile codebase.
Skip if: Native-only mobile apps or backend-only work where no HTML/CSS layout is in scope.
When should I use this skill?
Building adaptive interfaces with CSS Grid, Flexbox, and media queries; multi-device, mobile-first, accessible, or cross-browser layout work.
What do I get? / Deliverables
You get mobile-default CSS, documented breakpoint upgrades, and reference-backed Grid/Flex patterns ready to drop into components.
- Mobile-first CSS layout snippets
- Breakpoint-upgraded Grid/Flex structures
Recommended Skills
Journey fit
How it compares
Layout and CSS skill package—not a component library generator or a visual design tool.
Common Questions / FAQ
Who is responsive-web-design for?
Solo builders and small front-end teams using AI coding agents to ship web UIs that must work across phones, tablets, and desktops.
When should I use responsive-web-design?
During Build frontend work when starting multi-device interfaces, adopting mobile-first development, or tightening accessible flexible layouts before Ship testing.
Is responsive-web-design safe to install?
It guides CSS and markup patterns only; confirm trust via the Security Audits panel on this Prism page before adding any third-party skill to your agent.
SKILL.md
READMESKILL.md - Responsive Web Design
# Responsive Web Design ## Table of Contents - [Overview](#overview) - [When to Use](#when-to-use) - [Quick Start](#quick-start) - [Reference Guides](#reference-guides) - [Best Practices](#best-practices) ## Overview Build mobile-first responsive interfaces using modern CSS techniques including Flexbox, Grid, and media queries to create adaptable user experiences. ## When to Use - Multi-device applications - Mobile-first development - Accessible layouts - Flexible UI systems - Cross-browser compatibility ## Quick Start Minimal working example: ```css /* Mobile styles (default) */ .container { display: flex; flex-direction: column; padding: 16px; gap: 16px; } .card { padding: 16px; border-radius: 8px; background: white; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .grid { display: grid; grid-template-columns: 1fr; gap: 16px; } /* Tablet (640px and up) */ @media (min-width: 640px) { .container { flex-direction: row; // ... (see reference guides for full implementation) ``` ## Reference Guides Detailed implementations in the `references/` directory: | Guide | Contents | |---|---| | [Mobile-First Media Query Strategy](references/mobile-first-media-query-strategy.md) | Mobile-First Media Query Strategy | | [Flexbox Responsive Navigation](references/flexbox-responsive-navigation.md) | Flexbox Responsive Navigation | | [CSS Grid Responsive Layout](references/css-grid-responsive-layout.md) | CSS Grid Responsive Layout | | [Responsive Typography](references/responsive-typography.md) | Responsive Typography | | [Responsive Cards Component](references/responsive-cards-component.md) | Responsive Cards Component | ## Best Practices ### ✅ DO - Follow established patterns and conventions - Write clean, maintainable code - Add appropriate documentation - Test thoroughly before deploying ### ❌ DON'T - Skip testing or validation - Ignore error handling - Hard-code configuration values # CSS Grid Responsive Layout ## CSS Grid Responsive Layout ```css /* 12-column grid system */ .grid-container { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; padding: 16px; } .grid-item { grid-column: span 12; padding: 16px; background: white; border-radius: 8px; border: 1px solid #e0e0e0; } /* Mobile: stacked */ .header { grid-column: span 12; } .sidebar { grid-column: span 12; } .main { grid-column: span 12; } .footer { grid-column: span 12; } /* Tablet: 2-column layout */ @media (min-width: 768px) { .header { grid-column: span 12; } .sidebar { grid-column: span 3; } .main { grid-column: span 9; } .footer { grid-column: span 12; } } /* Desktop: 3-column with sidebar */ @media (min-width: 1024px) { .header { grid-column: span 12; } .sidebar { grid-column: span 2; } .main { grid-column: span 8; } .aside { grid-column: span 2; } .footer { grid-column: span 12; } } ``` # Flexbox Responsive Navigation ## Flexbox Responsive Navigation ```html <!-- HTML --> <nav class="navbar"> <div class="navbar-brand">Logo</div> <button class="navbar-toggle" id="menuToggle">Menu</button> <ul class="navbar-menu" id="navMenu"> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> <style> .navbar { display: flex; justify-content: space-between; align-items: center; padding: 16px; background-color: #333; color: white; } .navbar-brand { font-size: 24px; font-weight: bold; } .navbar-toggle { display: block; background: none; border: none; color: white; cursor: pointer; font-size: 24px; } .navbar-me