tailwind-design-system

Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.

1.48x

Quality

—

Does it follow best practices?

Impact

92%

1.48x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Quality

Content

65%

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

A thorough, highly actionable Tailwind v4 design-system skill with strong copy-paste-ready code, but it is monolithic and long for a SKILL.md, with reference-grade material inlined and no validation feedback loops in its migration workflow.

Suggestions

Move the complete Quick Start token CSS (full OKLCH set + dark-mode overrides) and full component implementations into reference files (e.g. references/tokens.css, references/components.md), keeping SKILL.md as an overview with well-signaled one-level-deep links — this improves both conciseness and progressive_disclosure.

Add validation checkpoints to the v3→v4 migration checklist, e.g. 'After migrating: run the build, grep for stale @tailwind directives / tailwind.config.ts references, and confirm @theme tokens resolve in compiled CSS', to close the workflow feedback loop.

Remove duplicated material — the @keyframes and --animate-* tokens appear in both the Quick Start block and Pattern 5 — to cut redundant token load.

Dimension	Reasoning	Score
Conciseness	The body is dense and mostly valuable code, but at ~870 lines it loads a large amount of reference material (full OKLCH token set, complete dark-mode overrides, full component implementations) directly into context that could be tightened or externalized; some content is duplicated (e.g. @keyframes/animation tokens appear in both Quick Start and Pattern 5).	2 / 3
Actionability	Provides fully executable, copy-paste-ready TypeScript/CSS examples (Button with CVA, Card compound components, Input with RHF+Zod, native popover animations) with concrete imports and usage snippets.	3 / 3
Workflow Clarity	The 'v3 to v4 Migration Checklist' gives a sequenced task list, but it lacks validation checkpoints (no 'verify build / confirm @theme tokens resolve / grep for stale @tailwind references'), and migration is a non-trivial change where missing feedback loops cap clarity at 2.	2 / 3
Progressive Disclosure	The skill is monolithic — no references/, scripts/, or assets/ bundle exists and all detailed content (full token CSS, every component pattern) lives inline in SKILL.md rather than being split into one-level-deep reference files, despite clear section headers.	2 / 3
	Total	9 / 12 Passed

Description

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.

A well-crafted description that uses third-person voice, states concrete capabilities, and provides an explicit 'Use when...' trigger. It clearly answers both what the skill does and when to invoke it.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete actions — 'Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns' — naming several specific capabilities rather than vague language.	3 / 3
Completeness	Explicitly answers both 'what' ('Build scalable design systems...') and 'when' via a clear 'Use when creating component libraries, implementing design systems, or standardizing UI patterns' trigger clause.	3 / 3
Trigger Term Quality	Natural user-facing terms are well covered — 'creating component libraries, implementing design systems, or standardizing UI patterns' plus 'design tokens' and 'responsive patterns' — terms a user would actually say when needing this skill.	3 / 3
Distinctiveness Conflict Risk	The 'Tailwind CSS v4' + 'design systems' framing carves a clear niche with distinct triggers unlikely to fire for unrelated skills; it is more specific than a generic 'works with frontend files' description.	3 / 3
	Total	12 / 12 Passed

Validation

93%

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 — 15 / 16 Passed

Validation for skill structure

Criteria	Description	Result
skill_md_line_count	SKILL.md is long (875 lines); consider splitting into references/ and linking	Warning

	Total	15 / 16 Passed

Repository: Dicklesworthstone/pi_agent_rust
Commit: e9f9b67

Reviewed: 4 days 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.