responsive-design
Create responsive web designs that work across all devices and screen sizes. Use when building mobile-first layouts, implementing breakpoints, or optimizing for different viewports. Handles CSS Grid, Flexbox, media queries, viewport units, and responsive images.
87
82%
Does it follow best practices?
Impact
99%
1.08xAverage score across 3 eval scenarios
Passed
No known issues
Quality
Discovery
100%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This is a well-crafted skill description that excels across all dimensions. It uses third person voice correctly, provides specific technologies and actions, includes a clear 'Use when...' clause with natural trigger terms, and carves out a distinct niche around responsive web design that differentiates it from general CSS or web development skills.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions and technologies: 'CSS Grid, Flexbox, media queries, viewport units, and responsive images' along with specific tasks like 'building mobile-first layouts, implementing breakpoints, optimizing for different viewports.' | 3 / 3 |
Completeness | Clearly answers both what ('Create responsive web designs', 'Handles CSS Grid, Flexbox...') AND when ('Use when building mobile-first layouts, implementing breakpoints, or optimizing for different viewports') with explicit trigger guidance. | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural terms users would say: 'responsive', 'mobile-first', 'breakpoints', 'viewports', 'CSS Grid', 'Flexbox', 'media queries', 'responsive images' - these are all terms developers naturally use when discussing responsive design. | 3 / 3 |
Distinctiveness Conflict Risk | Clear niche focused specifically on responsive/adaptive web design with distinct triggers like 'mobile-first', 'breakpoints', 'viewports', and specific CSS technologies. Unlikely to conflict with general CSS or web development skills due to the responsive-specific focus. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
64%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a solid, actionable responsive design skill with excellent code examples covering mobile-first CSS, Flexbox, Grid, responsive images, and typography. The main weaknesses are verbosity (could be 30-40% shorter), lack of validation checkpoints for testing responsive implementations, and all content being inline rather than progressively disclosed across files.
Suggestions
Add explicit validation steps: 'Test layout at 320px, 768px, 1024px, and 1440px breakpoints before finalizing' after each major section
Remove the Metadata section entirely - version numbers, tags, and platform compatibility don't help Claude execute the skill
Split detailed examples (responsive navigation, product grid) into a separate EXAMPLES.md file, keeping only the core patterns in SKILL.md
Remove inline comments that state the obvious (e.g., '/* Mobile: 1 column */', '/* 2 columns */') to reduce token count
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is comprehensive but includes some unnecessary verbosity. Comments like '/* Mobile: 1 column */' and section headers explaining obvious concepts add tokens without value. The metadata section at the end is largely unnecessary for Claude. | 2 / 3 |
Actionability | Excellent executable code examples throughout. CSS and React/TSX snippets are copy-paste ready with real-world patterns like responsive navigation, grid layouts, and image handling. All code is complete and functional. | 3 / 3 |
Workflow Clarity | Steps are numbered and sequenced (Step 1-5), but there are no validation checkpoints or feedback loops. For responsive design work, testing/verification steps (e.g., 'test at each breakpoint before proceeding') would improve reliability. | 2 / 3 |
Progressive Disclosure | Content is well-structured with clear sections, but it's monolithic - all content is inline rather than split into separate reference files. The References section links to external MDN/CSS-Tricks docs but no internal skill files for advanced topics. | 2 / 3 |
Total | 9 / 12 Passed |
Validation
81%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 9 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
skill_md_line_count | SKILL.md is long (514 lines); consider splitting into references/ and linking | Warning |
metadata_version | 'metadata.version' is missing | Warning |
Total | 9 / 11 Passed | |
- Repository
- supercent-io/skills-template
- Commit
c033769
- Reviewed
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.