responsive-web-design
Builds adaptive web interfaces using Flexbox, CSS Grid, and media queries with a mobile-first approach. Use when creating multi-device layouts, implementing flexible UI systems, or ensuring cross-browser compatibility.
98
100%
Does it follow best practices?
Impact
92%
1.80xAverage score across 3 eval scenarios
Passed
No known issues
Evaluation results
92%
28%Product Catalog Grid
Responsive CSS Grid layout
Mobile-first base
100%
100%
Mobile single column
100%
100%
Tablet breakpoint 640px
0%
100%
Two-column tablet grid
50%
100%
Desktop breakpoint 1024px
0%
100%
Three-column desktop grid
50%
100%
CSS Grid used
100%
100%
Grid gap 1rem
50%
0%
Flexible units
87%
100%
min-width queries only
100%
100%
Container max-width
50%
100%
100%
83%Site Navigation Bar
Flexbox navigation bar
Flexbox used for nav
62%
100%
Column on mobile
0%
100%
Mobile-first structure
0%
100%
768px breakpoint
0%
100%
Row direction at 768px
0%
100%
justify-content space-between
0%
100%
align-items center
0%
100%
Nav gap 0.5rem
0%
100%
48px touch targets
70%
100%
Flexible units in nav
62%
100%
min-width queries only
0%
100%
84%
10%Landing Page Hero Section
Fluid typography and hero images
h1 uses clamp()
100%
100%
h1 clamp values
100%
62%
Paragraph uses clamp()
100%
100%
Paragraph clamp values
100%
100%
General image rules
0%
0%
Hero aspect-ratio 16/9
0%
100%
Hero object-fit cover
100%
100%
Hero width 100%
100%
100%
Container padding scaling
50%
37%
Container max-width centered
100%
100%
Mobile-first CSS
42%
100%
Flexible units
100%
100%
- Repository
- secondsky/claude-skills
- Commit
90d6bd7
- Evaluated
- Agent
- Claude Code
- Model
- Claude Sonnet 4.6
Table of Contents
Is this your skill?
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.