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.
72
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 theming with dark mode), lists concrete actions, and provides comprehensive trigger terms covering both setup and troubleshooting scenarios. The explicit 'Use whenever...' clause with specific error patterns and migration scenarios makes it highly actionable for skill selection. The description uses proper third-person voice and is concise yet thorough.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: 'Install deps, configure CSS variables via @theme inline, wire dark mode toggle, verify.' Also mentions troubleshooting specific issues like 'tw-animate-css errors, @apply breaking after upgrade.' | 3 / 3 |
Completeness | Clearly answers both 'what' (set up Tailwind v4 + shadcn/ui themed UI with dark mode, install deps, configure CSS variables, wire dark mode toggle) and 'when' with an explicit 'Use whenever...' clause listing multiple trigger scenarios. | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural terms users would say: 'Tailwind v4', 'shadcn/ui', 'dark mode', 'colours not working', 'tw-animate-css errors', '@theme inline conflicts', '@apply breaking after upgrade', 'v3 → v4 migration issues'. These are highly specific and match real user language. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive niche targeting Tailwind v4 + shadcn/ui specifically, with very specific trigger terms like '@theme inline conflicts', 'tw-animate-css errors', and 'v3 → v4 migration'. Unlikely to conflict with generic CSS or UI 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 with excellent workflow clarity and concrete, executable guidance throughout. Its main weakness is length — the inline expansion of all 18 gotchas with code examples makes the file quite long when the summary table already provides quick diagnosis. The content would benefit from moving detailed gotcha examples to a separate reference file to improve progressive disclosure and reduce token cost.
Suggestions
Move the 'Gotcha Details with Code Examples' section to a separate file (e.g., references/gotchas.md) and keep only the quick diagnosis table in SKILL.md, reducing the main file by ~40%.
Remove tangential gotchas that aren't specific to Tailwind v4 theming (e.g., #12 Radix Select empty value) to improve conciseness and focus.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is quite long (~300+ lines) with some redundancy between the gotcha table, gotcha details, and critical rules sections. The architecture explanation and best practices section add value but could be tighter. Some gotchas (like #12 Radix Select) feel tangential to the core skill. However, most content is genuinely useful and not explaining things Claude already knows. | 2 / 3 |
Actionability | Excellent actionability throughout — executable bash commands, complete TypeScript/CSS code blocks, specific package versions, concrete JSON configs, and clear wrong/correct code comparisons. The workflow steps are copy-paste ready and the gotcha fixes provide exact code to use. | 3 / 3 |
Workflow Clarity | The 5-step workflow is clearly sequenced with explicit ordering requirements ('This exact order is required'). Includes a prevention checklist and dark mode testing checklist as validation checkpoints. The architecture diagram shows the data flow clearly. The gotcha table serves as a diagnostic/verification tool for error recovery. | 3 / 3 |
Progressive Disclosure | The skill references asset files and a migration guide in a references directory, which is good structure. However, the gotcha details section is very long and could be split into a separate reference file — the quick diagnosis table provides the overview, but then all 18 gotchas are expanded inline. The skill would benefit from moving detailed gotcha code examples to a separate file while keeping the summary table. | 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
eb374ac
- 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.