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

81%

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

78%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 overview skill with copy-paste-ready code, a clear setup sequence with a safety gate on the one destructive operation, and exemplary one-level-deep progressive disclosure into real, substantive reference files. The main cost is token redundancy: known-concept explanations in 'Core Stack', double-listed references, and a 'When to Use' section duplicating the frontmatter.

Suggestions

Delete or radically compress the 'Core Stack' section — bullets like 'Utility-first CSS framework' and 'Build-time processing with zero runtime overhead' explain concepts Claude already knows and cost tokens without adding guidance.

Merge the 'Reference Navigation' index into the per-topic sections (or vice versa) so each reference file is listed exactly once instead of twice with overlapping descriptions.

Drop the 'When to Use This Skill' section or replace it with a pointer to the frontmatter description, since it repeats the same trigger list verbatim in spirit.

Dimension	Reasoning	Score
Conciseness	The Quick Start, patterns, and script sections are lean and code-first, but the 'Core Stack' section restates concepts Claude already knows ('Utility-first CSS framework', 'Build-time processing with zero runtime overhead', 'Automatic dead code elimination'), references are listed twice (per-section 'Covers:' bullets plus the 'Reference Navigation' index), and 'When to Use This Skill' duplicates the frontmatter triggers. Not 2 because the majority of the body is actionable code and tight pointers rather than padded prose; not 4 because the redundant listings and known-concept explanations are real trimming opportunities.	3 / 5
Actionability	Fully executable throughout: 'npx shadcn@latest init', 'npx shadcn@latest add button card dialog form', a complete Dashboard component, a working react-hook-form + zod LoginForm, responsive dark-mode markup, and runnable script commands with flags ('python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter'). Copy-paste ready and covering the common cases, matching the top anchor.	5 / 5
Workflow Clarity	The Quick Start gives a clear init → add components → use sequence, and the one risky operation has an explicit checkpoint: the config generator 'refuses to create or replace a config when any sibling tailwind.config.js... already exists' with a review-then---force recovery path. Not 5 because there are no verification steps for the component-install or build flow; not 3 because the sequence is coherent and the destructive case does have a validation gate.	4 / 5
Progressive Disclosure	Textbook structure: getting-started content and common patterns stay inline, while all catalog detail is split one level deep into seven clearly signaled real reference files ('See: references/shadcn-components.md', etc., all verified present in references/) plus two documented scripts. Not 4 because there are no nested references and nothing that belongs in a bundle file is inlined.	5 / 5
	Total	17 / 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 in third-person voice with an explicit 'Use when...' clause listing concrete trigger phrases, satisfying both the what and when requirements. Minor weaknesses are the padded word 'beautiful', limited verb variety, and missing common synonyms like 'UI' or 'frontend'.

Dimension	Reasoning	Score
Specificity	Enumerates several concrete capabilities — 'shadcn/ui components (built on Radix UI + Tailwind)', 'Tailwind CSS utility-first styling', 'canvas-based visual designs', 'accessible components (dialogs, dropdowns, forms, tables)' — though 'beautiful' is fluffy and the action verbs reduce to a single 'Create'. Not 5 because it lacks a list of multiple distinct concrete actions (extract/fill/merge-style); not 3 because coverage goes well beyond 1-2 actions.	4 / 5
Completeness	Explicitly answers both: what ('Create beautiful, accessible user interfaces with shadcn/ui components... Tailwind CSS utility-first styling, and canvas-based visual designs') and when ('Use when building user interfaces, implementing design systems, creating responsive layouts...') with concrete trigger phrases, matching the top anchor. A lower score would require the 'when' clause to be weaker or missing, which it is not.	5 / 5
Trigger Term Quality	Includes many natural phrases users would say — 'building user interfaces', 'responsive layouts', 'dark mode', 'dialogs, dropdowns, forms, tables', 'visual designs and posters', 'design systems'. Not 5 because common synonyms and shorthands like 'UI', 'frontend', or 'CSS' are absent; not 3 because keyword coverage is genuinely good rather than partial.	4 / 5
Distinctiveness Conflict Risk	The named stack (shadcn/ui, Radix UI, Tailwind) carves out a clear niche, but broad triggers like 'building user interfaces' and 'establishing consistent styling patterns' could overlap with generic web-development or design skills. Not 5 due to that overlap risk; not 3 because the specific framework anchors keep it mostly distinct.	4 / 5
	Total	17 / 20 Passed

Validation

87%

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

Validation for skill structure

Criteria	Description	Result
frontmatter_unknown_keys	Unknown frontmatter key(s) found; consider removing or moving to metadata	Warning
referenced_paths_exist	Referenced path issues: 1 missing	Warning

	Total	14 / 16 Passed

Repository: nextlevelbuilder/ui-ux-pro-max-skill
Path: .claude/skills/ui-styling/SKILL.md
Commit: 09170ee

Reviewed: 2 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.