responsive-web-design
tessl i github:secondsky/claude-skills --skill responsive-web-designBuilds 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.
Validation
75%| Criteria | Description | Result |
|---|---|---|
metadata_version | 'metadata' field is not a dictionary | Warning |
license_field | 'license' field is missing | Warning |
body_output_format | No obvious output/return/format terms detected; consider specifying expected outputs | Warning |
body_steps | No step-by-step structure detected (no ordered list); consider adding a simple workflow | Warning |
Total | 12 / 16 Passed | |
Implementation
100%This is a well-crafted skill that demonstrates excellent token efficiency while providing fully actionable CSS patterns. The mobile-first approach is consistently demonstrated across all examples, and the best practices section adds value without redundancy. The external MDN links appropriately defer comprehensive documentation.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is lean and efficient, presenting only essential CSS patterns without explaining what responsive design is or how CSS works. Every section delivers actionable code with minimal commentary. | 3 / 3 |
Actionability | All code examples are fully executable CSS that can be copied directly into a stylesheet. Specific breakpoints, property values, and complete selectors are provided throughout. | 3 / 3 |
Workflow Clarity | For this single-purpose skill (CSS patterns), the workflow is implicit but clear: apply mobile-first base styles, then layer media queries. The best practices section provides a clear sequence ('Start with mobile styles first'). | 3 / 3 |
Progressive Disclosure | Content is well-organized into logical sections (media queries, grid, typography, images, navigation) with external MDN references for deeper learning. The skill stays focused without becoming monolithic. | 3 / 3 |
Total | 12 / 12 Passed |
Activation
100%This is a well-crafted skill description that follows best practices. It uses third person voice, lists specific technologies and techniques, includes an explicit 'Use when...' clause with natural trigger terms, and carves out a distinct niche around responsive CSS layout systems.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: 'Builds adaptive web interfaces using Flexbox, CSS Grid, and media queries with a mobile-first approach' - names specific technologies and approaches. | 3 / 3 |
Completeness | Clearly answers both what ('Builds adaptive web interfaces using Flexbox, CSS Grid, and media queries') AND when ('Use when creating multi-device layouts, implementing flexible UI systems, or ensuring cross-browser compatibility'). | 3 / 3 |
Trigger Term Quality | Includes natural keywords users would say: 'Flexbox', 'CSS Grid', 'media queries', 'mobile-first', 'multi-device layouts', 'flexible UI', 'cross-browser compatibility' - good coverage of terms developers naturally use. | 3 / 3 |
Distinctiveness Conflict Risk | Clear niche focused on responsive/adaptive CSS layout techniques with distinct triggers like 'Flexbox', 'CSS Grid', 'mobile-first', 'multi-device layouts' - unlikely to conflict with general web development or other CSS skills. | 3 / 3 |
Total | 12 / 12 Passed |
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.