CtrlK
BlogDocsLog inGet started
Tessl Logo

baseline-ui

Quickly deslop UI code by fixing spacing, hierarchy, typography, and small layout issues. Use when the interface needs a fast cleanup or polish pass.

69

Quality

83%

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

SKILL.md
Quality
Evals
Security

Quality

Content

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

An exemplary terse constraint-style skill body: every line is a concrete, checkable rule with no padding, clearly organized under stack/component/interaction/animation/typography/layout/performance/design headers, and the two usage modes have an unambiguous output format. The only weakness is minor underspecification in a few rules (undefined z-index scale, no safe-area-inset example, no code snippets), which keeps actionability at 4.

DimensionReasoningScore

Conciseness

The body is a lean rule list with zero padding — every line is a terse constraint with concrete utility names (`h-dvh`, `text-balance`, `tw-animate-css`) and no explanation of concepts Claude already knows. Matches the 'every token earns its place' anchor; not 4 because there is no over-explanation to trim anywhere.

5 / 5

Actionability

Rules are directly checkable and name specific utilities, libraries, and classes (`cn` from clsx + tailwind-merge, `motion/react`, `AlertDialog`, `prefers-reduced-motion`), matching 'mostly executable guidance with minor gaps'. Not 5 because there are no code examples and some rules are underspecified — the 'fixed z-index scale' is never defined and no `safe-area-inset` usage snippet is given — leaving Claude to fill in details.

4 / 5

Workflow Clarity

This is a simple, single-purpose skill whose two invocation modes are unambiguously defined ('/baseline-ui' for conversation-wide constraints; '/baseline-ui <file>' for review) with an explicit output format — violations quoted, why it matters, concrete fix. The single action is unambiguous and the operation is read-only, so the destructive/batch validation cap does not apply.

5 / 5

Progressive Disclosure

There are no bundle files (references/, scripts/, assets/ absent), and the ~80-line body is a well-organized flat constraint list with clear section headers where nothing warrants splitting into separate files. Per the simple-skill guideline, well-organized sections with no external-reference needs earn the top score.

5 / 5

Total

19

/

20

Passed

Description

75%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 solid description that states concrete actions and an explicit use-when clause in third person, with natural trigger terms like 'cleanup' and 'polish'. Its main limits are coverage gaps versus the skill's actual scope and a somewhat generic 'when' clause. Suggestions: add missing natural synonyms (styling, CSS, Tailwind) to the trigger terms; make the 'when' clause more concrete about what user requests should invoke it; mention the broader constraint scope (components, animation, design rules) in the 'what' for completeness.

Suggestions

Add natural trigger synonyms users would actually say — e.g. 'styling', 'design', 'CSS', 'Tailwind cleanup' — to broaden trigger_term_quality coverage.

Make the 'Use when...' clause more concrete, e.g. 'Use when the user asks to clean up, polish, or fix the styling/layout of UI components' instead of the generic 'needs a fast cleanup or polish pass'.

Broaden the 'what' to reflect the skill's full scope (component primitives, animation constraints, design rules), not just spacing/hierarchy/typography/layout.

DimensionReasoningScore

Specificity

Names the domain (UI code) and lists several concrete actions — "fixing spacing, hierarchy, typography, and small layout issues" — matching the 'several specific actions; minor gaps in coverage' anchor. It is not 5 because the description omits much of what the skill body actually covers (components, interaction, animation, design constraints), and not 3 because it goes beyond 1-2 actions.

4 / 5

Completeness

Both parts are explicit: what ("deslop UI code by fixing spacing, hierarchy, typography, and small layout issues") and when ("Use when the interface needs a fast cleanup or polish pass"). The 'when' clause is generic self-reference rather than concrete trigger phrases, matching anchor 4 ('when' could be more explicit or specific) rather than the 5 anchor's concrete user-mention triggers.

4 / 5

Trigger Term Quality

Natural phrases users would say are present — "cleanup", "polish pass", "interface", "UI" — alongside specific domain terms (spacing, typography, layout). It falls short of 5 because common synonyms and stack terms users would naturally mention ("styling", "design", "CSS", "Tailwind") are missing.

4 / 5

Distinctiveness Conflict Risk

The 'deslop' framing plus a specific cleanup scope makes it mostly distinct with minor overlap risk against general UI/design/styling skills. Not 5 because 'cleanup or polish pass' is broad enough that generic UI-improvement requests could route here over more specific skills.

4 / 5

Total

16

/

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
ibelick/ui-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.