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.
74
67%
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 ./.gemini/skills/adapt/SKILL.mdQuality
Discovery
100%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 communicates specific capabilities (breakpoints, fluid layouts, touch targets), uses third-person voice correctly, and includes an explicit 'Use when...' clause with natural trigger terms. It covers the responsive design domain comprehensively and distinctively with minimal risk of conflicting with other skills.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: 'Adapt designs to work across different screen sizes, devices, contexts, or platforms', 'Implements breakpoints, fluid layouts, and touch targets' — these are concrete, actionable capabilities. | 3 / 3 |
Completeness | Clearly answers both 'what' (adapt designs across screen sizes, implement breakpoints/fluid layouts/touch targets) and 'when' with an explicit 'Use when...' clause listing specific trigger scenarios. | 3 / 3 |
Trigger Term Quality | Includes strong natural keywords users would say: 'responsive design', 'mobile layouts', 'breakpoints', 'viewport adaptation', 'cross-device compatibility'. These cover common variations of how users would phrase requests in this domain. | 3 / 3 |
Distinctiveness Conflict Risk | Clearly occupies a distinct niche around responsive/adaptive design with specific triggers like 'breakpoints', 'viewport adaptation', and 'cross-device compatibility' that are unlikely to conflict with other skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
35%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill reads more like a comprehensive responsive design textbook than a targeted skill file for Claude. It extensively covers well-known design concepts (touch targets, CSS techniques, breakpoint values) that Claude already understands, resulting in significant token waste. While the structure is logical and the guidance is specific in places, the lack of executable code examples and the monolithic inline treatment of five different adaptation contexts significantly reduce its effectiveness.
Suggestions
Reduce content by 60%+ by removing well-known responsive design concepts (CSS Grid, media queries, touch target sizes) and focus only on project-specific decisions, patterns, or non-obvious guidance that Claude wouldn't already know.
Add executable code examples for key adaptation techniques (e.g., a complete responsive breakpoint CSS snippet, a container query example, a responsive navigation component) instead of just listing technique names.
Split the five adaptation contexts (Mobile, Tablet, Desktop, Print, Email) into separate reference files and keep only a brief overview with links in the main SKILL.md.
Add concrete validation steps in the Verify section, such as specific commands for running Lighthouse audits, browser testing scripts, or a checklist with pass/fail criteria and remediation steps.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is extremely verbose with extensive lists of obvious design knowledge that Claude already knows (touch targets, CSS Grid, media queries, responsive breakpoints, etc.). Much of this reads like a textbook on responsive design rather than novel, project-specific guidance. The content could be reduced by 60-70% without losing actionable value. | 1 / 3 |
Actionability | The skill provides specific values (44x44px touch targets, 600px email width, breakpoint ranges) and names concrete techniques (CSS Grid, container queries, clamp()), but lacks any executable code examples. Everything remains at the descriptive/instructional level without copy-paste ready implementations. | 2 / 3 |
Workflow Clarity | There is a clear high-level sequence (Assess → Plan → Implement → Verify), but the verification step is just a checklist of things to test with no concrete validation commands or feedback loops. For a multi-step design adaptation process, there are no explicit checkpoints or error recovery steps between phases. | 2 / 3 |
Progressive Disclosure | The skill references /frontend-design and /teach-impeccable as external resources, which is good. However, the body itself is a monolithic wall of content (~150+ lines) covering mobile, tablet, desktop, print, and email adaptations all inline, when these could easily be split into separate reference files with a concise overview in the main skill. | 2 / 3 |
Total | 7 / 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
- pbakaus/impeccable
- Commit
db1add7
- 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.