Build accessible, composable UI with @base-ui/react primitives and project styling tokens.
SkillScore100Maintained
Automatic
◆Frontend / UI pack
Last verified 8/20/2026
What it changes
Passed 22 of 22 test cases with the skill, and 18 of 22 without it.
Without skill82%
With skill100%
Checks it passed that the model alone missed
Verifies the presence of @base-ui/react in package.json
Leverages built-in primitive event handlers rather than custom keyboard listeners
Advises against mixing multiple primitive library systems without explicit intent
and 1 more in the full report
4 fixed18 passed either way0 still failing0 broke
Pass-rate lift
+18 pp
Tokens
+3%
Agent turns
0%
Response time
-34%
Model gemini-3.6-flashMeasured 8/20/2026v1 · latest is v222 of 22 cases passed with skill
Tokens, turns and time describe resource use, not a dollar price.
This benchmark measured an earlier version of the skill.
See it in action
One of 4 test cases the skill fixed. Same model, same prompt, with and without the skill.
1 of 4
Prompt
What dependency check should be performed on package.json before adding new Base UI primitive wrappers to a repository?
What was checked, without and with the skill
Checked
Without skill
With skill
Verifies the presence of @base-ui/react in package.json
Missed
Passed
case-08 · gemini-3.6-flash · 8/20/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md92 linessingle file
Base UI Primitives - Skill
Name:base-uiPurpose: Build accessible, composable UI with @base-ui/react primitives and project styling tokens.
Use this when creating or refining unstyled primitive components and behavior-heavy UI.
Applies when: Building overlays, menus, form controls, or custom component APIs with Base UI.
Do not use when: You are using copied-in shadcn components as the primary implementation path (use moai-library-shadcn first).
Rules
Docs first: Start from reference-links.md, then read the exact component page before writing code.
Behavior before styling: Preserve Base UI interaction and accessibility behavior before adding project styles.
Styling agnostic: Keep logic and visuals decoupled; prefer wrappers and class composition over forking behavior code.
Tailwind compatibility: Base UI examples target Tailwind v4. If a target package uses v3, convert unsupported utilities to v3-safe equivalents.
Composable APIs: Favor controlled/uncontrolled patterns, small props, and clear slots over monolithic components.
A11y is non-negotiable: Keep labels, descriptions, focus handling, keyboard support, and ARIA relationships intact.
Styled wrapper contracts: Preserve state-based className/style, render, refs, and cancelable events. Use packages/ui/lib/base-ui.ts to merge a Base UI class callback after receiving state; ordinary cn/CVA calls do not evaluate it.
Forms: Keep TanStack Form as the validation/submission owner. Base UI Field can supply accessible relationships without adding a second Form state system. Group labels name a group; they are not labels for Select/Combobox controls.
Workflow
Confirm @base-ui/react is present in the target workspace package.json.
Open the exact docs page from reference-links.md for the primitive you need.
Implement behavior with Base UI primitives first, then layer project styles (cn, tokens, Tailwind).
Convert any Tailwind v4-only example classes if the target workspace is still on Tailwind v3.
Validate keyboard navigation, focus states, and screen-reader output.
Run local quality gates (typecheck/lint/tests relevant to changed scope).
Checklists
Implementation checklist
Primitive choice matches the interaction model (dialog/menu/select/etc.)
Controlled/uncontrolled behavior is explicit and testable
Styling is layered without breaking interaction semantics
Tailwind classes are compatible with the target package version
Labels, descriptions, and focus behavior are preserved