CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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.

93

1.74x
Quality

93%

Does it follow best practices?

Impact

96%

1.74x

Average score across 3 eval scenarios

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

100%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.

The body is an exemplary constraints-style skill: every line is a specific, checkable rule with concrete Tailwind classes, named libraries, and exact thresholds, organized into clean sections with zero filler. The file-review workflow has a fully specified output format, and the single-file structure is appropriately sized with no content that needs splitting out.

DimensionReasoningScore

Conciseness

The body is a lean rule list — every constraint is a single-line MUST/SHOULD/NEVER bullet ("NEVER use `h-screen`, use `h-dvh`") with zero padding and no explanation of concepts Claude already knows (it never explains what compositor props or safe-area insets are). This matches anchor 5 (lean, assumes Claude's competence, every token earns its place); the only parentheticals ("formerly `framer-motion`") are load-bearing, not padding.

5 / 5

Actionability

Although it is an instruction-only skill with no code blocks, the rules are directly executable: exact class names (`text-balance`, `tabular-nums`, `h-dvh`), exact thresholds ("NEVER exceed `200ms`"), named libraries (`motion/react`, `cn` via `clsx` + `tailwind-merge`), and a specified review output format (violations quoted, why it matters, a concrete fix). Per the rubric's code_vs_instruction note, absent code is not penalized when guidance is this actionable; every rule can be applied or checked without guessing, matching anchor 5.

5 / 5

Workflow Clarity

The two invocation modes are unambiguous: `/baseline-ui` applies the constraints to UI work in the conversation, and `/baseline-ui <file>` reviews a file with a fully specified output structure ("violations (quote the exact line/snippet)", "why it matters (1 short sentence)", "a concrete fix (code-level suggestion)"). This is a simple, single-purpose rule-enforcement skill with no destructive or batch operations, so the simple-skill exception applies and the single action scores 5.

5 / 5

Progressive Disclosure

There are no bundle files, and none are needed: the ~900-token rule list is organized into nine clearly labeled sections (Stack, Components, Interaction, Animation, Typography, Layout, Performance, Design) that are scannable and easy to navigate, with the single external link (Base UI components) clearly signaled. Nothing is inlined that belongs in a separate file and there is no reference nesting, so the well-organized-structure bar for anchor 5 is met.

5 / 5

Total

20

/

20

Passed

Description

83%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 description that explicitly states what the skill does and when to use it, in third person, with concrete actions and natural trigger terms. Its only weaknesses are minor: the what-clause omits a few rule categories the body covers (stack, performance, design), and the when-triggers are broad enough to overlap with general UI/design skills.

Suggestions

Broaden the what-clause to reflect the body's full coverage, e.g. mention stack/library constraints (Tailwind defaults, motion/react, cn utility) and design rules (gradients, shadows, accent colors) so specificity reaches comprehensive coverage.

Add one or two natural trigger variations users would actually say, such as "design review", "frontend styling", or "UI polish", to improve trigger-term coverage.

Tighten the when-clause with a Tailwind-specific trigger (e.g. "when writing or reviewing Tailwind CSS classes") to reduce overlap with general component-library or design-system skills.

DimensionReasoningScore

Specificity

The description lists four concrete third-person actions — "Validates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns" — which matches the anchor for several specific actions with minor gaps: the body also contains stack constraints (motion/react, cn utility), performance rules (will-change, blur), and design rules (gradients, shadows, accent colors) that the description does not mention. It is above anchor 3 (which expects only 1-2 actions) but stops short of anchor 5's comprehensive coverage.

4 / 5

Completeness

It explicitly answers both questions: what ("Validates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns in Tailwind CSS projects") and when ("Use when building UI components, reviewing CSS utilities, styling React views, or enforcing design consistency") with concrete trigger phrases. This matches the anchor-5 example pattern exactly, and no higher anchor exists.

5 / 5

Trigger Term Quality

The when-clause surfaces natural user phrasings — "building UI components, reviewing CSS utilities, styling React views, or enforcing design consistency" — plus the domain keyword "Tailwind CSS projects", giving good keyword coverage. A few natural variations users would actually say are missing (e.g., "design review", "frontend styling", "animation"), so it fits anchor 4 rather than anchor 5's comprehensive synonym coverage, and is clearly above anchor 3's partial coverage.

4 / 5

Distinctiveness Conflict Risk

The what-clause carves a clear niche (Tailwind CSS UI baseline: animation durations, typography scale, accessibility, layout anti-patterns), but the when-triggers "building UI components" and "styling React views" are broad enough to overlap with general UI/component/design-system skills, fitting anchor 4 (mostly distinct, minor overlap risk) rather than anchor 5 (minimal conflict risk).

4 / 5

Total

17

/

20

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

Validation for skill structure

No warnings or errors.

Repository

Kiz8-Team/open-agents

Path

.agents/skills/baseline-ui/SKILL.md

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.