ui-styling

Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.

Quality

86%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Quality

Content

72%

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

The body is a well-organized, actionable overview with executable commands, complete code examples, and clean one-level-deep progressive disclosure. It loses points only on conciseness (some duplicate listing/filler) and workflow clarity (no validation checkpoints for the script-driven steps).

Suggestions

Collapse the per-section 'Covers:' bullet lists or the duplicated 'Reference Navigation' block into one place to remove repetition and save tokens.

Add a validation step after the script-driven flows (e.g. 'verify components were added with `npx shadcn@latest diff`' or 'check generated tailwind.config.js compiles') to give the workflows an explicit feedback checkpoint.

Trim filler Best Practices items such as 'Expert Craftsmanship: Every detail matters' that restate what Claude already assumes.

Dimension	Reasoning	Score
Conciseness	Largely efficient and free of basic-concept padding, but could be tightened: the 'Covers:' bullet lists restate section headers, the 'Reference Navigation' section re-lists every reference already pointed to above, and a few Best Practices items ('Expert Craftsmanship: Every detail matters') add filler. Not score-3 lean; not verbose enough for 1.	2 / 3
Actionability	Concrete executable commands ('npx shadcn@latest init', 'npx shadcn@latest add button card dialog form', the Vite/Tailwind install) and complete copy-paste code examples (Dashboard, zod LoginForm, responsive dark-mode layout) make guidance fully executable, matching the score-3 anchor.	3 / 3
Workflow Clarity	Setup is sequenced (init → add → use components) with a clear alternative flow, but the Python script usage (tailwind_config_gen, shadcn_add) and component-add steps have no validation checkpoints or error-recovery feedback loops, which the rubric caps at 2 for batch/script operations. Not 1 because sequences are present; not 3 because checkpoints are missing.	2 / 3
Progressive Disclosure	A concise overview body with well-signaled one-level-deep 'See: references/...' pointers, all referenced files verified present, content appropriately split across 7 reference files and 2 scripts, plus a navigation summary — matching the score-3 anchor.	3 / 3
	Total	10 / 12 Passed

Description

100%

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

The description is specific, third-person, and complete — it states concrete capabilities and an explicit 'Use when' clause with natural trigger terms. It carves a distinct UI-styling niche with low conflict risk.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete actions — 'implementing design systems', 'creating responsive layouts', 'adding accessible components (dialogs, dropdowns, forms, tables)', 'customizing themes and colors', 'implementing dark mode', 'generating visual designs and posters' — matching the comprehensive score-3 anchor rather than naming only a domain.	3 / 3
Completeness	Explicitly answers 'what' (create accessible UIs with shadcn/ui + Tailwind + canvas) and 'when' via an explicit 'Use when...' clause enumerating scenarios, satisfying the score-3 anchor.	3 / 3
Trigger Term Quality	Natural trigger terms a user would actually say — 'design systems', 'responsive layouts', 'dark mode', 'themes and colors', 'dialogs, dropdowns, forms, tables', 'posters' — give good coverage of common variations, not just jargon.	3 / 3
Distinctiveness Conflict Risk	A clear niche (shadcn/ui + Tailwind + canvas UI styling) with distinct triggers in third-person voice; unlikely to fire for unrelated skills, matching the score-3 anchor.	3 / 3
	Total	12 / 12 Passed

Validation

93%

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

Validation for skill structure

Criteria	Description	Result
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning

	Total	15 / 16 Passed

Repository: mrgoonie/claudekit-skills
Path: .claude/skills/ui-styling/SKILL.md
Commit: 80113d8

Reviewed: about 8 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.