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 description that clearly articulates specific capabilities and includes an explicit 'Use when' clause with relevant trigger terms. The main weakness is that some trigger terms ('UI components', 'styling React views') are broad enough to potentially conflict with other frontend/styling skills. The Tailwind CSS specificity and the focus on validation/enforcement help distinguish it, but the 'Use when' triggers could be more narrowly scoped.
| 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' with an explicit 'Use when...' clause covering building UI components, reviewing CSS utilities, styling React views, or enforcing design consistency. | 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' are broad enough to potentially overlap with general CSS/styling skills or React component skills. The specific focus on validation/linting of Tailwind patterns helps but the trigger terms in the 'Use when' clause are fairly general. | 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-based skill that efficiently communicates an opinionated UI baseline through terse MUST/SHOULD/NEVER directives organized into logical sections. Its main weakness is the lack of concrete code examples showing violations and fixes, which would make the review workflow more actionable. The review output format is well-defined but lacks a re-validation step after applying fixes.
Suggestions
Add 1-2 concrete before/after code examples showing a common violation and its fix (e.g., animating `width` vs using `transform: scaleX()`) to boost actionability.
Add a re-check step to the `/baseline-ui <file>` workflow: after fixes are applied, re-run the review to confirm all violations are resolved.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Every rule is a single, terse directive. No explanations of what Tailwind CSS is, no padding about why accessibility matters in general. Each line earns its place as a 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 benefits from example violations and fixes to be fully actionable. | 2 / 3 |
Workflow Clarity | The `/baseline-ui <file>` command clearly defines a three-part 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 the workflow for applying constraints during active UI work is implicit rather than sequenced. | 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 rule-based skill of this size (~80 lines), keeping everything in one file with clear headings is appropriate and no external references are needed. | 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
18fc08d
- 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.