Implement modern responsive layouts using container queries

Responsive design

by wshobson · MIT license · ★ 39,857 on GitHub · updated Sep 21

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…

---
name: responsive-design
description: 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.
---

# 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

Overview

Master modern responsive design techniques to create interfaces that adapt seamlessly across all screen sizes and device contexts.

Manual install (npx, ZIP)

Claude Codenpx skills add wshobson/agents --skill responsive-design -g -a claude-code

Claude Code (manual)

mkdir -p ~/.claude/skills && curl -sL https://codeload.github.com/wshobson/agents/tar.gz/4236bb91f839 \
  | tar -xz -C ~/.claude/skills --strip-components=4 agents-4236bb91f839/plugins/ui-design/skills/responsive-design

Windows (PowerShell)

New-Item -ItemType Directory -Force "$HOME\.claude\skills" | Out-Null; Invoke-WebRequest "https://m.agentalley.io/zip/a6cc58d7fe038a56d833/responsive-design.zip" -OutFile "$env:TEMP\responsive-design.zip"; Expand-Archive "$env:TEMP\responsive-design.zip" -DestinationPath "$HOME\.claude\skills" -Force

Claude.ai / desktopDownload the ZIP and upload it under Settings → Capabilities → Skills.

Codex, Cursor, other agentsPoint them at SKILL.md. The other files are plain text.

Connects with Agent Alley MCP · agentalley.io/mcp

Files included

SKILL.md1.9 KB
references/4 files · 41.0 KB

Read the files here

wshobson/4236bb95 files

SKILL.md1.9 KB

SKILL.md

Show the full text45 lines

responsive-design/SKILL.md45 lines · 1.9 KB

PreviewCode

Outline

RawView on GitHub

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

1	---
2	name: responsive-design
3	description: 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.
4	---
5
6	# Responsive Design
7
8	Master modern responsive design techniques to create interfaces that adapt seamlessly across all screen sizes and device contexts.
9
10	## When to Use This Skill
11
12	- Implementing mobile-first responsive layouts
13	- Using container queries for component-based responsiveness
14	- Creating fluid typography and spacing scales
15	- Building complex layouts with CSS Grid and Flexbox
16	- Designing breakpoint strategies for design systems
17	- Implementing responsive images and media
18	- Creating adaptive navigation patterns
19	- Building responsive tables and data displays
20
21	## Detailed patterns and worked examples
22
23	Detailed pattern documentation lives in `references/details.md`. Read that file when the navigation tier above is insufficient.
24
25	## Best Practices
26
27	1. Mobile-First: Start with mobile styles, enhance for larger screens
28	2. Content Breakpoints: Set breakpoints based on content, not devices
29	3. Fluid Over Fixed: Use fluid values for typography and spacing
30	4. Container Queries: Use for component-level responsiveness
31	5. Test Real Devices: Simulators don't catch all issues
32	6. Performance: Optimize images, lazy load off-screen content
33	7. Touch Targets: Maintain 44x44px minimum on mobile
34	8. Logical Properties: Use inline/block for internationalization
35
36	## Common Issues
37
38	- Horizontal Overflow: Content breaking out of viewport
39	- Fixed Widths: Using px instead of relative units
40	- Viewport Height: 100vh issues on mobile browsers
41	- Font Size: Text too small on mobile
42	- Touch Targets: Buttons too small to tap accurately
43	- Aspect Ratio: Images squishing or stretching
44	- Z-Index Stacking: Overlays breaking on different screens
45