CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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.

Quality

63%

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

46%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 skill is rich in executable, well-chosen code examples, but it is a monolithic ~850-line document that re-explains basics Claude already knows and inlines large reference sections that should be split into bundle files. There is no sequenced build workflow with validation checkpoints, only thematic sections plus troubleshooting.

Suggestions

Split into a lean SKILL.md (~100 lines: when to use, core principles, getting started) plus reference files, e.g. references/theming.md, references/component-patterns.md, references/primitives-api.md, referenced explicitly from the body.

Cut content that re-teaches known concepts: the Overview/Key Strengths prose, the skeleton Common Primitives Reference, and the Quick Reference section that duplicates earlier install/basic-pattern content verbatim.

Add an explicit build workflow (choose primitives → install → implement → verify accessibility against the checklist) with a validation step so the accessibility checklist functions as a checkpoint rather than an appendix.

DimensionReasoningScore

Conciseness

At ~850 lines the body is noticeably verbose and re-teaches things Claude already knows: an Overview explaining what Radix is ("Radix UI provides unstyled, accessible components (primitives) that you can customize..."), Key Strengths bulletins, a skeleton "Common Primitives Reference" that just lists part names, and a "Quick Reference" section that repeats installation and basic patterns already shown verbatim earlier. Not a 1 because most sections do contain genuinely useful pattern code rather than pure padding.

2 / 5

Actionability

The body is dense with concrete, copy-paste-ready code: exact npm install commands, a complete Dialog pattern, three fully worked theming strategies (CSS variables, CVA, Stitches), and real-world examples (command palette, react-hook-form integration). Not a 5 because several snippets use placeholder classes ("trigger-styles", "overlay-styles", "select-trigger") whose styles are never defined, and some examples omit imports or state declarations (e.g., useState in the Tabs controlled pattern).

4 / 5

Workflow Clarity

There is a rough getting-started sequence (install → basic component pattern → theming → patterns) and a Troubleshooting section with cause/solution pairs, which provides some error-recovery guidance. But no explicit multi-step build workflow with validation checkpoints exists — the 'sequence' is thematic section ordering, and checkpoints are implicit at best. Not a 2 because the getting-started path and troubleshooting feedback are genuinely followable.

3 / 5

Progressive Disclosure

There is no bundle at all (no references/, scripts/, or assets/ files) and everything is inlined in one ~850-line SKILL.md — the Common Primitives Reference, three full theming strategies, Real-World Examples, and Performance sections clearly belong in separate reference files that could be pulled in as needed. Section headers are clear within the file, which keeps it above a 1, but this is the monolithic-inline anti-pattern the rubric penalizes.

2 / 5

Total

11

/

20

Passed

Description

66%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 solid, domain-specific description with a clear 'what' and good natural keywords, held back by a missing explicit 'Use when...' clause and a few missing natural trigger terms. Distinctiveness is good thanks to the Radix naming.

Suggestions

Append an explicit trigger clause, e.g. "Use when the user mentions Radix, headless/unstyled components, building a React component library, or migrating from a styled library like MUI."

Add natural synonyms users actually say — "React", "unstyled components", "headless UI", and common component names (Dialog, Dropdown, Tabs, Tooltip) — to strengthen trigger matching.

Name one or two more concrete actions (e.g., "implement controlled vs. uncontrolled state, compose compound components") to round out coverage.

DimensionReasoningScore

Specificity

The description lists several concrete capability areas — "Build accessible design systems with Radix UI primitives", "Headless component customization, theming strategies, and compound component patterns" — naming the domain plus multiple specific actions. It is not a 5 because the actions are capability categories rather than fully concrete operations (e.g., no mention of building specific components like Dialog or Dropdown, or migrating from styled libraries), leaving minor gaps in coverage.

4 / 5

Completeness

The "what" is clear and specific, but the description contains no "Use when..." clause or equivalent explicit trigger guidance; per the rubric guidelines, a missing 'when' caps completeness at 3. It is not a 2 because the 'what' half is concrete rather than vague.

3 / 5

Trigger Term Quality

Good natural keyword coverage: "Radix UI", "design systems", "accessible", "theming", "component" — terms a user needing this skill would plausibly say. Not a 5 because common variations are missing: "React", "unstyled components", "headless UI", and specific component names (Dialog, Dropdown, Tabs) that users often mention when asking for help.

4 / 5

Distinctiveness Conflict Risk

"Radix UI primitives" carves out a clear niche with distinct triggers, and the headless/unstyled framing separates it from generic component-library skills. Not a 5 because "design systems" and "theming strategies" are broad terms that could overlap with general design-system, Tailwind, or accessibility skills.

4 / 5

Total

15

/

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

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

Path

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