CtrlK
BlogDocsLog inGet started
Tessl Logo

base-ui-react

Implement, refactor, review, or explain `@base-ui/react` in React applications. Use when working with Base UI components or utilities.

57

Quality

64%

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

Quality

Content

67%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

This is a well-structured skill that efficiently organizes Base UI guidance into a clear workflow with good progressive disclosure to reference files. Its main weakness is the lack of any concrete code examples — for a React component library skill, at least one or two executable snippets showing correct component composition, styling, or form wiring would significantly improve actionability. The workflow and guardrails sections are strong and demonstrate domain expertise.

Suggestions

Add 1-2 concrete code examples showing common patterns (e.g., composing a Field with a form control, or using render/mergeProps for composition) to improve actionability.

Add an explicit feedback loop in the validation step: e.g., 'If validation fails → check version → consult releases.md → fix and re-validate' to strengthen workflow clarity.

DimensionReasoningScore

Conciseness

The content is efficient and well-organized, assuming Claude's competence throughout. Minor verbosity in the workflow classification section (listing 8 task types with brief descriptions) and some of the defaults/guardrails could be slightly tighter, but overall every section earns its place.

4 / 5

Actionability

The skill provides structured guidance with specific component names, props, and patterns to follow, but lacks any executable code examples. All instructions are descriptive ('prefer X over Y', 'check accessible names') rather than showing concrete code snippets demonstrating correct usage, which limits copy-paste actionability.

3 / 5

Workflow Clarity

The 5-step workflow is clearly sequenced (classify → load references → check constraints → build → validate) with a solid validation step at the end covering accessibility, focus, and form behavior. Minor gap: no explicit feedback loop for what to do when validation fails beyond comparing against installed version.

4 / 5

Progressive Disclosure

The skill clearly references 5 separate reference files with specific guidance on when to load each one, following a one-level-deep pattern. However, no bundle files were provided to verify these references exist, and the skill itself could benefit from a slightly more concise overview section with clearer navigation signaling (e.g., bold links).

4 / 5

Total

15

/

20

Passed

Description

62%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 adequately identifies the specific library (@base-ui/react) and includes a 'Use when' clause, making it functional for skill selection. However, the actions listed are generic development verbs rather than Base UI-specific capabilities, and the trigger terms lack component-level specificity that would help differentiate it from other React UI library skills.

Suggestions

Add specific Base UI component names or categories as trigger terms (e.g., 'unstyled components', 'headless UI primitives', 'Menu, Popover, Dialog, Select components').

Replace generic verbs with more concrete actions specific to Base UI, such as 'customize unstyled components, compose accessible primitives, migrate from MUI to Base UI'.

DimensionReasoningScore

Specificity

Names the domain (Base UI / React) and lists several actions (implement, refactor, review, explain), but these are generic software development verbs rather than concrete, domain-specific capabilities. It doesn't describe what Base UI components or utilities it covers.

3 / 5

Completeness

Has both 'what' (implement, refactor, review, or explain @base-ui/react) and 'when' ('Use when working with Base UI components or utilities'). The 'when' clause is present but fairly generic and could be more specific about trigger scenarios.

4 / 5

Trigger Term Quality

Includes '@base-ui/react', 'Base UI', and 'React applications' as trigger terms, which are relevant. However, it misses natural user phrases like specific component names (e.g., 'menu', 'popover', 'dialog'), 'unstyled components', 'headless UI', or alternative phrasings users might use.

3 / 5

Distinctiveness Conflict Risk

The explicit mention of '@base-ui/react' as a package name makes it fairly distinct and unlikely to conflict with general React skills or other UI library skills. Minor overlap risk with generic React component skills or other UI framework skills like MUI/Material UI.

4 / 5

Total

14

/

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.

Validation11 / 11 Passed

Validation for skill structure

No warnings or errors.

Repository
aiko-atami/baseui-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.