adapt

Adapt designs to work across different screen sizes, devices, contexts, or platforms. Implements breakpoints, fluid layouts, and touch targets. Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility.

Quality

75%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./templates/skills/impeccable/adapt/SKILL.md

Quality

Content

67%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.

A well-structured, actionable instruction-only skill with a clear assess-plan-implement-verify workflow and concrete numeric guidance (breakpoints, touch targets, sizes). Main weaknesses are repetition of guidance Claude already knows and the absence of executable CSS examples, plus a monolithic body that could offload per-platform detail to reference files.

Suggestions

Deduplicate repeated guidance (44x44px touch targets, hover-state removal) into the single 'Touch Adaptation' section and cut generic design knowledge Claude already has (e.g., hamburger menus on mobile).

Add one or two copy-paste CSS snippets — e.g., a content-driven media query, a clamp() fluid-type example, or a container query — to make the implementation guidance fully executable.

Move the per-platform strategy detail (Mobile/Tablet/Desktop/Print/Email) into one-level-deep reference files (e.g., references/mobile.md) and keep SKILL.md as a concise overview with clearly signaled links.

Dimension	Reasoning	Score
Conciseness	Mostly efficient prescriptive lists rather than padded prose, but guidance repeats (44x44px touch targets stated twice; 'not hover-dependent' appears in three sections) and includes design heuristics Claude already knows (hover states fail on touch, hamburger menus on mobile). Not 2 because it is list-based with little conceptual filler.	3 / 5
Actionability	Concrete specifics throughout — 'Mobile: 320px-767px / Tablet: 768px-1023px / Desktop: 1024px+', 'clamp()', container queries, 'srcset', '600px max' email width, '16px minimum' text, '44x44px' touch targets. Not 5 because no copy-paste CSS examples (e.g., a sample media query or clamp() snippet) are provided.	4 / 5
Workflow Clarity	Clear four-phase sequence (Assess Adaptation Challenge → Plan Adaptation Strategy → Implement Adaptations → Verify Adaptations) with an explicit verification checklist covering real devices, orientations, browsers, and edge cases. Not 5 because there is no explicit validate-and-fix feedback loop after verification findings.	4 / 5
Progressive Disclosure	Single file with well-organized, clearly headed sections and cross-skill references to /frontend-design and /teach-impeccable; no bundle files exist, so nothing is misreferenced. Not 5 because the ~190-line body inlines per-platform strategy detail (Mobile/Tablet/Desktop/Print/Email) that could plausibly live in one-level-deep reference files.	4 / 5
	Total	15 / 20 Passed

Description

83%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.

A strong description that clearly states what the skill does and when to use it, with concrete capabilities and natural trigger terms in third-person voice. Minor improvements possible: a few more synonyms ('mobile-friendly', 'adaptive design') and slightly broader action coverage would make it fully comprehensive.

Dimension	Reasoning	Score
Specificity	Names the domain ('Adapt designs to work across different screen sizes, devices, contexts, or platforms') and lists several specific actions ('Implements breakpoints, fluid layouts, and touch targets'). Not 5 because coverage has minor gaps — navigation restructuring, content adaptation, and testing are not mentioned.	4 / 5
Completeness	Explicitly answers both 'what' ('Adapt designs... Implements breakpoints, fluid layouts, and touch targets') and 'when' ('Use when the user mentions responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility') with concrete trigger phrases, matching the top anchor's example pattern.	5 / 5
Trigger Term Quality	'responsive design, mobile layouts, breakpoints, viewport adaptation, or cross-device compatibility' gives good natural keyword coverage. Not 5 because common user phrasings like 'mobile-friendly', 'adaptive', or 'make it responsive' are missing.	4 / 5
Distinctiveness Conflict Risk	Clear niche (cross-context/cross-device design adaptation) with distinct triggers like 'breakpoints' and 'viewport adaptation'; only minor overlap risk with general frontend-design or CSS-layout skills.	4 / 5
	Total	17 / 20 Passed

Validation

93%

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 — 15 / 16 Passed

Validation for skill structure

Criteria	Description	Result
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	15 / 16 Passed

Repository: fengshao1227/ccg-workflow
Path: templates/skills/impeccable/adapt/SKILL.md
Commit: f349e3d

Reviewed: 5 days 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.