frontendby dicklesworthstone
Responsive Design
dicklesworthstone/responsive-design
Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies.
What it changes
Passed 20 of 23 test cases with the skill, and 20 of 23 without it.
Without skill87%
With skill87%
0 fixed20 passed either way3 still failing0 broke
- Pass-rate lift
- 0 pp
- Tokens
- +275%
- Agent turns
- 0%
- Response time
- -6%
Model gemini-3.6-flashMeasured 8/29/2026v120 of 23 cases passed with skill
What's inside
The instructions your model reads when the skill loads.
SKILL.md519 lines4 files
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
Core Capabilities
1. Container Queries
- Component-level responsiveness independent of viewport
- Container query units (cqi, cqw, cqh)
- Style queries for conditional styling
- Fallbacks for browser support
2. Fluid Typography & Spacing
- CSS clamp() for fluid scaling
- Viewport-relative units (vw, vh, dvh)
- Fluid type scales with min/max bounds
- Responsive spacing systems
3. Layout Patterns
- CSS Grid for 2D layouts
- Flexbox for 1D distribution
- Intrinsic layouts (content-based sizing)
- Subgrid for nested grid alignment
4. Breakpoint Strategy
Track record
Benchmark
20 / 23
test cases passed, vs 20 / 23 without
Adoption
- Users
- 3
- Times used
- 61
Safety and source details
SkillSafety
✓ 3 of 3 passed✓Code scan15 of 15 checks clean
0 critical · 0 warning · 0 info — scanner v4 — 8/10/2026
View 15 scanner checks
live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing
✓IntentSafe
LLM judge · does the skill do what it claims
✓ContentClean
LLM judge · policy & harmful-content review
Source
Importeddicklesworthstone / pi_agent_rust
tests/ext_conformance/artifacts/agents-wshobson/ui-design/skills/responsive-design/SKILL.md
License NOASSERTIONImported 8/10/2026Version v1Bundled 3 files