CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

shadcn-ui

Install and configure shadcn/ui components for React projects. Guides component selection, installation order, dependency management, customisation with semantic tokens, and common UI recipes (forms, data tables, navigation, modals). Use after tailwind-theme-builder has set up the theme infrastructure, when adding components, building forms, creating data tables, or setting up navigation.

Quality

91%

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

SKILL.md
Quality
Evals
Security

Quality

Content

86%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, highly actionable skill body: executable commands and corrected-code gotchas, a clear sequenced workflow, and clean offloading of catalogue and recipe detail to one-level-deep reference files. The only improvements are minor: redundant dependency listings and implicit post-install verification.

Suggestions

Drop the External Dependencies table (or the inline '# needs:' comments) — the same dependency information is stated twice within the Installation Order section.

Add a brief verification step after installation (e.g. confirm components landed in src/components/ui/ and imports resolve) to close the workflow's only validation gap.

Merge Workflow Step 2 into the Installation Order section or replace it with a pointer, since it currently restates the section above it.

DimensionReasoningScore

Conciseness

The body is dense and assumes Claude's competence — no explanation of what shadcn/ui or React is — but the External Dependencies table duplicates the inline "# needs:" comments and Workflow Step 2 restates the Installation Order section, so a little redundancy could be trimmed. This fits 'efficient; minor instances that could be trimmed' better than anchor 5's 'every token earns its place'.

4 / 5

Actionability

Fully executable throughout: copy-paste install commands ("pnpm dlx shadcn@latest add button"), complete working fixes for each gotcha (sentinel "__any__" SelectItem value, explicit ICON_MAP, "sm:max-w-6xl" breakpoint match, explicit RHF field props), a needs-to-components mapping table, and pointers to complete recipe files. This matches the copy-paste-ready anchor covering the common cases.

5 / 5

Workflow Clarity

A clear four-step sequence (Assess Needs → Install → Build Recipes → Customise) with dependency ordering and an upfront prerequisite checkpoint ("Theme infrastructure must exist… Use tailwind-theme-builder first if not set up"). Post-install verification is only implicit, fitting 'clear sequence with most checkpoints present; minor validation gaps'; the destructive/batch cap does not apply since component installation is non-destructive and failures surface immediately in the CLI.

4 / 5

Progressive Disclosure

The body stays an overview and pushes detail into two real, one-level-deep reference files (references/component-catalogue.md, references/recipes.md — both verified to exist), clearly signaled in a 'When / Read' table and in Workflow Step 3. The split (catalogue vs. recipes) is appropriate and navigation is easy, matching the well-signaled one-level-deep anchor.

5 / 5

Total

18

/

20

Passed

Description

92%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 in the mold of the good overall examples: concrete capability list, explicit 'Use when…' trigger clause with natural user phrases, and clear sequencing relative to the prerequisite skill. The only weakness is keyword coverage that omits a few common synonyms for the recipes it names.

DimensionReasoningScore

Specificity

The description lists multiple concrete actions — "Install and configure shadcn/ui components", "component selection, installation order, dependency management, customisation with semantic tokens, and common UI recipes (forms, data tables, navigation, modals)" — with comprehensive coverage of the skill's domain, matching the anchor for multiple specific concrete actions rather than the minor-gaps anchor below it.

5 / 5

Completeness

Both questions are explicitly answered: what ("Install and configure shadcn/ui components for React projects. Guides component selection, installation order, dependency management, customisation with semantic tokens, and common UI recipes") and when ("Use after tailwind-theme-builder has set up the theme infrastructure, when adding components, building forms, creating data tables, or setting up navigation") with concrete trigger phrases.

5 / 5

Trigger Term Quality

"when adding components, building forms, creating data tables, or setting up navigation" are natural phrases users would say, plus "shadcn/ui" and "React" domain terms; a few natural synonyms (e.g. dialog, dropdown, toast, component library) are missing, so it fits 'good keyword coverage; a few natural terms missing' rather than the comprehensive-synonyms anchor.

4 / 5

Distinctiveness Conflict Risk

"shadcn/ui components for React projects" carves a clear niche, and explicit sequencing ("Use after tailwind-theme-builder has set up the theme infrastructure") plus pattern-specific triggers (forms, data tables, navigation) minimize conflict with adjacent skills.

5 / 5

Total

19

/

20

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

Validation for skill structure

No warnings or errors.

Repository

jezweb/claude-skills

Path

plugins/frontend/skills/shadcn-ui/SKILL.md

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.