CtrlK
BlogDocsLog inGet started
Tessl Logo

core-components

Core component library and design system patterns. Use when building UI, using design tokens, or working with the component library.

67

Quality

80%

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

Fix and improve this skill with Tessl

tessl review fix ./.claude/skills/core-components/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

92%Weight 40%Scale 1-3

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

The content is highly actionable and token-efficient, with concrete code and exact reference tables; its only weakness is monolithic structure with no progressive disclosure into separate reference files.

Suggestions

Move the full token-value tables and/or per-component prop references into a references/ file (e.g. TOKENS.md) and link to it, keeping SKILL.md a lean overview.

Trim the Anti-Patterns section, which repeats the per-token WRONG/CORRECT examples already shown above.

Verify the integration references (react-ui-patterns, storybook) point to real skills, and consider linking to a bundled components reference if one exists.

DimensionReasoningScore

Conciseness

The body is value-dense reference material — exact token-value tables and executable TSX snippets with minimal prose — and assumes Claude's competence; the only mild redundancy is the Anti-Patterns section echoing the per-token WRONG/CORRECT blocks, not enough to drop it below the lean-and-efficient anchor.

3 / 3

Actionability

Copy-paste-ready TSX examples for every component, exact px-value token tables, and concrete prop interfaces give fully executable, specific guidance.

3 / 3

Workflow Clarity

This is a single-purpose reference/catalog skill with an unambiguous directive ('use core components and tokens, never hard-code values') and well-organized sections; no multi-step or destructive workflow exists, so the simple-skill allowance applies.

3 / 3

Progressive Disclosure

All content lives in one ~150-line SKILL.md with no references/, scripts/, or assets/ files, so nothing is split out; the under-50-lines exemption does not apply, but the sections and tables are well organized enough to avoid the monolithic-wall anchor.

2 / 3

Total

11

/

12

Passed

Description

67%Weight 40%Scale 1-3

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 is clear and includes an explicit 'Use when' trigger, but its capability list is generic rather than concrete and its triggers are narrow, leaving moderate overlap risk with other UI skills.

Suggestions

Replace generic activities with concrete actions, e.g. 'Apply design tokens for spacing, color, and typography; compose Box/HStack/VStack layouts; build forms with Input/Button/Card.'

Add natural trigger variations users actually say, such as 'spacing scale', 'brand colors', 'theme', or 'styling'.

Sharpen the 'Use when' clause to distinguish from general UI skills, e.g. 'Use when applying the team design system or hard-coded values need to be replaced with tokens.'

DimensionReasoningScore

Specificity

Quotes 'Core component library and design system patterns' and 'building UI, using design tokens, or working with the component library' — it names the domain and some actions, but these are generic activities rather than the comprehensive concrete actions (e.g. 'apply spacing/color tokens', 'compose Box/HStack') that would warrant a 3.

2 / 3

Completeness

It states what the skill covers ('Core component library and design system patterns') and provides an explicit 'Use when building UI, using design tokens, or working with the component library' trigger, satisfying both what and when.

3 / 3

Trigger Term Quality

Terms 'UI', 'design tokens', and 'component library' are relevant and natural, but coverage is narrow and lacks common variations a user might say ('spacing scale', 'brand colors', 'styling', 'theme').

2 / 3

Distinctiveness Conflict Risk

'Design tokens' and 'component library' are reasonably niche, but the trigger 'building UI' is generic and would overlap with general UI/react pattern skills.

2 / 3

Total

9

/

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.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
ChrisWiles/claude-code-showcase
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.