CtrlK
BlogDocsLog inGet started
Tessl Logo

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

Quality

84%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

90%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The content is a lean, fully executable CSS reference with well-organized sections and useful external links. It lacks an explicit workflow sequence and internal progressive disclosure, but neither is strictly required for this single-purpose reference skill.

DimensionReasoningScore

Conciseness

The body is lean: a one-line intro, copy-paste CSS snippets, and a tight best-practices list, with no padding or explanation of concepts Claude already knows, matching the lean-and-efficient anchor.

5 / 5

Actionability

Every section provides fully executable, copy-paste-ready CSS covering the common responsive cases (container, grid, typography, images, navigation), matching the anchor for fully executable examples that cover common cases.

5 / 5

Workflow Clarity

Sections are clearly organized by technique with no destructive or batch operations requiring validation, but it is a pattern catalog rather than a sequenced workflow, so it sits just below the explicit-checkpoint anchor.

4 / 5

Progressive Disclosure

Content is well-organized into clearly signaled sections with external resource links, and everything is appropriately inline for a skill of this size, though there is no internal file-based progressive disclosure structure.

4 / 5

Total

18

/

20

Passed

Description

78%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

The description clearly states what the skill does and when to use it with concrete trigger phrases, and it targets a distinct niche. It is slightly limited by a single action verb and could add natural synonyms like 'responsive' to the trigger clause.

Suggestions

Expand the action list beyond the single verb 'Builds' (e.g., 'Builds, debugs, and refactors adaptive web interfaces') to raise specificity.

Add 'responsive' and 'breakpoints' as explicit trigger terms in the 'Use when' clause for better natural-keyword coverage.

Clarify what makes this distinct from general frontend/CSS skills to reduce overlap risk.

DimensionReasoningScore

Specificity

Names the domain ('adaptive web interfaces') and concrete techniques (Flexbox, CSS Grid, media queries, mobile-first) but relies on a single action verb ('Builds'), fitting the anchor that names the domain with 1-2 concrete actions rather than a comprehensive action list.

3 / 5

Completeness

Explicitly answers both 'what' ('Builds adaptive web interfaces using...') and 'when' ('Use when creating...') with concrete trigger phrases, matching the anchor for clear and explicit what-and-when coverage.

5 / 5

Trigger Term Quality

Natural trigger phrases like 'creating multi-device layouts', 'implementing flexible UI systems', and 'ensuring cross-browser compatibility' give good keyword coverage, though common synonyms such as 'responsive' itself are absent from the when-clause.

4 / 5

Distinctiveness Conflict Risk

The responsive/mobile-first niche has distinct triggers and low conflict risk, but it could overlap with general CSS or frontend-layout skills, placing it just below the minimal-conflict anchor.

4 / 5

Total

16

/

20

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.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
secondsky/claude-skills
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.