baseline-ui
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.
88
82%
Does it follow best practices?
Impact
96%
1.74xAverage score across 3 eval scenarios
Passed
No known issues
Quality
Discovery
92%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 strong skill description that clearly articulates specific capabilities (animation validation, typography enforcement, accessibility checks, anti-pattern prevention) and provides explicit trigger guidance via a 'Use when' clause. The Tailwind CSS scoping adds distinctiveness, though some trigger terms like 'UI components' and 'React views' are broad enough to potentially conflict with other frontend skills.
| 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 clearly defined capabilities. | 3 / 3 |
Completeness | Clearly answers both what (validates animation durations, enforces typography scale, checks accessibility, prevents layout anti-patterns) and when (building UI components, reviewing CSS utilities, styling React views, enforcing design consistency) with an explicit 'Use when' clause. | 3 / 3 |
Trigger Term Quality | Includes strong natural keywords users would say: 'Tailwind CSS', 'UI components', 'CSS utilities', 'React views', 'design consistency', 'accessibility', 'typography', 'animation'. Good coverage of terms a developer would naturally use. | 3 / 3 |
Distinctiveness Conflict Risk | While 'Tailwind CSS' narrows the scope significantly, terms like 'UI components', 'styling React views', and 'design consistency' could overlap with general CSS linting, React component, or design system skills. The specific focus on validation/enforcement of Tailwind patterns helps but doesn't fully eliminate overlap. | 2 / 3 |
Total | 11 / 12 Passed |
Implementation
72%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is a well-structured, concise constraint reference that efficiently communicates an opinionated UI baseline. Its main strength is token efficiency and clear categorization of rules using MUST/SHOULD/NEVER modifiers. Its primary weakness is the lack of concrete code examples showing violations and fixes, which would make the review workflow more actionable and reduce ambiguity in edge cases.
Suggestions
Add 1-2 concrete before/after code examples showing a common violation and its fix (e.g., animating `width` vs using `transform: scaleX`).
Add a feedback loop to the `/baseline-ui <file>` workflow: after outputting violations and fixes, prompt to re-check the file or confirm fixes were applied correctly.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Every rule is a single, direct constraint statement. No unnecessary explanations of what Tailwind CSS is, how animations work, or why accessibility matters. Each line earns its place as a concrete constraint Claude wouldn't inherently know. | 3 / 3 |
Actionability | The rules are specific and concrete (e.g., 'NEVER exceed 200ms', 'use text-balance for headings'), but there are no executable code examples showing correct vs incorrect patterns. A review skill like this would benefit from at least one example showing a violation and its fix in actual code. | 2 / 3 |
Workflow Clarity | The `/baseline-ui <file>` command clearly defines a 3-step output format (violations, why it matters, concrete fix), which is good. However, there's no validation/feedback loop for applying fixes—no step to re-check after corrections are made, and no sequencing for how to prioritize or batch violations. | 2 / 3 |
Progressive Disclosure | Content is well-organized into clearly labeled sections (Stack, Components, Interaction, Animation, Typography, Layout, Performance, Design) that serve as a scannable reference. For a constraint-list skill of this size (~80 lines), this flat structure with clear headings is appropriate and doesn't need external file references. | 3 / 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
- ibelick/ui-skills
- Commit
95d0e08
- 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.