What is Base UI skill used for?

To locate and apply Base UI reference materials, docs, and examples for components, styling, composition, and utilities.

Where are the key docs located?

In the references folder (overview.md, components.md, styling.md, composition.md, customization.md, animation.md, forms.md, typescript.md, utils.md, edge-cases.md, examples.md, links.md).

How should I use this skill in workflow?

Identify the component, consult the relevant reference, check edge cases, and review issues/releases before shipping.

base-ui

npx machina-cli add skill noklip-io/agent-skills/base-ui --openclaw

Files (1)

SKILL.md

2.2 KB

Base UI

Overview

Use this skill as a navigation hub for Base UI. Load the specific reference files when needed.

Start Here

Read references/overview.md for install, portal isolation, iOS 26 Safari, and LLM docs access.
Pick components from references/components.md.
Choose guidance by need: styling, composition, customization, animation, forms, TypeScript, or utils.

Reference Map

references/overview.md: install, portals, iOS 26 Safari, LLM docs, project context.
references/components.md: full component and utility index with .md doc links.
references/styling.md: className/state, data attributes, CSS variables, style prop, Tailwind/CSS Modules/CSS-in-JS patterns.
references/composition.md: render prop usage, ref forwarding, nesting render props.
references/customization.md: Base UI events, eventDetails, cancel/allowPropagation, preventBaseUIHandler, controlled vs uncontrolled.
references/animation.md: data attributes, transitions vs animations, Motion/AnimatePresence, keepMounted, getAnimations.
references/forms.md: Form/Field patterns, constraint validation, server-side errors, RHF/TanStack integration.
references/typescript.md: Props/State namespaces, ChangeEventDetails/Reason, actionsRef types, useRender types.
references/utils.md: CSPProvider, DirectionProvider/useDirection, mergeProps/mergePropsN, useRender patterns.
references/edge-cases.md: common pitfalls and fixes.
references/examples.md: concise, runnable examples.
references/links.md: issues and changelog entry points.

Use Pattern

Identify the component or utility.
Read the component docs in references/components.md.
Pull in the relevant handbook or utility reference.
Confirm edge cases in references/edge-cases.md.
Use references/links.md for issues and release notes before shipping.

Source

git clone https://github.com/noklip-io/agent-skills/blob/main/skills/base-ui/SKILL.mdView on GitHub

Overview

Base UI provides unstyled, accessible React components, utilities, and form helpers. This skill acts as a navigation hub to locate reference files, docs, and examples for styling, composition, animation, and types across Base UI.

How This Skill Works

Load the specific reference files from the skill's map (e.g., references/overview.md, references/components.md). Use the guidance sections for styling, composition, customization, animation, forms, TypeScript typing, and utilities. Check edge cases and release notes before shipping.

When to Use It

When implementing Base UI components, portals, or styling/state hooks.
When working with render-prop composition, ref forwarding, or eventDetails customization.
When configuring animations, transitions, or motion with Motion/AnimatePresence.
When building forms, validation, or server-side error handling.
When checking docs, issues, or release notes for changes or guidance.

Quick Start

Step 1: Identify the component or utility.
Step 2: Read the component docs in references/components.md.
Step 3: Review edge-cases and release notes in references/edge-cases.md and references/links.md before shipping.

Best Practices

Follow the Reference Map and read the relevant reference (styling, composition, customization, animation, forms, or utils).
Consult edge-cases.md for known pitfalls and fixes.
Use references/links.md for issues and changelog entries before shipping.
Prioritize accessibility and CSP/RTL utilities as highlighted in docs.
Leverage the Start Here guidance to pick the right component docs.

Example Use Cases

Building a portal-based component with isolation using references/overview.md.
Styling a component with className/state data attributes from references/styling.md.
Implementing render-prop composition with proper ref forwarding from references/composition.md.
Creating a strongly-typed form with RHF/TanStack integration via references/forms.md and references/typescript.md.
Auditing an existing Base UI implementation for edge-cases and release notes.

Frequently Asked Questions

Add this skill to your agents