CtrlK
BlogDocsLog inGet started
Tessl Logo

tailwind-theme-builder

Set up Tailwind v4 + shadcn/ui themed UI with dark mode. Install deps, configure CSS variables via @theme inline, wire dark mode toggle, verify. Use whenever the user mentions Tailwind v4, setting up Tailwind theming, shadcn/ui colours, dark mode, or troubleshooting colours not working, tw-animate-css errors, @theme inline conflicts, @apply breaking after upgrade, or v3 → v4 migration issues.

73

Quality

92%

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

81%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 strong, highly actionable skill body: executable code throughout, a clearly sequenced workflow with real validation and diagnosis loops, and a sensible bundle split. The main cost is redundancy — the four-step architecture is explained three times and the ModeToggle is inlined — which pushes conciseness to the middle anchor.

Suggestions

Consolidate the triple explanation of the four-step pattern: keep the Step 3 code with its inline comments and let the gotcha details (#1-#5) reference it instead of re-showing WRONG/CORRECT CSS for the same rules.

Move the full ModeToggle component to assets/mode-toggle.tsx (matching theme-provider.tsx) and list tsconfig.app.json in the Asset Files section so every bundle file is discoverable.

Merge the overlapping Prevention Checklist and Dark Mode Testing Checklist items (theme persistence, contrast, light/dark/system testing appear in both) into a single verification checklist.

DimensionReasoningScore

Conciseness

The v4-specific material is genuinely non-obvious and earns its tokens, but the same rules are explained three times (architecture section, Step 3 inline comments, and gotchas #1-#5 WRONG/CORRECT blocks), the full ~30-line ModeToggle component is inlined instead of being an asset like theme-provider.tsx, and the Prevention and Dark Mode Testing checklists overlap. Mostly efficient but could be tightened — the 3 anchor, not 2 since the padding is redundancy rather than explaining concepts Claude already knows.

3 / 5

Actionability

Copy-paste-ready commands ('pnpm add tailwindcss @tailwindcss/vite', 'pnpm dlx shadcn@latest init'), complete executable CSS/TSX/JSON blocks, and a symptom-to-fix table covering all 18 common failure cases. Fully matches the 5 anchor; not 4 because even the small Step 3 placeholder ('... all semantic tokens') is backed by the complete assets/index.css.

5 / 5

Workflow Clarity

Steps 1-5 are clearly sequenced with explicit validation checkpoints (Prevention Checklist, Dark Mode Testing Checklist) and a genuine error-recovery feedback loop (the symptom → cause → fix diagnosis table plus per-gotcha WRONG/CORRECT corrections). Matches the 5 anchor's sequence + validation + feedback loop + checklist profile; not a destructive/batch operation, so no cap applies.

5 / 5

Progressive Disclosure

Bundle structure is good: SKILL.md stays instructional while assets/ holds complete files (index.css, theme-provider.tsx, components.json, vite.config.ts, utils.ts) and references/migration-guide.md is one level deep with a clear pointer section. Falls short of 5 because assets/tsconfig.app.json exists in the bundle but is unlisted in the Asset Files section, the inline ModeToggle component belongs in assets/, and the ~170-line gotcha-details section could be a separate troubleshooting reference.

4 / 5

Total

17

/

20

Passed

Description

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

An exemplary description: concrete actions with the exact technical mechanism, explicit 'Use whenever' triggers covering both setup requests and troubleshooting symptoms, and a clearly distinct niche. Every dimension lands on the top anchor.

DimensionReasoningScore

Specificity

Lists four concrete actions spanning the whole workflow ('Install deps, configure CSS variables via @theme inline, wire dark mode toggle, verify'), naming the exact v4 mechanism rather than generic steps. This matches the comprehensive-coverage anchor; not 4 because no meaningful workflow step is left unrepresented.

5 / 5

Completeness

Explicitly answers 'what' (set up themed Tailwind v4 + shadcn/ui UI with dark mode, with the concrete action list) and 'when' ('Use whenever the user mentions...') with concrete trigger phrases. This is a direct match for the 5 anchor's what+when structure; not 4 because the 'when' clause is fully explicit rather than improvable.

5 / 5

Trigger Term Quality

Covers both natural need-phrases ('setting up Tailwind theming', 'dark mode', 'shadcn/ui colours') and failure symptoms users actually type ('colours not working', '@apply breaking after upgrade', 'tw-animate-css errors', 'v3 → v4 migration issues'). Comprehensive synonym and symptom coverage matches the 5 anchor.

5 / 5

Distinctiveness Conflict Risk

Highly niche triggers (@theme inline conflicts, tw-animate-css errors, v3 → v4 migration) make wrong-skill activation unlikely; the only conceivable overlap is with a generic dark-mode skill, which the Tailwind v4 framing disambiguates. Matches the clear-niche 5 anchor; not 4 since conflict risk is minimal.

5 / 5

Total

20

/

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