responsive-web-design▌
aj-geddes/useful-ai-prompts · updated Apr 8, 2026
Mobile-first responsive layouts using CSS Grid, Flexbox, and media queries.
- ›Covers three core layout techniques: Flexbox for flexible component layouts, CSS Grid for structured multi-column designs, and mobile-first media queries for device adaptation
- ›Includes reference guides for navigation, typography, cards, and grid-based layouts with working code examples
- ›Emphasizes mobile-first development strategy, cross-browser compatibility, and accessible design patterns across all device s
Responsive Web Design
Table of Contents
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:
/* 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 | Mobile-First Media Query Strategy |
| Flexbox Responsive Navigation | Flexbox Responsive Navigation |
| CSS Grid Responsive Layout | CSS Grid Responsive Layout |
| Responsive Typography | Responsive Typography |
| Responsive Cards Component | 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
Discussion
Product Hunt–style comments (not star reviews)- No comments yet — start the thread.
Ratings
4.6★★★★★58 reviews- ★★★★★Yusuf Ghosh· Dec 16, 2024
Solid pick for teams standardizing on skills: responsive-web-design is focused, and the summary matches what you get after install.
- ★★★★★Fatima Ndlovu· Dec 16, 2024
Registry listing for responsive-web-design matched our evaluation — installs cleanly and behaves as described in the markdown.
- ★★★★★Emma Shah· Dec 16, 2024
Useful defaults in responsive-web-design — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
- ★★★★★Tariq Abbas· Dec 12, 2024
responsive-web-design has been reliable in day-to-day use. Documentation quality is above average for community skills.
- ★★★★★Zaid Yang· Dec 8, 2024
I recommend responsive-web-design for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
- ★★★★★Shikha Mishra· Dec 4, 2024
I recommend responsive-web-design for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
- ★★★★★Amelia Wang· Nov 27, 2024
Solid pick for teams standardizing on skills: responsive-web-design is focused, and the summary matches what you get after install.
- ★★★★★Rahul Santra· Nov 23, 2024
Solid pick for teams standardizing on skills: responsive-web-design is focused, and the summary matches what you get after install.
- ★★★★★Ira Verma· Nov 7, 2024
I recommend responsive-web-design for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
- ★★★★★Kiara Dixit· Nov 7, 2024
responsive-web-design reduced setup friction for our internal harness; good balance of opinion and flexibility.
showing 1-10 of 58