CtrlK
BlogDocsLog inGet started
Tessl Logo

radix-ui-design-system

Build accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for production-grade UI libraries.

57

Quality

67%

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 ./plugins/AI-Agents-Safe-Coding-Skills-claude/skills/radix-ui-design-system/SKILL.md

The canonical home for this skill is radix-ui-design-system in administrakt0r/AI-Agents-Safe-Coding-Skills

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.

The content is highly actionable with abundant copy-paste-ready Radix examples, but it is verbose through repetition and inlines large reference/example sections that would benefit from being split into separate files. A clearer build-and-verify workflow would also help.

Suggestions

Move the Common Primitives Reference, Real-World Examples, and full Theming Strategies into separate files under references/ and link to them from SKILL.md to improve progressive disclosure.

De-duplicate the installation commands and basic Root/Trigger/Portal/Content pattern that recur in Getting Started, Common Primitives Reference, and Quick Reference; keep a single canonical instance.

Add an explicit build workflow (install → scaffold primitive → wire asChild/controlled state → verify a11y checklist) with a verification checkpoint so component construction is sequenced rather than pattern-catalogued.

DimensionReasoningScore

Conciseness

The body is mostly concrete code, but the Overview explains concepts Claude already knows ('Radix UI provides unstyled, accessible components…') and installation plus the basic Root/Trigger/Portal/Content pattern are repeated across Getting Started, Common Primitives Reference, and Quick Reference.

3 / 5

Actionability

Examples are fully executable and copy-paste ready — install commands and complete Dialog/Dropdown/Tabs/Select/Tooltip/Popover implementations cover the common cases with real imports.

5 / 5

Workflow Clarity

Getting Started gives a loose install-then-build sequence and Troubleshooting offers cause/solution pairs, but there is no explicitly sequenced build workflow with validation checkpoints for component construction.

3 / 5

Progressive Disclosure

Sections are clearly headed and well-organized, but the file is a monolithic ~840 lines with Common Primitives Reference, Real-World Examples, and Theming Strategies inlined rather than split into one-level-deep reference files; no references/ bundle exists.

3 / 5

Total

14

/

20

Passed

Description

70%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.

The description is specific and well-targeted to a clear Radix UI niche, but it omits an explicit 'when to use' trigger clause, which caps completeness. Adding use-when phrasing would round it out.

Suggestions

Append a 'Use when…' clause naming concrete triggers, e.g. 'Use when building accessible React component libraries with Radix primitives, customizing headless components, or setting up theming with CSS variables/Tailwind.'

Add a few natural synonyms or version cues (e.g. '@radix-ui/react-* primitives', React 18+) to broaden trigger-term coverage.

Optionally note the React-only constraint in the description to sharpen distinctiveness against framework-agnostic design-system skills.

DimensionReasoningScore

Specificity

Names the domain (Radix UI design systems) plus several concrete capability areas — 'Headless component customization, theming strategies, and compound component patterns' — but stops short of comprehensive action enumeration.

4 / 5

Completeness

The description gives a clear 'what' but no 'Use when…' trigger clause, so per the rubric guidance completeness is capped at 3 with 'when' only weakly implied.

3 / 5

Trigger Term Quality

Includes natural terms a Radix user would say ('Radix UI primitives', 'accessible design systems', 'theming', 'compound component patterns'); a few common synonyms or file/extension cues are missing.

4 / 5

Distinctiveness Conflict Risk

'Build accessible design systems with Radix UI primitives' carves a clear niche with distinct triggers and minimal overlap risk with non-Radix skills.

5 / 5

Total

16

/

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.

Validation14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

skill_md_line_count

SKILL.md is long (849 lines); consider splitting into references/ and linking

Warning

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

14

/

16

Passed

Repository
administrakt0r/AI-Agents-Safe-Coding-Skills
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.