CtrlK
BlogDocsLog inGet started
Tessl Logo

shadcn-ui

Guide for implementing shadcn/ui - a collection of beautifully-designed, accessible UI components built with Radix UI and Tailwind CSS. Use when building user interfaces, adding UI components, or implementing design systems in React-based applications.

65

Quality

79%

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

71%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 content is highly actionable with comprehensive executable examples, but its monolithic ~1050-line structure with no bundle files and some redundancy hurts conciseness and progressive disclosure. Workflow sequences are clear but lack embedded validation checkpoints.

Suggestions

Split bulk reference material (per-component examples, full theming/CSS-variable tables, advanced patterns) into separate reference files under references/ and signal them from SKILL.md with one-level-deep links to improve progressive disclosure.

Remove duplicated and padded sections—e.g., the Skeleton example appears twice (lines ~518 and ~907), the Best Practices list restates what the code already shows, and Framework-Specific Setup adds only one-liners—to tighten conciseness.

Add explicit validation checkpoints to the setup and dark-mode workflows (e.g., 'verify the component renders', 'confirm theme toggles without hydration errors') with a fix-and-retry loop before proceeding.

DimensionReasoningScore

Conciseness

At ~1050 lines the body is mostly efficient executable code, but includes redundant or padded sections (repeated Skeleton example, restated Best Practices list, one-line Framework-Specific bullets, conceptual Key Principles) that could be trimmed.

3 / 5

Actionability

Fully executable, copy-paste-ready TSX/bash/json blocks cover installation, ~20 components, forms with validation, theming, and advanced patterns across the common cases.

5 / 5

Workflow Clarity

Setup, component-adding, and dark-mode flows are clearly numbered with an implementation checklist and troubleshooting section, but lack explicit validate→fix→retry checkpoints embedded in the main workflows.

4 / 5

Progressive Disclosure

A monolithic single file with no bundle files inlines ~20 component references, full theming docs, and advanced patterns; the only pointer is a bare URL rather than well-signaled one-level-deep reference files, though section headers do organize it.

3 / 5

Total

15

/

20

Passed

Description

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

The description is strong: third-person voice, concrete actions, and an explicit 'Use when' clause answering both what and when. Minor gaps in trigger-term synonyms and action coverage keep specificity and trigger quality at 4 rather than 5.

DimensionReasoningScore

Specificity

Names the domain (shadcn/ui, Radix UI, Tailwind CSS) and lists several specific actions—'implementing', 'building user interfaces', 'adding UI components', 'implementing design systems'—with minor coverage gaps (forms, theming, data tables not mentioned).

4 / 5

Completeness

Explicitly answers both what ('Guide for implementing shadcn/ui... accessible UI components built with Radix UI and Tailwind CSS') and when ('Use when building user interfaces, adding UI components, or implementing design systems in React-based applications') with concrete trigger phrases.

5 / 5

Trigger Term Quality

Good natural-term coverage ('building user interfaces', 'adding UI components', 'design systems', 'React-based applications') but misses common synonyms and file/tool tokens like 'shadcn' alone or 'Tailwind'.

4 / 5

Distinctiveness Conflict Risk

Anchored to a uniquely named tool with a specific stack (Radix UI + Tailwind + React), giving it a clear niche with distinct triggers and minimal overlap risk with generic UI skills.

5 / 5

Total

18

/

20

Passed

Validation

87%

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

Validation14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

skill_md_line_count

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

Warning

frontmatter_unknown_keys

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

Warning

Total

14

/

16

Passed

Repository
einverne/dotfiles
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.