responsive-design
Mobile-first responsive design patterns using CSS Grid, Flexbox, fluid typography, and optimized image techniques.
Install
npx skills add https://github.com/supercent-io/skills-template --skill responsive-designStats
| Total installs | 11,234 |
| Weekly installs | 11.2K |
| GitHub stars | 88 |
| First seen | Jan 24, 2026 |
| Source | @supercent-io/skills-template |
Summary
- Covers mobile-first design progression from 320px through large screens (1440px+) with standard breakpoint definitions
- Implements Flexbox for 1-dimensional layouts and CSS Grid for 2-dimensional layouts, with practical examples for navigation, cards, and dashboards
- Includes responsive image techniques: srcset for resolution-aware loading, picture element for art direction, and CSS background image switching
- Provides fluid typography using clamp() for viewport-relative sizing and container queries for component-level responsive behavior
- Requires viewport meta tag and enforces relative units (rem, em, %, vw/vh) with max-width constraints instead of fixed dimensions
Tags
Related skills
| Skill | Installs | vs responsive-design |
|---|---|---|
| chat-ui | 13,944 | +2,710 |
| file-organization | 11,029 | -205 |
| vue | 12,816 | +1,582 |
| vitest | 10,256 | -978 |
| jeo | 10,387 | -847 |
FAQ
- How many installs does responsive-design have?
- responsive-design has 11,234 total installs and 11.2K installs this week.
- Where is responsive-design hosted?
- responsive-design is published by @supercent-io/skills-template at https://github.com/supercent-io/skills-template.
- How many GitHub stars does responsive-design have?
- responsive-design has 88 GitHub stars.
- When was responsive-design first indexed?
- OrangeBot.AI first indexed responsive-design on Jan 24, 2026.
- How do I install responsive-design?
- Run: npx skills add https://github.com/supercent-io/skills-template --skill responsive-design