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

85%

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

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.

The body is highly actionable with complete code examples, exact commands, and excellent progressive disclosure to real, one-level-deep reference files. Its main weakness is token efficiency: it re-explains well-known technology, duplicates its reference listing, and carries generic best-practice filler.

Suggestions

Trim the 'Core Stack' section to a brief stack summary — drop explanations of what shadcn/ui and Tailwind already are (e.g. 'Utility-first CSS framework', 'Build-time processing with zero runtime overhead') since Claude knows these technologies.

Remove the duplication between the per-topic reference sections and the 'Reference Navigation' section; a single navigation index with the 'Covers:' summaries is sufficient.

Replace generic 'Best Practices' items like 'Expert Craftsmanship: Every detail matters' and 'TypeScript: Use full type safety for better DX' with concrete, project-specific guidance or cut them.

DimensionReasoningScore

Conciseness

The body is mostly useful quick-start code and reference pointers, but the 'Core Stack' section explains facts Claude already knows ('Utility-first CSS framework', 'Build-time processing with zero runtime overhead', 'Pre-built accessible components via Radix UI primitives'), the reference files are listed twice (per-topic sections plus 'Reference Navigation'), and 'Best Practices' includes generic filler like 'Every detail matters - treat UI as a craft'.

3 / 5

Actionability

Fully executable, copy-paste-ready guidance: exact CLI commands ('npx shadcn@latest init', 'npx shadcn@latest add button card dialog form'), complete Dashboard and react-hook-form/zod LoginForm examples, and precise script invocations with flags ('python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter').

5 / 5

Workflow Clarity

The setup sequence is clearly ordered (init → add components → use with utility styling, plus a Tailwind-only alternative), and the config generator documents an explicit safety guardrail (refuses when a sibling config exists; --force only when intentional). It stops short of anchor 5 because there is no explicit verify/check step after setup or component installation.

4 / 5

Progressive Disclosure

Clear overview with well-signaled, one-level-deep references: all seven 'See: references/*.md' targets exist in the bundle, none of them nest further, each is introduced with a coverage summary, and a 'Reference Navigation' index plus script documentation rounds out easy navigation.

5 / 5

Total

17

/

20

Passed

Description

88%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: it names the concrete technology stack, lists multiple specific capabilities, and provides an explicit 'Use when...' clause with natural trigger phrases. Its only weaknesses are a few missing common synonyms and somewhat broad triggers that could overlap with general frontend skills.

DimensionReasoningScore

Specificity

Lists multiple concrete actions with named technologies: 'adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters' — comprehensive rather than minor-gap coverage, matching the anchor 5 example's breadth.

5 / 5

Completeness

Clearly answers both 'what' (create accessible UIs with shadcn/ui, Tailwind CSS, and canvas-based designs) and 'when' via an explicit 'Use when building user interfaces, implementing design systems...' clause with concrete trigger phrases.

5 / 5

Trigger Term Quality

Good natural keyword coverage ('user interfaces', 'responsive layouts', 'dialogs, dropdowns, forms, tables', 'dark mode', 'posters') that users would actually say, but common synonyms and variations like 'UI', 'web app', 'landing page', or 'dashboard' are absent, so it does not reach the comprehensive-with-synonyms anchor 5.

4 / 5

Distinctiveness Conflict Risk

The named stack (shadcn/ui, Radix UI, Tailwind, canvas) makes it mostly distinct, but very broad triggers like 'building user interfaces' and 'establishing consistent styling patterns' leave minor overlap risk with generic web-development or design skills.

4 / 5

Total

18

/

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

.claude/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.