Best for
- Implementing mobile-first responsive layouts
- Using container queries for component-based responsiveness
- Creating fluid typography and spacing scales
Source profileQuality 69/100
wshobson/agents/plugins/ui-design/skills/responsive-design/SKILL.md
responsive-design
Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior.
- Source repository stars
- 38,313
- Declared platforms
- 0
- Static risk flags
- 1
- Last source update
- 2026-07-22
- Source checked
- 2026-07-28
Decision brief
What it does—and where it fits
Master modern responsive design techniques to create interfaces that adapt seamlessly across all screen sizes and device contexts.
Not for
- Tasks that require unconfirmed production actions or broad system permissions.
- Environments where the pinned source and install steps cannot be inspected.
Compatibility matrix
Platform support, with evidence labels
| Platform | Status | Evidence | What to check |
|---|---|---|---|
| Codex | Not declared | No explicit evidence | Portability before use |
| Claude Code | Not declared | No explicit evidence | Portability before use |
| Cursor | Not declared | No explicit evidence | Portability before use |
| Gemini CLI | Not declared | No explicit evidence | Portability before use |
Installation
Inspect first. Install second.
The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.
Source-detected install commandSource
npx skills add https://github.com/wshobson/agents --skill "plugins/ui-design/skills/responsive-design"Safe inspection promptEditorial
Inspect the Agent Skill "responsive-design" from https://github.com/wshobson/agents/blob/c4b82b0ad771190355eb8e204b1329732a18449a/plugins/ui-design/skills/responsive-design/SKILL.md at commit c4b82b0ad771190355eb8e204b1329732a18449a. List every install step, command, network request, credential, file read/write, external action, and rollback step. Explain whether it fits my task. Do not install or execute anything until I approve.
Workflow
What the source asks the agent to do
- 01
When to Use This Skill
Implementing mobile-first responsive layouts
Implementing mobile-first responsive layoutsUsing container queries for component-based responsivenessCreating fluid typography and spacing scales - 02
Detailed patterns and worked examples
Detailed pattern documentation lives in references/details.md. Read that file when the navigation tier above is insufficient.
Detailed pattern documentation lives in references/details.md. Read that file when the navigation tier above is insufficient. - 03
Best Practices
1. Mobile-First: Start with mobile styles, enhance for larger screens 2. Content Breakpoints: Set breakpoints based on content, not devices 3. Fluid Over Fixed: Use fluid values for typography and spacing 4. Container Queries: Use for component-level responsiveness 5. Test Real…
Mobile-First: Start with mobile styles, enhance for larger screensContent Breakpoints: Set breakpoints based on content, not devicesFluid Over Fixed: Use fluid values for typography and spacing - 04
Common Issues
Horizontal Overflow: Content breaking out of viewport
Horizontal Overflow: Content breaking out of viewportFixed Widths: Using px instead of relative unitsViewport Height: 100vh issues on mobile browsers
Permission review
Static risk signals and limitations
Reads files
The documentation asks the agent to read local files, directories, or repositories.
Detailed pattern documentation lives in `references/details.md`. Read that file when the navigation tier above is insufficient.Evidence record
Why each signal appears
EvidenceSourceComputedTestedEditorial
| Signal | Value | Evidence type | Meaning |
|---|---|---|---|
| Quality score | 69/100 | Computed | Documentation, specificity, maintenance, and trust rules |
| Repository stars | 38,313 | Source | Repository attention, not individual Skill quality |
| Compatibility | 0 platforms | Source | Declared in the catalog source record |
| Usage guide | automated source guide | Editorial | Generated or reviewed according to the visible evidence level |
Pinned source
Provenance and original SKILL.md
- Repository
- wshobson/agents
- Skill path
- plugins/ui-design/skills/responsive-design/SKILL.md
- Commit
- c4b82b0ad771190355eb8e204b1329732a18449a
- License
- MIT
- Collected
- 2026-07-28
- Default branch
- main
View the original SKILL.md
Responsive Design
Master modern responsive design techniques to create interfaces that adapt seamlessly across all screen sizes and device contexts.
When to Use This Skill
- Implementing mobile-first responsive layouts
- Using container queries for component-based responsiveness
- Creating fluid typography and spacing scales
- Building complex layouts with CSS Grid and Flexbox
- Designing breakpoint strategies for design systems
- Implementing responsive images and media
- Creating adaptive navigation patterns
- Building responsive tables and data displays
Detailed patterns and worked examples
Detailed pattern documentation lives in references/details.md. Read that file when the navigation tier above is insufficient.
Best Practices
- Mobile-First: Start with mobile styles, enhance for larger screens
- Content Breakpoints: Set breakpoints based on content, not devices
- Fluid Over Fixed: Use fluid values for typography and spacing
- Container Queries: Use for component-level responsiveness
- Test Real Devices: Simulators don't catch all issues
- Performance: Optimize images, lazy load off-screen content
- Touch Targets: Maintain 44x44px minimum on mobile
- Logical Properties: Use inline/block for internationalization
Common Issues
- Horizontal Overflow: Content breaking out of viewport
- Fixed Widths: Using px instead of relative units
- Viewport Height: 100vh issues on mobile browsers
- Font Size: Text too small on mobile
- Touch Targets: Buttons too small to tap accurately
- Aspect Ratio: Images squishing or stretching
- Z-Index Stacking: Overlays breaking on different screens
Alternatives
Compare before choosing
Computed 10042,015
coreyhaines31/marketingskills
ab-testing
When the user wants to plan, design, or implement an A/B test or experiment, or build a growth experimentation program. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," "hypothesis," "should I test this," "which version is better," "test two versions," "statistical significance," "how long should I run this test," "growth experiments," "experiment velocity," "experiment backlog," "ICE score," "experimentation program
Computed 10042,015
coreyhaines31/marketingskills
churn-prevention
When the user wants to reduce churn, build cancellation flows, set up save offers, recover failed payments, or implement retention strategies. Also use when the user mentions 'churn,' 'cancel flow,' 'offboarding,' 'save offer,' 'dunning,' 'failed payment recovery,' 'win-back,' 'retention,' 'exit survey,' 'pause subscription,' 'involuntary churn,' 'people keep canceling,' 'churn rate is too high,' 'how do I keep users,' or 'customers are leaving.' Use this whenever someone is losing subscribers o
Computed 1007
event4u-app/agent-config
design-intelligence
Grounded design brief from the adopted corpus — style, WCAG-checked color tokens, typography, layout pattern, anti-patterns. Use on ui-design-brief or any which-style/palette/font/chart decision.
Computed 1007
event4u-app/agent-config
design-system-capture
Write and maintain DESIGN.md + PRODUCT.md — captures visual decisions and interaction patterns so design tasks stay consistent across sessions without re-scanning past work.