tailwind-theme-builder
Set up Tailwind v4 with shadcn/ui themed UI. Workflow: install dependencies, configure CSS variables with @theme inline, set up dark mode, verify. Use when initialising React projects with Tailwind v4, setting up shadcn/ui theming, or fixing colors not working, tw-animate-css errors, @theme inline dark mode conflicts, @apply breaking, v3 migration issues.
90
88%
Does it follow best practices?
Impact
—
No eval scenarios have been run
Passed
No known issues
Quality
Discovery
100%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This is an excellent skill description that clearly defines its scope (Tailwind v4 + shadcn/ui setup), lists concrete workflow steps, and provides comprehensive trigger terms covering both proactive setup scenarios and reactive troubleshooting scenarios. The explicit 'Use when...' clause with specific error patterns makes it highly actionable for skill selection. The description uses proper third-person voice throughout.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: install dependencies, configure CSS variables with @theme inline, set up dark mode, verify. Also mentions specific technical details like shadcn/ui and Tailwind v4. | 3 / 3 |
Completeness | Clearly answers both 'what' (set up Tailwind v4 with shadcn/ui themed UI, install dependencies, configure CSS variables, set up dark mode) and 'when' with an explicit 'Use when...' clause covering initialization, theming setup, and multiple specific error scenarios. | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural trigger terms users would actually say: 'Tailwind v4', 'shadcn/ui', 'dark mode', 'colors not working', 'tw-animate-css errors', '@theme inline', '@apply breaking', 'v3 migration issues'. These are highly specific terms a developer would use when encountering these exact problems. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive with a very clear niche: Tailwind v4 + shadcn/ui specifically. The combination of framework version, UI library, and specific error patterns (tw-animate-css, @theme inline, @apply breaking) makes it extremely unlikely to conflict with other skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
77%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a strong, highly actionable skill that provides concrete, executable guidance for a genuinely tricky setup process (Tailwind v4 + shadcn/ui). Its main weakness is length — the 18 gotchas section with full code examples is valuable but makes the file quite long, and several gotchas repeat information already covered in the workflow steps. The workflow is well-sequenced with good validation checklists.
Suggestions
Move the detailed gotcha code examples to a separate file (e.g., references/gotchas.md) and keep only the quick diagnosis table in SKILL.md to improve conciseness and progressive disclosure.
Remove redundancy between Step 3's CSS architecture explanation and gotchas #1-#5 which cover the same wrong/correct patterns.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is quite long (~300+ lines) with some redundancy between the workflow steps and the gotcha details (e.g., gotchas #1-#5 largely repeat what was already covered in Step 3). The architecture explanation and best practices section add moderate value but could be tighter. However, most content is domain-specific knowledge Claude wouldn't inherently know about Tailwind v4's breaking changes. | 2 / 3 |
Actionability | Excellent actionability throughout — executable bash commands, complete TypeScript/CSS code blocks, specific JSON configurations, and concrete wrong/correct code comparisons. The workflow steps are copy-paste ready with real package names and file paths. | 3 / 3 |
Workflow Clarity | Clear 5-step sequential workflow with explicit ordering requirements ('This exact order is required'). Includes validation checklists (Prevention Checklist, Dark Mode Testing Checklist), specific verification steps, and the gotcha table serves as a diagnostic feedback loop for error recovery. | 3 / 3 |
Progressive Disclosure | References asset files and a migration guide appropriately, but the gotcha section is very long inline content (18 items with code examples) that could benefit from being in a separate reference file. The quick diagnosis table is good progressive disclosure, but then all details follow immediately rather than being linked out. No bundle files were provided to verify referenced paths. | 2 / 3 |
Total | 10 / 12 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 — 11 / 11 Passed
Validation for skill structure
No warnings or errors.
- Repository
- jezweb/claude-skills
- Commit
6fec62b
- 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.