extract
Extract and consolidate reusable components, design tokens, and patterns into your design system. Identifies opportunities for systematic reuse and enriches your component library. Use when the user asks to create components, refactor repeated UI patterns, build a design system, or extract tokens.
76
71%
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 ./source/skills/extract/SKILL.mdQuality
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 strong description that clearly articulates specific capabilities and includes an explicit 'Use when...' clause with natural trigger terms. The main weakness is a slight risk of overlap with general UI/frontend development skills, though the focus on design systems and token extraction helps differentiate it. Minor note: uses second person 'your' but this is possessive rather than instructional 'You can use this', so the penalty is marginal.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: 'extract and consolidate reusable components', 'design tokens', 'patterns', 'identifies opportunities for systematic reuse', and 'enriches your component library'. These are concrete, actionable capabilities. | 3 / 3 |
Completeness | Clearly answers both 'what' (extract/consolidate reusable components, design tokens, patterns; identify reuse opportunities; enrich component library) and 'when' with an explicit 'Use when...' clause listing four specific trigger scenarios. | 3 / 3 |
Trigger Term Quality | Includes strong natural keywords users would say: 'create components', 'refactor repeated UI patterns', 'build a design system', 'extract tokens', 'component library', 'design tokens'. These cover common variations of how users would phrase such requests. | 3 / 3 |
Distinctiveness Conflict Risk | While 'design system' and 'design tokens' are fairly specific, terms like 'reusable components' and 'UI patterns' could overlap with general UI development or component creation skills. The description carves out a niche but could still conflict with broader frontend or UI skills. | 2 / 3 |
Total | 11 / 12 Passed |
Implementation
50%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This skill provides a well-structured high-level workflow for design system extraction but remains at the level of abstract guidance rather than concrete, executable instructions. It lacks code examples, specific commands, and detailed validation steps that would make it truly actionable. The content could be more concise by trimming explanations of concepts Claude already understands and more actionable by including example token files, component templates, and specific search/replace patterns.
Suggestions
Add concrete code examples: show an example token file structure (e.g., CSS custom properties or a JSON token schema), an example extracted component with props API, and specific grep/search commands for finding patterns.
Add explicit validation checkpoints in the Migrate section: e.g., 'Run the build to verify no import errors', 'Visually compare before/after screenshots', 'Run existing tests to confirm functional parity' before deleting old code.
Trim explanatory content Claude already knows (e.g., what ARIA is, what buttons/cards/inputs are) and replace with specific, actionable patterns or templates.
Consider splitting detailed guidance (accessibility checklist, token naming conventions, component API patterns) into referenced sub-documents to keep the main skill lean.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The content is reasonably structured but includes some unnecessary elaboration that Claude would already know (e.g., explaining what design tokens are, listing obvious examples like 'buttons, cards, inputs'). The closing aphorism ('A good design system is a living system...') adds no actionable value. Some sections could be tightened. | 2 / 3 |
Actionability | The skill provides structured guidance and clear categories of what to look for, but lacks concrete executable examples—no code snippets for token extraction, no example component structure, no specific grep commands, no example of a well-structured token file. It describes rather than demonstrates. | 2 / 3 |
Workflow Clarity | The multi-step workflow (Discover → Plan → Extract → Migrate → Document) is clearly sequenced, but validation checkpoints are weak. The 'Test thoroughly' step in Migrate is vague with no specific validation approach. For a destructive operation like replacing existing implementations, there should be explicit verification steps (e.g., visual regression, build checks) before deleting dead code. | 2 / 3 |
Progressive Disclosure | The content is organized into clear sections with good headers, but it's a monolithic document with no references to external files for detailed guidance (e.g., token naming conventions, component API patterns, accessibility checklists). Some sections like the NEVER list and token naming could be split into reference documents. | 2 / 3 |
Total | 8 / 12 Passed |
Validation
90%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 10 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
frontmatter_unknown_keys | Unknown frontmatter key(s) found; consider removing or moving to metadata | Warning |
Total | 10 / 11 Passed | |
- Repository
- pbakaus/impeccable
- Commit
3a4fc70
- 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.