tailwind-v4-shadcn

Set up Tailwind v4 with shadcn/ui using @theme inline pattern and CSS variable architecture. Four-step pattern: CSS variables, Tailwind mapping, base styles, automatic dark mode. Prevents 8 documented errors. Use when initializing React projects with Tailwind v4, or fixing colors not working, tw-animate-css errors, @theme inline dark mode conflicts, @apply breaking, v3 migration issues.

Install with Tessl CLI

npx tessl i github:jezweb/claude-skills --skill tailwind-v4-shadcn

What are skills?

Overall
score

90%

Review — 92%

Does it follow best practices?

Validation — 12 / 16 Passed

Validation for skill structure

SKILL.md

Review

Evals

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 a specific technical niche (Tailwind v4 + shadcn/ui setup). It uses third person voice, provides concrete actions, and includes comprehensive trigger terms covering both setup scenarios and common error conditions users would search for. The explicit 'Use when...' clause with multiple specific triggers makes skill selection unambiguous.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete actions: 'Set up Tailwind v4 with shadcn/ui', '@theme inline pattern', 'CSS variable architecture', and specifies a 'Four-step pattern' with named components. Also mentions preventing '8 documented errors'.	3 / 3
Completeness	Clearly answers both what (set up Tailwind v4 with shadcn/ui using specific patterns) AND when (explicit 'Use when...' clause covering initialization and six specific error scenarios).	3 / 3
Trigger Term Quality	Excellent coverage of natural terms users would say: 'Tailwind v4', 'shadcn/ui', 'React projects', 'colors not working', 'tw-animate-css errors', '@theme inline', 'dark mode conflicts', '@apply breaking', 'v3 migration'. These are specific error messages and technologies users would naturally mention.	3 / 3
Distinctiveness Conflict Risk	Highly distinctive with specific technology combination (Tailwind v4 + shadcn/ui), version-specific triggers, and named error patterns. Unlikely to conflict with general CSS or React skills due to precise terminology.	3 / 3
	Total	12 / 12 Passed

Implementation

85%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

This is a high-quality, production-tested skill with excellent actionability and workflow clarity. The four-step architecture is well-documented with clear validation steps, and the error catalog is comprehensive with specific solutions. The main weakness is moderate verbosity - some sections could be tightened without losing clarity, particularly the migration gotchas and explanatory 'Why It Happens' blocks.

Suggestions

Condense 'Why It Happens' explanations into single sentences - Claude can infer technical details from the cause/solution pattern

Move the OKLCH color space section and detailed migration gotchas to reference/migration-guide.md, keeping only a brief mention with link in the main skill

Dimension	Reasoning	Score
Conciseness	The skill is comprehensive but includes some redundancy (e.g., repeating 'Critical' warnings, restating the same concepts in multiple sections). The OKLCH section and migration gotchas add valuable context but could be more condensed. Some explanations like 'Why It Happens' sections are helpful but add length.	2 / 3
Actionability	Excellent executable guidance throughout - complete bash commands, copy-paste ready code blocks, specific file paths, and concrete examples. The Quick Start section and error solutions provide immediately usable code.	3 / 3
Workflow Clarity	The 'Four-Step Architecture (MANDATORY)' section provides crystal-clear sequencing with explicit validation. The setup checklist at the end serves as a verification checkpoint. Error solutions include clear cause-fix patterns.	3 / 3
Progressive Disclosure	Well-structured with clear navigation - Quick Start for immediate use, detailed sections for specific needs, and explicit references to templates/ and reference/ directories for deeper content. The Quick Reference table provides efficient lookup.	3 / 3
	Total	11 / 12 Passed

Validation

75%

Warnings & errors only

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

Validation — 12 / 16 Passed

Validation for skill structure

Criteria	Description	Result
skill_md_line_count	SKILL.md is long (666 lines); consider splitting into references/ and linking	Warning
metadata_version	'metadata' field is not a dictionary	Warning
license_field	'license' field is missing	Warning
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	12 / 16 Passed

Reviewed: about 1 month ago

Table of Contents

Discovery Implementation Validation

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.