CtrlK
BlogDocsLog inGet started
Tessl Logo

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.

69

Quality

85%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

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

SKILL.md
Quality
Evals
Security

Quality

Content

82%Scale 1-5

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-crafted constraint-enforcement skill that is lean, well-structured, and actionable. Its declarative MUST/SHOULD/NEVER format respects Claude's intelligence and provides clear, specific rules without over-explanation. The main area for improvement is adding one or two concrete before/after code examples to make the review workflow fully executable.

Suggestions

Add a short before/after code example showing a violation and its fix to make the review output format more concrete and actionable.

DimensionReasoningScore

Conciseness

Every rule is a single, declarative line. No explanations of what Tailwind CSS is, what accessibility means, or how animations work. Claude already knows these concepts; the skill only adds the opinionated constraints Claude wouldn't know.

5 / 5

Actionability

The rules are concrete and specific (e.g., 'NEVER exceed 200ms for interaction feedback', 'use `text-balance` for headings'), and the `/baseline-ui <file>` command specifies a clear output format (violations, rationale, fix). However, there are no code examples showing a compliant vs non-compliant component, which would make it fully executable/copy-paste ready.

4 / 5

Workflow Clarity

The two invocation modes are clearly defined, and the review output format (violations → why → fix) provides a clear sequence. For a constraint-enforcement skill this is largely a single-action task (apply rules or review a file), so no multi-step validation loop is needed. Minor gap: no guidance on what to do when rules conflict (e.g., existing project conventions vs these rules).

4 / 5

Progressive Disclosure

Content is well-organized into logical sections (Stack, Components, Interaction, Animation, Typography, Layout, Performance, Design) with clear headers. For a standalone skill with no bundle files, the length (~80 lines) is appropriate to keep inline. Minor gap: the Base UI link is the only external reference; a few more pointers (e.g., to tw-animate-css docs or motion/react docs) could help, but the content doesn't strictly need separate files.

4 / 5

Total

17

/

20

Passed

Description

88%Scale 1-5

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 four specific capabilities and provides explicit 'Use when' guidance with multiple trigger scenarios. The description is concise, uses proper third-person voice, and covers both the 'what' and 'when' effectively. Minor improvements could include additional trigger terms and synonyms to capture more user query variations.

DimensionReasoningScore

Specificity

Lists multiple specific concrete actions: validates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns. These are concrete, well-defined capabilities with comprehensive coverage of the skill's domain.

5 / 5

Completeness

Clearly answers both 'what' (validates animation durations, enforces typography scale, checks accessibility, prevents layout anti-patterns in Tailwind CSS) and 'when' (building UI components, reviewing CSS utilities, styling React views, enforcing design consistency) with explicit trigger phrases.

5 / 5

Trigger Term Quality

Includes good natural keywords like 'Tailwind CSS', 'UI components', 'CSS utilities', 'React views', 'design consistency', and 'accessibility'. Missing some natural variations users might say like 'styles', 'classnames', 'responsive design', or 'Tailwind classes'.

4 / 5

Distinctiveness Conflict Risk

Fairly distinct with its focus on Tailwind CSS linting/validation specifically around animation, typography, accessibility, and layout anti-patterns. Minor overlap risk with general CSS or accessibility-focused skills, but the Tailwind CSS specificity and the validation/enforcement angle help distinguish it.

4 / 5

Total

18

/

20

Passed

Validation

90%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation10 / 11 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

10

/

11

Passed

Repository
administrakt0r/AI-Agents-Safe-Coding-Skills
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.