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.

52

Quality

58%

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 ./plugins/AI-Agents-Safe-Coding-Skills-claude/skills/core-components/SKILL.md

The canonical home for this skill is core-components in administrakt0r/AI-Agents-Safe-Coding-Skills

SKILL.md
Quality
Evals
Security

Quality

Content

63%Scale 1-5

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 component library reference skill with good concrete examples and clear token tables, but it suffers from being monolithic—all content is inlined when token references and component APIs could be split out. Some sections contain minor redundancy (anti-patterns repeating earlier examples) and filler text (trivial descriptions, meaningless 'When to Use' section). The actionability is strong with executable TSX examples covering common use cases.

Suggestions

Split token reference tables (spacing, color, typography) into a separate TOKENS.md file and component details into a COMPONENTS.md file, keeping SKILL.md as a concise overview with links.

Remove the 'When to Use' section (it says nothing) and trim component descriptions that state the obvious (e.g., 'Typography with token support').

Define or reference the `variantStyles` object used in the Component Props Pattern example to make it fully executable.

Consolidate the anti-patterns section with the inline correct/wrong examples shown earlier to reduce redundancy.

DimensionReasoningScore

Conciseness

The content is mostly efficient with good use of tables and code examples, but there's some redundancy (e.g., the anti-patterns section repeats what was already shown in correct/wrong examples earlier). The 'When to Use' section is a meaningless tautology. Some component descriptions like 'Base layout component with token support' and 'Typography with token support' are unnecessary filler Claude doesn't need.

3 / 5

Actionability

The skill provides concrete, copy-paste ready TSX code examples for each component, clear token reference tables, and specific anti-patterns. Minor gaps include missing import paths (only one example shows the import), and the `variantStyles` object in the Component Props Pattern is referenced but never defined.

4 / 5

Workflow Clarity

As a reference/component library skill rather than a multi-step workflow, the content is well-organized with clear sections progressing from tokens to components to layout patterns to anti-patterns. The sequencing is logical. No destructive or batch operations are involved, so validation checkpoints aren't required. Minor gap: no guidance on when to choose between layout patterns.

4 / 5

Progressive Disclosure

The content is fairly long (~200 lines) and entirely inlined with no supporting bundle files. The token reference tables, layout patterns, and component API details could benefit from being split into separate reference files. The 'Integration with Other Skills' section references other skills but provides no actionable links or details about what those integrations look like.

3 / 5

Total

14

/

20

Passed

Description

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

The description establishes a clear domain (design system/component library) and includes a 'Use when' clause, which is good. However, it lacks concrete actions describing what the skill actually does and misses natural trigger terms users might use. The vague 'what' portion significantly limits its usefulness for skill selection among many options.

Suggestions

Add specific concrete actions such as 'Provides component usage examples, applies design tokens for spacing/color/typography, and scaffolds UI layouts using the design system.'

Expand trigger terms to include natural user phrases and synonyms like 'buttons', 'forms', 'theme', 'styling', 'colors', 'typography', 'spacing', or specific component names.

Make the 'when' clause more specific, e.g., 'Use when the user asks about available components, needs to apply brand colors or spacing, or references the design system by name.'

DimensionReasoningScore

Specificity

Names the domain ('component library', 'design system patterns') but provides no concrete actions. It doesn't specify what actions are performed—no verbs like 'create components', 'apply tokens', 'generate layouts', etc.

2 / 5

Completeness

Has both a 'what' ('Core component library and design system patterns') and a 'when' ('Use when building UI, using design tokens, or working with the component library'), though the 'what' is vague and the 'when' could be more specific with concrete trigger scenarios.

4 / 5

Trigger Term Quality

Includes some relevant keywords like 'UI', 'design tokens', 'component library', and 'design system patterns', but misses natural user phrases and synonyms such as 'button', 'form', 'theme', 'styling', 'components', specific framework names, or file types.

3 / 5

Distinctiveness Conflict Risk

Terms like 'UI', 'component library', and 'design system' are somewhat specific but could easily overlap with other skills related to frontend development, CSS styling, or specific UI frameworks.

3 / 5

Total

12

/

20

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.

Validation10 / 11 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

10

/

11

Passed

Repository
administrakt0r/AI-Agents-Safe-Coding-Skills
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.