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.

71

Quality

87%

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%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A well-structured, token-efficient constraints catalog that gives concrete, actionable rules across UI domains. It is strongest in conciseness and could improve by adding a brief applied example and an explicit review-validation checkpoint.

Suggestions

Add one short before/after markup example illustrating a corrected component (e.g. an icon-only button with aria-label) to lift actionability from rules to applied guidance.

For the `/baseline-ui <file>` flow, add an explicit checkpoint such as 'confirm each violation against the constraint list before proposing fixes' to strengthen workflow validation.

Consider splitting the long Animation/Design rule lists into a referenced file only if the catalog grows further; at current size inline placement is appropriate.

DimensionReasoningScore

Conciseness

A lean catalog of MUST/SHOULD/NEVER constraints with almost no preamble; it assumes Claude's competence and avoids explaining basic concepts, so every token earns its place.

5 / 5

Actionability

Concrete, executable guidance with specific utilities (e.g. 'use h-dvh', 'animate only compositor props (transform, opacity)', 'text-balance for headings'), but lacks worked examples showing the rules applied to real markup.

4 / 5

Workflow Clarity

The 'How to use' section defines two clear invocations and a review output format (violations, why it matters, fix), but the file-review path has no explicit validation/checkpoint step before emitting fixes.

4 / 5

Progressive Disclosure

Well-organized into clear section headers (Stack, Components, Interaction, Animation, etc.) with no nested references and content appropriately kept inline for a constraints catalog; minor gaps as it exceeds the simple-skill line count.

4 / 5

Total

17

/

20

Passed

Description

92%Weight 40%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.

A strong, third-person description that clearly states capabilities and trigger conditions with concrete, natural phrasing. It is concise, specific, and low conflict-risk, with only minor room to broaden trigger synonyms.

DimensionReasoningScore

Specificity

Lists four concrete actions ('Validates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns'), giving comprehensive coverage of the skill's scope.

5 / 5

Completeness

Explicitly answers both what (validates/enforces/checks/prevents) and when ('Use when building UI components, reviewing CSS utilities, styling React views, or enforcing design consistency') with concrete trigger phrases.

5 / 5

Trigger Term Quality

Natural trigger phrases like 'building UI components, reviewing CSS utilities, styling React views' map well to user language, but a few common synonyms (e.g. 'Tailwind', 'accessibility audit') are absent.

4 / 5

Distinctiveness Conflict Risk

Anchored to Tailwind CSS projects with a specific UI-baseline niche (animation, typography, accessibility, layout), giving distinct triggers and minimal overlap with general styling skills.

5 / 5

Total

19

/

20

Passed

Validation

93%

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

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

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

Warning

Total

15

/

16

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.