CtrlK
BlogDocsLog inGet started
Tessl Logo

shadcn-ui

Provides complete shadcn/ui component library patterns including installation, configuration, and implementation of accessible React components. Use when setting up shadcn/ui, installing components, building forms with React Hook Form and Zod, customizing themes with Tailwind CSS, or implementing UI patterns like buttons, dialogs, dropdowns, tables, and complex form layouts.

61

Quality

73%

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/shadcn-ui/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

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

The body delivers excellent executable code and commands, but it is a monolithic ~1,650-line document with duplicated sections and inlined boilerplate while its own reference bundle goes entirely unlinked. Setup workflows are sequenced but lack any validation or verification checkpoints.

Suggestions

Cut the body to a lean overview (Quick Start, component index, pointers to details) and move the full component examples, tailwind/tsconfig/CSS-variable boilerplate into the existing references/ files, linking them explicitly from SKILL.md — this fixes both the verbosity and the orphaned bundle.

Deduplicate the repeated content: the CSS-variables block (Project Configuration vs Customization), the two login-form examples, and the two profile-form examples should each appear once.

Add concrete validation checkpoints to the workflows, e.g., after `npx shadcn@latest init` verify components.json exists, and replace "Test Accessibility: Verify ARIA attributes and keyboard navigation" with a specific check (axe scan or keyboard tab-through of dialog focus trap).

DimensionReasoningScore

Conciseness

At ~1,650 lines the body is heavily padded: the full Tailwind config, tsconfig, and CSS-variable blocks are inlined even though `npx shadcn@latest init` generates them; the CSS variables section appears twice ("Project Configuration" and again in "Customization"); the login/profile form examples are each shown twice; and "What is shadcn/ui?" re-explains material Claude already knows. This is noticeably verbose with several padded, duplicated sections rather than the severe-concept-explanation extreme of score 1.

2 / 5

Actionability

Guidance is fully executable throughout: exact CLI commands (`npx shadcn@latest init`, `npx shadcn@latest add button input form card dialog select`), copy-paste-ready TSX for forms, dialogs, sheets, selects, tables, toasts, and Next.js route handlers with Zod validation. A few snippets omit imports (e.g., `Icon`, `Textarea`, `Checkbox`) but common cases are comprehensively covered.

5 / 5

Workflow Clarity

The Instructions section gives a rough sequence (initialize → install → configure theme → import → customize → add validation → test accessibility) and Quick Start gives per-scenario command sequences, but there are no validation checkpoints or feedback loops — "Test Accessibility: Verify ARIA attributes and keyboard navigation" states a step with no command or verification method, and setup ordering is scattered across four overlapping sections (Instructions, Quick Start, Installation & Setup).

3 / 5

Progressive Disclosure

Four large reference files exist in the bundle (~106KB: learn.md, reference.md, ui-reference.md, official-ui-reference.md) but SKILL.md never links to any of them — the only "References" section lists external URLs. Meanwhile content that clearly belongs in those files (full component API examples, config boilerplate) is inlined, matching the anchor where reference-suitable content is inlined and actual references are buried/unreachable.

2 / 5

Total

12

/

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: third-person voice, explicit what-and-when structure, concrete capabilities, and natural trigger phrases tightly scoped to the shadcn/ui ecosystem. Only minor room to improve by adding a few more user-said synonyms (e.g., "modal", plain "shadcn") and dropping the mild over-claim "complete".

DimensionReasoningScore

Specificity

The description lists multiple concrete actions — "installation, configuration, and implementation of accessible React components", "building forms with React Hook Form and Zod", "customizing themes with Tailwind CSS" — with named components (buttons, dialogs, dropdowns, tables). This matches the comprehensive-coverage anchor; the only minor blemish is the mild over-claim "complete", which is not vague enough to drop it to 4.

5 / 5

Completeness

It explicitly answers both questions: what ("Provides complete shadcn/ui component library patterns including installation, configuration, and implementation of accessible React components") and when ("Use when setting up shadcn/ui, installing components, building forms..., customizing themes...") with concrete trigger phrases — the exact structure of the 5-anchor example.

5 / 5

Trigger Term Quality

Strong natural keyword coverage: "shadcn/ui", "installing components", "React Hook Form", "Zod", "Tailwind CSS", "dialogs", "dropdowns", "tables", "form layouts". A few common variations users would say are missing (e.g., plain "shadcn", "modal", "popover"), placing it just below the comprehensive-synonyms anchor.

4 / 5

Distinctiveness Conflict Risk

The niche is unambiguous — shadcn/ui with its named toolchain (React Hook Form, Zod, Tailwind CSS, Radix-style components) — so triggers like "building forms with React Hook Form and Zod" or "setting up shadcn/ui" would not fire a generic React or styling skill.

5 / 5

Total

19

/

20

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

skill_md_line_count

SKILL.md is long (1659 lines); consider splitting into references/ and linking

Warning

Total

15

/

16

Passed

Repository
shep-ai/shep
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.