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.

1.74x

Quality

82%

Does it follow best practices?

Impact

96%

1.74x

Average score across 3 eval scenarios

Securityby

Passed

No findings from the security scan

The canonical home for this skill is baseline-ui in ibelick/ui-skills

Quality

Content

72%Scale 1-3

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 a comprehensive UI baseline using MUST/SHOULD/NEVER declarations. Its main weakness is the lack of concrete code examples showing correct implementations or violation patterns, which would make the review workflow more actionable. The workflow could also benefit from an explicit re-validation step after fixes are applied.

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 improve actionability.

Add a brief feedback loop to the `/baseline-ui <file>` workflow, e.g., 'After applying fixes, re-run the review to confirm all violations are resolved.'

Dimension	Reasoning	Score
Conciseness	Every rule is a single, declarative line with no unnecessary explanation. The skill assumes Claude knows what Tailwind CSS, aria-labels, compositor properties, etc. are and doesn't waste tokens explaining them. The MUST/SHOULD/NEVER format is maximally efficient.	3 / 3
Actionability	The rules are concrete and specific (e.g., 'NEVER exceed 200ms for interaction feedback', 'use `cn` utility'), but the skill lacks executable code examples showing correct vs incorrect patterns. The `/baseline-ui <file>` command output format is described but no example review output is provided, making it less copy-paste actionable.	2 / 3
Workflow Clarity	The two slash commands provide a clear invocation model, and the review output format (violations, why it matters, concrete fix) is well-defined. However, there's no sequencing for how to apply fixes iteratively, no validation checkpoint (e.g., re-run after fixes), and no guidance on prioritizing violations when multiple rules conflict.	2 / 3
Progressive Disclosure	For a standalone skill with no bundle files, the content is well-organized into logical sections (Stack, Components, Interaction, Animation, Typography, Layout, Performance, Design) with clear headers. The skill is appropriately sized (~80 lines) and doesn't need external references. The single external link (Base UI) is well-placed.	3 / 3
	Total	10 / 12 Passed

Description

92%Scale 1-3

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 validation and enforcement capabilities within a well-defined domain (Tailwind CSS). It includes both a 'what' and 'when' clause with natural trigger terms. The only minor weakness is potential overlap with other CSS/Tailwind/React styling skills, though the focus on validation and anti-pattern prevention helps distinguish it.

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 ('Use when 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, terms like 'UI components', 'styling React views', and 'design consistency' could overlap with general CSS/styling skills or React component skills. The specific linting/validation focus helps but isn't strongly differentiated from broader Tailwind or CSS skills.	2 / 3
	Total	11 / 12 Passed

Validation

100%

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 — 11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository: Kiz8-Team/open-agents
Path: .agents/skills/baseline-ui/SKILL.md
Commit: 411da81

Reviewed: ~19 hours 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.