CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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
SecuritybySnyk

Passed

No findings from the security scan

Fix and improve this skill with Tessl

tessl review fix ./cli/assets/skills/ui-styling/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

65%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 exemplary progressive disclosure (verified one-level-deep references) and largely executable code and commands. The main weaknesses are padded, buzzword-laden prose with duplicated navigation, and missing validation checkpoints around batch operations like component installation.

Suggestions

Trim the Core Stack and Best Practices sections (remove items Claude already knows and buzzword bullets like 'Museum-quality' / 'Expert Craftsmanship') and merge the per-section 'Covers:' lists into the single 'Reference Navigation' section to eliminate duplication.

Add a validation checkpoint after batch operations, e.g. after running scripts/shadcn_add.py, verify the added component files exist under @/components/ui and that imports resolve before proceeding.

Complete the form example (render the password field defined in the zod schema) and include the dependency-install step (react-hook-form, @hookform/resolvers, zod) so the pattern is fully copy-paste runnable.

DimensionReasoningScore

Conciseness

Mostly efficient — Quick Start, Utility Scripts, and Common Patterns earn their tokens — but there is unnecessary padding: Core Stack bullets restate what Claude already knows about Tailwind/shadcn, canvas language is fluffy ('Museum-quality visual compositions', 'Philosophy-driven design approach', 'Expert Craftsmanship: Every detail matters'), and navigation is duplicated between each section's 'Covers:' list and the 'Reference Navigation' section. Not a 2 because the bulk is genuinely useful and code examples are tight.

3 / 5

Actionability

Mostly executable, copy-paste-ready guidance: 'npx shadcn@latest init', 'npx shadcn@latest add button card dialog form', a complete Dashboard TSX example, a runnable LoginForm, and concrete script invocations with flags. Minor gaps keep it below 5: the vite.config.ts snippet is abbreviated, the 'Form with validation' example never renders the password field its schema defines, and no dependency-install step is given for react-hook-form/zod.

4 / 5

Workflow Clarity

A clear implicit sequence exists (init → add components → compose with utilities), and tailwind_config_gen.py has an explicit safety checkpoint (refuses to overwrite an existing sibling config, gating --force). But other operations lack checkpoints: after 'npx shadcn@latest add' or 'scripts/shadcn_add.py button card dialog' (a batch operation) there is no verify step, and the destructive/batch cap on validation applies.

3 / 5

Progressive Disclosure

Verified against the actual bundle: all 7 'references/*.md' paths cited in the body exist as substantive files (320–480 lines), no reference file points onward to another document (strictly one level deep), and both scripts exist. SKILL.md is a clear overview with well-signaled 'See: references/...' pointers, per-topic coverage summaries, and a consolidated navigation section — matching the 5 anchor.

5 / 5

Total

15

/

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, with an unusually thorough trigger list and concrete named technologies. The only weaknesses are mild marketing fluff ('beautiful') and a few missing natural synonyms such as 'UI' or 'frontend'.

DimensionReasoningScore

Specificity

Names the stack concretely ('shadcn/ui components (built on Radix UI + Tailwind)', 'Tailwind CSS utility-first styling', 'canvas-based visual designs') and lists specific component types '(dialogs, dropdowns, forms, tables)' plus actions like 'customizing themes and colors', 'implementing dark mode', 'generating visual designs and posters'. Falls just short of the 5 anchor because verbs remain somewhat generic and 'beautiful' is mild buzzword, leaving minor coverage gaps rather than comprehensive concrete actions.

4 / 5

Completeness

Clearly answers both: what — 'Create beautiful, accessible user interfaces with shadcn/ui components... Tailwind CSS utility-first styling, and canvas-based visual designs'; when — an explicit 'Use when...' clause enumerating concrete triggers (building user interfaces, responsive layouts, accessible components, dark mode, posters). Matches the 5 anchor's what+when-with-trigger-phrases pattern; a 4 would require the when-clause to be less explicit.

5 / 5

Trigger Term Quality

Good natural-keyword coverage: 'user interfaces', 'design systems', 'responsive layouts', 'dialogs, dropdowns, forms, tables', 'dark mode', 'themes and colors', 'visual designs and posters'. Missing a few natural synonyms a user would say ('UI', 'frontend', 'React/Next.js'), so it does not reach the comprehensive synonym coverage of the 5 anchor.

4 / 5

Distinctiveness Conflict Risk

Naming shadcn/ui, Radix UI, Tailwind CSS, and canvas-based design carves a mostly distinct niche with clear triggers. Minor overlap risk remains with general frontend/web-development skills and visual-design/dataviz skills via the broad 'building user interfaces' and 'generating visual designs' triggers, keeping it below the minimal-conflict 5 anchor.

4 / 5

Total

17

/

20

Passed

Validation

87%

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

CriteriaDescriptionResult

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

cli/assets/skills/ui-styling/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.