CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

base-ui-react

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

Quality

85%

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

SKILL.md
Quality
Evals
Security

Quality

Content

85%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, lean skill body: a clear five-step workflow with explicit validation and a version-drift recovery path, concrete named APIs throughout, and an accurate progressive-disclosure structure whose reference files all exist and carry precise load conditions. The only deductions are minor: a duplicated time-sensitive version line in the body and no inline executable snippet for the most common cases.

DimensionReasoningScore

Conciseness

The body is lean, imperative, and assumes Claude's React and CSS knowledge with no concept explanations. The one "Base UI `v1.4.1`, released on April 20, 2026" line is time-sensitive version/date information outside a deprecated or old-patterns section and duplicates the baseline already stated in `references/releases.md`, which keeps it below the top anchor.

4 / 5

Actionability

Guidance is concrete and directive: named APIs (`render`, `mergeProps`, `useRender`, `Field`, `Portal`) and specific checks like "Inspect `package.json` for the installed `@base-ui/react` version" and "Check hidden-input submission and validation bubbles for composite form controls". It stops short of fully copy-paste-ready examples for the most common cases since snippets live in the reference files rather than inline.

4 / 5

Workflow Clarity

The five-step workflow (classify → load references → check local constraints → build in order → validate) ends in an explicit validation checklist (accessible names, focus entry/return, keyboard navigation, close behavior, hidden-input submission) plus an error-recovery heuristic: "If behavior differs from the docs, compare it against the installed package version before assuming a library bug". No destructive or batch operations apply, so no cap is triggered.

5 / 5

Progressive Disclosure

The body is a genuine overview: each of the six reference files is listed with a clear load condition (e.g., "Load `references/tailwind-v3-compat.md` whenever the target project uses Tailwind CSS v3"), and all six files exist with real, one-level-deep content. The Defaults and Guardrails sections are appropriately compact summaries that belong in the main file.

5 / 5

Total

18

/

20

Passed

Description

78%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 description: third-person voice, a clear set of concrete actions, and an explicit "Use when..." clause tied to the named package. Its main limitation is that the when-clause mirrors the what instead of adding varied trigger phrases, which slightly limits trigger coverage and completeness.

DimensionReasoningScore

Specificity

"Implement, refactor, review, or explain `@base-ui/react` in React applications" lists four concrete actions with a precisely named domain. Minor gaps in coverage (e.g., styling or migrating are not named as actions) keep it below the comprehensive anchor.

4 / 5

Completeness

Both parts are explicit: the "what" is the four actions (implement, refactor, review, explain) and the "when" is "Use when working with Base UI components or utilities". The when-clause is somewhat circular — it restates the domain rather than adding concrete trigger phrases — so it does not fully match the top anchor.

4 / 5

Trigger Term Quality

Includes the natural terms users would say — "Base UI", "@base-ui/react", "React applications", "components", "utilities". A few natural terms are missing, such as "headless", "component library", or "UI primitives", so it falls short of comprehensive synonym coverage.

4 / 5

Distinctiveness Conflict Risk

Naming the specific package `@base-ui/react` carves out a clear niche with distinct triggers; only skills targeting other React UI libraries could plausibly overlap, and the package name disambiguates them.

5 / 5

Total

17

/

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

aiko-atami/baseui-skills

Path

skills/base-ui-react/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.