CtrlK
BlogDocsLog inGet started
Tessl Logo

shadcn-ui

Project-aware shadcn/ui components, registry MCP, theming, and design-system lint feedback. Use when adding or changing React/Tailwind UI, a primitive, theme, registry, or component contract in an Agent-Native app.

66

Quality

83%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Low

Low-risk findings worth noting

SKILL.md
Quality
Evals
Security

Quality

Content

78%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 highly actionable, information-dense skill body: every section carries project-specific constraints and executable commands rather than generic explanations. The main weaknesses are a monolithic single-file structure with no progressive disclosure despite reference-catalog content, and the absence of an explicit failure-recovery loop in the lint/install workflows.

Suggestions

Move the reference-catalog sections (the shadcn/* lint rule definitions, component-composition checklist, forms/inputs guidance, and transitions policy) into one-level-deep files under references/ and link them with a short summary in SKILL.md.

Add an explicit feedback loop for the lint workflow (e.g. 'if findings persist after a fix, re-run and re-inspect the component contract before handing off') and for failed CLI installs.

Tighten the multi-paragraph prose in 'Design-System Lint Feedback' into the same bullet style used by the rule list to cut tokens without losing the workspace-specific caveats.

DimensionReasoningScore

Conciseness

The body is dense with project-specific rules Claude could not infer (the adapter-layer rule, Tabler-only icons, the Plan-template exclusion) and never explains basics like what Tailwind or a component registry is. Minor trimming is possible — the 'Design-System Lint Feedback' section uses multi-sentence prose paragraphs that could be tightened into bullets — so it fits anchor 4 rather than the every-token-earns-its-place level of anchor 5.

4 / 5

Actionability

Guidance is copy-paste executable throughout: exact commands ("pnpm dlx shadcn@latest info --json", "pnpm dlx shadcn@latest add <component> --dry-run", "--diff"), exact file paths ("app/design-system.ts", "app/components/ui/"), named class utilities ("size-*", "gap-*", "data-[state=open]:animate-in"), and concrete composition rules ("Avatar always needs AvatarFallback"). It is not anchor 4 because there are no material gaps — the common cases (add, update, style, animate, icons) all carry specific, executable direction.

5 / 5

Workflow Clarity

A clear numbered 'First Steps' sequence is followed by checkpoints throughout: inspect before overwriting (--dry-run/--diff), 'fix every shadcn/* finding before handing off', 'After adding registry code, read the generated files. Fix import aliases, icon imports, missing subcomponents', and 'inspect its root package.json and .oxlintrc.json' before claiming lint ran. It falls short of anchor 5 because no explicit failure-recovery loop is spelled out (e.g. what to do when lint findings persist or a CLI install fails), while clearly exceeding the implicit-checkpoint level of anchor 3.

4 / 5

Progressive Disclosure

The file has clear, well-ordered section headers and a 'Related Skills' pointer section, but it is a ~183-line single file with no references/, scripts/, or assets/ bundle. Reference-like catalogs (the five shadcn/* lint rules, the component-composition and forms bullet lists, the transitions policy) are inlined in SKILL.md where the rubric's good examples would split them into one-level-deep reference files. It is not anchor 2 because the structure is genuinely good and nothing is buried, but the split-out is clearly indicated.

3 / 5

Total

16

/

20

Passed

Description

83%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: it names a clear niche, enumerates four concrete capability areas, and includes an explicit 'Use when' clause with concrete trigger phrases. The only weakness is that capabilities are expressed as topic nouns rather than action verbs, and the broad React/Tailwind trigger slightly overlaps general frontend skills.

Suggestions

Rewrite the capability list with action verbs (e.g. "Adds and updates shadcn/ui components, installs registry items via the shadcn MCP, applies theme tokens, and fixes @shadcn/lint findings") to sharpen the 'what'.

Add one or two high-frequency user phrasings as triggers (e.g. "add a dialog/button", "shadcn component") to strengthen natural trigger coverage.

Narrow the broad "adding or changing React/Tailwind UI" trigger to component/primitive-level changes to reduce overlap with generic frontend styling skills.

DimensionReasoningScore

Specificity

The description lists several concrete capability areas — "shadcn/ui components, registry MCP, theming, and design-system lint feedback" — but presents them as topics rather than the concrete action verbs of the top anchor ("Extract text..., fill forms, merge documents"). It is not merely domain-naming (anchor 3) because four distinct capabilities plus a lint-feedback deliverable are covered, and only minor gaps remain.

4 / 5

Completeness

It explicitly answers both questions: the "what" ("Project-aware shadcn/ui components, registry MCP, theming, and design-system lint feedback") and the "when" via a concrete trigger clause ("Use when adding or changing React/Tailwind UI, a primitive, theme, registry, or component contract in an Agent-Native app"). This mirrors the anchor-5 example structure with concrete trigger phrases, so it is not the anchor-4 case of an only-weakly-specified 'when'.

5 / 5

Trigger Term Quality

Good natural keyword coverage: "React/Tailwind UI", "primitive", "theme", "registry", "component contract" are phrases users would plausibly say when needing this skill. A few natural variations are missing (e.g. "dialog", "button", "add a component"), so it falls just short of the comprehensive synonym/extension coverage of anchor 5 while clearly exceeding the generic one-or-two-keyword level of anchor 2.

4 / 5

Distinctiveness Conflict Risk

"shadcn/ui" is a clear, named niche with distinct triggers (registry, component contract, Agent-Native app), making confusion with unrelated skills unlikely. However, the broad trigger "adding or changing React/Tailwind UI" creates minor overlap risk with a general frontend-design or styling skill, keeping it just below the minimal-conflict anchor 5.

4 / 5

Total

17

/

20

Passed

Validation

81%

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

Validation — 13 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

metadata_field

'metadata' should map string keys to string values

Warning

frontmatter_unknown_keys

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

Warning

Total

13

/

16

Passed

Repository
BuilderIO/agent-native
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.