CtrlK
BlogDocsLog inGet started
Tessl Logo

shadcn-customization

Shadcn/ui theming and component customization — CSS variables, OKLCH colors, dark mode, variants, wrappers. Load for any ticket involving colors, theme, UI layout, or component styling.

75

Quality

92%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Low

Low-risk findings worth noting

SKILL.md
Quality
Evals
Security

Quality

Content

96%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, token-efficient reference that gives executable commands and code for every common theming/customization task, reinforced by Red Flags and a Verification checklist. The only minor gap is the absence of separated reference files for the longer tables/lists.

DimensionReasoningScore

Conciseness

Lean and assumes Claude's competence; code and tables carry the load, with only a single one-line OKLCH aside and no padding or restated basics.

5 / 5

Actionability

Copy-paste-ready `npx shadcn@latest apply ...` commands, concrete CSS variable blocks, and TSX examples cover the common customization cases end-to-end.

5 / 5

Workflow Clarity

A numbered preference order (variant → className → new variant → wrapper), a 3-step custom-color process, plus an explicit Verification checklist and Red Flags provide clear sequencing with validation feedback loops.

5 / 5

Progressive Disclosure

Well-sectioned into focused headings with a one-level cross-skill reference (`frontend-dev`) and no nested references; with no bundle files present, content is appropriately inline but slightly denser than an ideal overview-pointer split.

4 / 5

Total

19

/

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, third-person description that pairs concrete capabilities with explicit load-trigger guidance. It is comprehensive on what and when; only trigger-term breadth and the slightly broad 'UI layout' trigger keep it from a perfect score.

DimensionReasoningScore

Specificity

Lists multiple concrete capabilities — 'CSS variables, OKLCH colors, dark mode, variants, wrappers' — giving comprehensive coverage rather than a vague domain label.

5 / 5

Completeness

Explicitly answers both what ('Shadcn/ui theming and component customization' with specifics) and when ('Load for any ticket involving colors, theme, UI layout, or component styling').

5 / 5

Trigger Term Quality

'colors, theme, UI layout, or component styling' are natural phrases users say, but a few synonyms (e.g. 'palette', 'styling tokens') are missing, keeping it just below comprehensive.

4 / 5

Distinctiveness Conflict Risk

The 'Shadcn/ui' niche is clear, but the trigger 'UI layout' is broad enough to risk minor overlap with a general frontend-development skill.

4 / 5

Total

18

/

20

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
marmelab/atomic-crm
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.