CtrlK
BlogDocsLog inGet started
Tessl Logo

tailwind-v4-shadcn

| Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React. Use when: initializing React projects with Tailwind v4, setting up shadcn/ui, implementing dark mode, debugging CSS variable issues, fixing theme switching, migrating from Tailwind v3, or encountering color/theming problems. Covers: @theme inline pattern, CSS variable architecture, dark mode with ThemeProvider, component composition, vite.config setup, common v4 gotchas, and production-tested patterns.

65

Quality

81%

Does it follow best practices?

Impact

No eval scenarios have been run

SecuritybySnyk

Passed

No known issues

SKILL.md
Quality
Evals
Security

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 hits all the marks. It provides specific concrete capabilities, includes a comprehensive 'Use when:' clause with natural trigger terms developers would actually search for, and occupies a clearly distinct niche around Tailwind CSS v4 with shadcn/ui. The description is well-structured with both trigger scenarios and coverage areas, making it easy for Claude to select appropriately.

DimensionReasoningScore

Specificity

Lists multiple specific concrete actions and topics: initializing React projects with Tailwind v4, setting up shadcn/ui, implementing dark mode, debugging CSS variable issues, fixing theme switching, migrating from Tailwind v3, @theme inline pattern, CSS variable architecture, ThemeProvider, vite.config setup, and common v4 gotchas.

3 / 3

Completeness

Clearly answers both 'what' (production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React, covering specific patterns and architecture) and 'when' (explicit 'Use when:' clause listing seven distinct trigger scenarios including initializing projects, debugging, fixing, and migrating).

3 / 3

Trigger Term Quality

Excellent coverage of natural terms users would say: 'Tailwind CSS v4', 'shadcn/ui', 'Vite', 'React', 'dark mode', 'CSS variable', 'theme switching', 'migrating from Tailwind v3', 'color/theming problems', 'ThemeProvider', 'vite.config'. These are all terms a developer would naturally use when encountering these issues.

3 / 3

Distinctiveness Conflict Risk

Highly distinctive with a clear niche: the specific combination of Tailwind CSS v4, shadcn/ui, Vite, and React is very targeted. The mention of v4-specific concerns like migration from v3, @theme inline pattern, and v4 gotchas further narrows the scope and reduces conflict risk with generic CSS or React skills.

3 / 3

Total

12

/

12

Passed

Implementation

62%

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

The skill provides excellent actionable guidance with clear, executable code examples and a well-structured workflow for setting up Tailwind v4 + shadcn/ui. However, it is significantly bloated with redundant content (rules repeated 3-4 times across sections), unnecessary meta-instructions about how to activate the skill, marketing-style comparisons, and sections that should be in reference files. Trimming the verbose preamble, deduplicating repeated rules, and moving secondary content (dependencies, secure installation, production example) to reference files would dramatically improve token efficiency.

Suggestions

Remove or drastically shorten the 'Before You Start' section — the skill activation instructions, token usage comparisons, and 'Known Issues This Skill Prevents' list are meta-content that wastes tokens and duplicates information covered in the actual guide.

Deduplicate repeated rules: 'delete tailwind.config.ts', 'set config to empty string', and 'don't double-wrap hsl()' each appear 3-4 times across Quick Start, Four-Step Architecture, Critical Rules, and Setup Checklist. State each rule once in the most relevant section.

Move the Dependencies section, Secure Installation section, and Production Example to reference files — these are not needed during the primary setup workflow and add ~80 lines of low-priority content.

Move the 'When to Load References' section content into the reference files themselves or into a brief inline note next to each reference link — the current format is excessively detailed for routing guidance Claude can infer from context.

DimensionReasoningScore

Conciseness

Extremely verbose. The 'Before You Start' section wastes tokens explaining how to prompt Claude, includes marketing-style comparisons (with/without skill activation), and repeats information multiple times. The 'Known Issues This Skill Prevents' list duplicates content covered later. The 'When to Load References' section is excessively detailed for information Claude can infer. The 'Secure Installation' and 'Production Example' sections add little actionable value. Many rules are stated multiple times across different sections (e.g., 'delete tailwind.config.ts' appears 4+ times).

1 / 3

Actionability

Provides fully executable code examples throughout: complete vite.config.ts, CSS patterns with exact syntax, bash commands for installation, JSON configuration, and TSX usage examples. The four-step architecture gives copy-paste ready code for each step. The troubleshooting table maps symptoms directly to fixes.

3 / 3

Workflow Clarity

The Quick Start section provides a clearly numbered sequence. The Four-Step Architecture is explicitly ordered with critical rules at each step. The setup checklist provides a comprehensive verification mechanism. Critical rules are clearly marked with ✅/❌ patterns. The workflow includes validation (checklist, test theme switching) and clear error recovery (Common Issues table).

3 / 3

Progressive Disclosure

References to external files (references/common-gotchas.md, references/dark-mode.md, etc.) are well-signaled and organized with clear 'when to load' guidance. However, no bundle files are provided, so we can't verify these references exist. The main SKILL.md itself is too long and includes content that should be in reference files (e.g., the full semantic color tokens section, the dependencies list, the secure installation section). The Table of Contents helps navigation but the document is monolithic.

2 / 3

Total

9

/

12

Passed

Validation

72%

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

Validation8 / 11 Passed

Validation for skill structure

CriteriaDescriptionResult

skill_md_line_count

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

Warning

metadata_version

'metadata.version' is missing

Warning

metadata_field

'metadata' should map string keys to string values

Warning

Total

8

/

11

Passed

Repository
secondsky/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.