CtrlK
BlogDocsLog inGet started
Tessl Logo

base-ui-react

MUI Base UI unstyled React components with Floating UI. Use for accessible components, Radix UI migration, render props API, or encountering positioning, popup, v1.0 rc / pre-GA issues.

62

Quality

73%

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/base-ui-react/skills/base-ui-react/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

63%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 copy-paste component code and clear quick-start sequencing plus guardrail checklists, but it is weakened by redundant repeated examples and a significant progressive-disclosure defect: it advertises a non-existent templates/ directory and a placeholder reference file. Tightening the duplication and fixing the dangling bundle references would materially raise the score.

Suggestions

Create the advertised `templates/` directory (Accordion.tsx, Dialog.tsx, NumberField.tsx, Popover.tsx, Select.tsx, Tooltip.tsx, migration-example.tsx) or remove the `templates/` section and the `templates_included: 7` metadata claim to stop directing users to non-existent files.

Replace the TODO-placeholder `references/example-reference.md` with real component examples and patterns, or drop it from the Resources list.

Remove the duplicated Dialog/Select code from "Common Use Cases" (already shown in Quick Start) and collapse the mirrored Always/Never rule pairs into a single checklist to improve conciseness.

DimensionReasoningScore

Conciseness

Quotes "## Common Use Cases" restate the Dialog/Select examples already shown in "## Quick Start", and the "Always Do" / "Never Do" lists mirror each other (e.g. "Use Portal" vs "Never skip Portal"); the body is mostly efficient but the repeated examples and paired lists could be tightened.

3 / 5

Actionability

Quotes "bun add @base-ui-components/react" and the complete Dialog TypeScript import/composition block are copy-paste ready; not a 5 because several highlighted components (NumberField, Popover, Accordion) have no code example and some blocks (Select in Quick Start, the Tailwind snippet) are JSX fragments rather than full components.

4 / 5

Workflow Clarity

Quotes the "## Quick Start" install-then-compose sequence and the "Critical Rules" Always/Never checklists give clear guardrails; not a 5 because there are no explicit validation steps or feedback loops, though no destructive/batch operation here strictly requires them.

4 / 5

Progressive Disclosure

Quotes "Load `references/setup-guide.md` for complete examples" and the "Resources" section signal references clearly, but the body lists a "templates/" directory with 7 specific files (e.g. "Accordion.tsx", "Dialog.tsx") that do not exist, and "example-reference.md" is a TODO placeholder stub; these broken/empty references plus inline duplication of examples keep it below good structure.

3 / 5

Total

14

/

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.

The description clearly states what Base UI is and gives an explicit 'Use for' clause with several concrete trigger phrases, achieving strong completeness and good specificity. Distinctiveness and trigger-term coverage are solid but leave room for synonyms and more component-specific terms.

DimensionReasoningScore

Specificity

Quotes "accessible components, Radix UI migration, render props API" and "positioning, popup, v1.0 rc / pre-GA issues" list several specific capabilities/use-cases; not a 5 because items are framed as categories rather than a comprehensive list of concrete actions and individual components (Dialog/Select) are not named.

4 / 5

Completeness

Quotes "MUI Base UI unstyled React components with Floating UI" give a clear what, and "Use for accessible components, Radix UI migration, render props API, or encountering positioning, popup, v1.0 rc / pre-GA issues." is an explicit when-clause with concrete trigger phrases, matching the anchor for both what and when.

5 / 5

Trigger Term Quality

Quotes "accessible components", "Radix UI migration", "render props API", "positioning", "popup" are natural terms a user would say; not a 5 because some synonyms and natural phrasings (e.g. "accessible dialog/select", "headless UI") are absent.

4 / 5

Distinctiveness Conflict Risk

Quotes "MUI Base UI", "Radix UI migration", "render props API", "v1.0 rc / pre-GA issues" carve a mostly distinct niche; not a 5 because "accessible components" and "Radix UI migration" overlap territory a Radix or generic headless-UI skill could claim.

4 / 5

Total

17

/

20

Passed

Validation

93%

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

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_field

'metadata' should map string keys to string values

Warning

Total

15

/

16

Passed

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