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.
80
75%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Passed
No known issues
Optimize this skill with Tessl
npx tessl skill review --optimize ./plugins/responsive-web-design/skills/responsive-web-design/SKILL.mdQuality
Discovery
85%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-structured skill description that clearly communicates both what the skill does and when to use it, with specific technologies named. The main weakness is in trigger term coverage—it uses technical terms well but misses the very common phrase 'responsive design' and related natural language terms users would likely say. Overall it's a strong description with minor room for improvement.
Suggestions
Add common natural language trigger terms like 'responsive design', 'responsive layout', 'screen sizes', and 'breakpoints' to improve discoverability when users describe their needs in non-technical terms.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions and technologies: 'Flexbox, CSS Grid, and media queries' with 'mobile-first approach', 'multi-device layouts', 'flexible UI systems', and 'cross-browser compatibility'. | 3 / 3 |
Completeness | Clearly answers both 'what' (builds adaptive web interfaces using Flexbox, CSS Grid, media queries with mobile-first approach) and 'when' (explicit 'Use when' clause covering multi-device layouts, flexible UI systems, and cross-browser compatibility). | 3 / 3 |
Trigger Term Quality | Includes good technical terms like 'Flexbox', 'CSS Grid', 'media queries', 'mobile-first', and 'cross-browser compatibility', but misses common natural user terms like 'responsive design', 'responsive layout', 'CSS layout', 'breakpoints', or 'screen sizes'. | 2 / 3 |
Distinctiveness Conflict Risk | Clearly scoped to CSS layout techniques (Flexbox, Grid, media queries) with a mobile-first focus, making it distinct from general CSS styling, JavaScript, or other web development skills. | 3 / 3 |
Total | 11 / 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 skill provides clean, executable CSS examples covering core responsive design patterns with a mobile-first approach. Its main weakness is that it reads more like a CSS reference sheet than a skill that teaches Claude something it doesn't already know — responsive design fundamentals are well within Claude's existing knowledge. The skill would benefit from focusing on project-specific conventions, edge cases, or a structured workflow for building responsive layouts rather than cataloging standard patterns.
Suggestions
Remove or significantly condense patterns Claude already knows (responsive images, basic flexbox) and focus on project-specific conventions, edge cases, or non-obvious techniques.
Add a workflow section that sequences how to build a responsive layout from scratch, including validation steps like browser testing checkpoints or accessibility verification.
Include guidance on common pitfalls and debugging (e.g., viewport meta tag requirements, overflow issues, specific cross-browser gotchas) rather than standard patterns.
| 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 some are stating the obvious (e.g., '/* Mobile: single column */'). | 2 / 3 |
Actionability | All code examples are fully executable, copy-paste ready CSS. The examples cover the key responsive design patterns (media queries, grid, typography, images, navigation) with concrete breakpoint values and real property declarations. | 3 / 3 |
Workflow Clarity | This is a collection of CSS patterns rather than a multi-step workflow. While the sections are logically ordered (container → grid → typography → images → navigation), there's no explicit workflow for building a responsive layout, no validation steps (e.g., testing checklist, browser dev tools verification), and the best practices section is disconnected from the examples. | 2 / 3 |
Progressive Disclosure | The content is well-sectioned with clear headings, and includes external MDN references. However, all patterns are inline in a single file when some (like a complete responsive page template or cross-browser compatibility notes) could be split out. The external links are generic MDN references rather than project-specific deeper content. | 2 / 3 |
Total | 9 / 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
88da5ff
- 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.