Validates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns in Tailwind CSS projects. Use when building UI components, reviewing CSS utilities, styling React views, or enforcing design consistency.
95
Does it follow best practices?
Validation for skill structure
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 a well-crafted skill description that excels across all dimensions. It provides specific concrete actions, uses natural developer terminology, explicitly states both capabilities and trigger conditions, and carves out a distinct niche for Tailwind CSS design system validation.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: 'validates animation durations', 'enforces typography scale', 'checks component accessibility', and 'prevents layout anti-patterns'. These are clear, actionable capabilities. | 3 / 3 |
Completeness | Clearly answers both what (validates animations, enforces typography, checks accessibility, prevents anti-patterns) AND when ('Use when building UI components, reviewing CSS utilities, styling React views, or enforcing design consistency'). | 3 / 3 |
Trigger Term Quality | Includes natural keywords users would say: 'Tailwind CSS', 'UI components', 'CSS utilities', 'React views', 'design consistency', 'styling'. Good coverage of terms developers naturally use. | 3 / 3 |
Distinctiveness Conflict Risk | Clear niche targeting Tailwind CSS projects specifically with distinct triggers around animation, typography, accessibility, and layout validation. Unlikely to conflict with generic CSS or React skills due to the specific Tailwind focus. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
87%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, well-crafted skill that efficiently communicates UI constraints through clear categorical organization and actionable MUST/SHOULD/NEVER rules. The content is exceptionally concise while remaining specific and executable. Minor improvement could be made by adding a validation loop for the review workflow.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Extremely lean and efficient. Every rule is a single line with clear MUST/SHOULD/NEVER modifiers. No unnecessary explanations of what Tailwind CSS or accessibility primitives are—assumes Claude's competence. | 3 / 3 |
Actionability | Highly actionable with specific constraints (e.g., 'NEVER exceed 200ms', 'use h-dvh not h-screen', specific library names like 'motion/react'). The review command output format is concrete with exact deliverables (violations, reasoning, fixes). | 3 / 3 |
Workflow Clarity | The `/baseline-ui <file>` command provides a clear review workflow with structured output, but there's no validation/feedback loop for applying fixes. For a linting/review skill, a 'fix -> re-check' cycle would strengthen the workflow. | 2 / 3 |
Progressive Disclosure | Well-organized with clear categorical sections (Stack, Components, Animation, Typography, etc.). Content is appropriately scoped for a single SKILL.md file under 100 lines with no need for external references. | 3 / 3 |
Total | 11 / 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.
Table of Contents
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.