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

78%

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

Fix and improve this skill with Tessl

tessl review fix ./.claude/skills/ui-styling/SKILL.md

The canonical home for this skill is ui-styling in mrgoonie/claudekit-skills

Quality

Content

72%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 highly actionable with copy-paste code and commands, and uses excellent progressive disclosure with verified reference and script files. Weakness is conciseness (some restated framework fundamentals) and the absence of validation checkpoints in the setup workflow.

Suggestions

Cut the Core Stack bullets that restate widely known framework facts ('Utility-first CSS framework', 'Mobile-first responsive design') and keep only the non-obvious guidance.

Add a brief verification step after component install (e.g. check `components/ui/` for the new files or run the dev server) to add an explicit checkpoint to the setup workflow.

Consolidate the per-reference 'Covers:' bullet lists, since each reference file already documents its own contents; a one-line pointer per file would save significant tokens.

Dimension	Reasoning	Score
Conciseness	Mostly efficient with code blocks and reference pointers, but several Core Stack bullets restate facts Claude already knows ('Utility-first CSS framework', 'Mobile-first responsive design', 'Pre-built accessible components via Radix UI primitives') and the body runs ~325 lines that could be trimmed.	3 / 5
Actionability	Fully executable, copy-paste-ready code (Dashboard, LoginForm with react-hook-form/zod, dark-mode layout), exact CLI commands ('npx shadcn@latest add button card dialog form'), and concrete script invocations covering the common cases.	5 / 5
Workflow Clarity	The Quick Start setup is sequenced (init -> add components -> use) but has no validation or verification checkpoints; acceptable since this is not a destructive/batch workflow, though explicit 'verify the component was added' steps would raise it.	3 / 5
Progressive Disclosure	Clear overview body with well-signaled, one-level-deep references; all 7 reference files and 2 scripts exist and are organized in a dedicated 'Reference Navigation' section for easy discovery.	5 / 5
	Total	16 / 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, comprehensive description that clearly states capabilities and provides explicit 'Use when' trigger guidance covering the three sub-domains. Minor risk that the very broad UI framing could overlap with generic web-styling skills.

Suggestions

Tighten the opener so the shadcn/ui + Tailwind + canvas scope is foregrounded before the broad 'building user interfaces' framing to reduce overlap with generic web skills.

Add a couple of natural synonyms users say aloud (e.g. 'web app styling', 'component library', 'dashboard UI') to round out trigger-term coverage.

Name concrete canvas deliverables (e.g. 'posters', 'brand visuals') among the listed actions to match the specificity given for components and theming.

Dimension	Reasoning	Score
Specificity	Lists several specific concrete actions ('adding accessible components (dialogs, dropdowns, forms, tables)', 'customizing themes and colors', 'implementing dark mode', 'creating responsive layouts') with only minor coverage gaps around canvas specifics.	4 / 5
Completeness	Explicitly answers both what ('Create beautiful, accessible user interfaces with shadcn/ui... Tailwind CSS... and canvas-based visual designs') and when ('Use when building user interfaces, implementing design systems, ...') with concrete trigger phrases.	5 / 5
Trigger Term Quality	Good coverage of natural user phrases ('building user interfaces', 'implementing design systems', 'creating responsive layouts', 'adding accessible components', 'implementing dark mode'), missing a few common synonyms like 'web app styling' or file extensions.	4 / 5
Distinctiveness Conflict Risk	Mostly distinct niche anchored to shadcn/ui + Tailwind + canvas, but the broad opener 'building user interfaces' creates minor overlap risk with general frontend/web skills.	4 / 5
	Total	17 / 20 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: nextlevelbuilder/ui-ux-pro-max-skill
Path: .claude/skills/ui-styling/SKILL.md
Commit: abb7f2f

Reviewed: 3 days 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.