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.

Install with Tessl CLI

npx tessl i github:supercent-io/skills-template --skill responsive-design

What are skills?

1.08x

Quality

78%

Does it follow best practices?

Impact

99%

1.08x

Average score across 3 eval scenarios

Optimize this skill with Tessl

npx tessl skill review --optimize ./.agent-skills/responsive-design/SKILL.md

SKILL.md

Review

Evals

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 well-crafted skill description that clearly articulates capabilities with specific technologies and includes explicit 'Use when' guidance. The description uses proper third-person voice and provides good trigger term coverage. Minor weakness is potential overlap with general CSS/layout 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 seeking help with responsive design.	3 / 3
Distinctiveness Conflict Risk	While focused on responsive design specifically, there's potential overlap with general CSS skills or web development skills. Terms like 'CSS Grid' and 'Flexbox' could trigger for non-responsive layout tasks as well.	2 / 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 is a solid, actionable skill with excellent executable code examples covering responsive design comprehensively. The main weaknesses are verbosity (some patterns repeated across sections), lack of validation/testing checkpoints in the workflow, and all content being inline rather than using progressive disclosure to separate advanced topics.

Suggestions

Add explicit testing/validation steps after each implementation phase (e.g., 'Test at each breakpoint using DevTools before proceeding')

Move advanced topics like Container Queries and Art Direction to separate reference files, keeping SKILL.md as a concise overview

Remove the Metadata section - version numbers and tags don't help Claude execute the skill

Consolidate the repeated mobile-first pattern demonstrations into a single comprehensive example

Dimension	Reasoning	Score
Conciseness	The skill is comprehensive but includes some redundancy - the mobile-first approach is demonstrated multiple times across different sections, and some explanatory comments could be trimmed. The metadata section at the end adds tokens without much value for Claude.	2 / 3
Actionability	Excellent executable code examples throughout - CSS is copy-paste ready, React components are complete, and specific breakpoint values are provided. Every technique includes working code rather than pseudocode.	3 / 3
Workflow Clarity	Steps are numbered and sequenced, but there are no validation checkpoints or feedback loops. For a skill involving layout changes that could break on different devices, there's no mention of testing/verification steps between implementation phases.	2 / 3
Progressive Disclosure	Content is well-organized with clear sections, but it's monolithic - all content is inline rather than split into separate reference files. The References section links to external resources but advanced topics like Container Queries could be in separate files.	2 / 3
	Total	9 / 12 Passed

Validation

81%

Warnings & errors only

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

Reviewed: about 19 hours ago

Table of Contents

Discovery Implementation Validation

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.