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.
69
84%
Does it follow best practices?
Impact
—
No eval scenarios have been run
Passed
No known issues
Quality
Discovery
92%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 strong skill description that clearly articulates specific capabilities (Flexbox, CSS Grid, media queries) and provides explicit trigger guidance via a 'Use when' clause. The main weakness is moderate overlap risk with other CSS or front-end development skills, though the focus on layout-specific technologies helps differentiate it somewhat.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions and technologies: 'Builds adaptive web interfaces using Flexbox, CSS Grid, and media queries with a mobile-first approach.' This names specific CSS layout techniques and a concrete methodology. | 3 / 3 |
Completeness | Clearly answers both 'what' (builds adaptive web interfaces using Flexbox, CSS Grid, media queries with mobile-first approach) and 'when' (Use when creating multi-device layouts, implementing flexible UI systems, or ensuring cross-browser compatibility) with an explicit 'Use when' clause. | 3 / 3 |
Trigger Term Quality | Includes strong natural keywords users would say: 'Flexbox', 'CSS Grid', 'media queries', 'mobile-first', 'multi-device layouts', 'cross-browser compatibility', 'flexible UI systems'. These cover a good range of terms a developer would naturally use when seeking responsive layout help. | 3 / 3 |
Distinctiveness Conflict Risk | While it specifies CSS layout technologies clearly, it could overlap with general CSS styling skills or broader web development skills. The terms 'adaptive web interfaces' and 'cross-browser compatibility' are somewhat broad and could conflict with other front-end skills. | 2 / 3 |
Total | 11 / 12 Passed |
Implementation
77%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, well-structured responsive web design skill with executable CSS examples covering the key techniques. Its main weakness is that much of this content (responsive images, basic flexbox, media query syntax) represents standard CSS knowledge Claude already possesses, reducing the value-add of the skill. The skill would benefit from focusing on less obvious patterns, project-specific conventions, or edge cases rather than foundational CSS.
Suggestions
Remove or minimize sections covering CSS fundamentals Claude already knows (responsive images, basic flexbox) and focus on project-specific conventions, edge cases, or non-obvious patterns.
Add project-specific breakpoint tokens or design system variables that differentiate this skill from generic CSS knowledge.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is mostly efficient with good code examples, but includes some patterns Claude already knows well (responsive images with max-width: 100%, basic flexbox navigation). The inline comments are helpful but the overall content covers fairly standard CSS knowledge that Claude would already possess. | 2 / 3 |
Actionability | All code examples are fully executable, copy-paste ready CSS. Each section provides concrete, working code with clear breakpoint values and property declarations that can be directly used in projects. | 3 / 3 |
Workflow Clarity | For a single-purpose CSS skill, the workflow is clear: start mobile-first, then layer on tablet and desktop breakpoints. The sections are logically sequenced from layout fundamentals (container, grid) to specific components (typography, images, navigation), and the best practices section reinforces the approach. | 3 / 3 |
Progressive Disclosure | The content is well-organized with clear section headers, but it's somewhat monolithic — all patterns are inline rather than having a concise overview with references to detailed pattern files. The external MDN links are helpful but the skill itself could benefit from splitting advanced patterns into separate files if the bundle supported it. | 2 / 3 |
Total | 10 / 12 Passed |
Validation
100%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
- Repository
- secondsky/claude-skills
- Commit
5e92b71
- 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.