base-ui
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.mdfor 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.mdfor issues and release notes before shipping.
More from noklip-io/agent-skills
three-js
|
71react-19
>
58gsap
Use when implementing web animations, timeline sequencing, scroll-triggered animations, SVG animations, layout transitions, or using GSAP, ScrollTrigger, ScrollSmoother, SplitText, Flip, DrawSVG, MorphSVG, MotionPath, or @gsap/react useGSAP hook.
51theatre-js
Use when implementing motion design, timeline animations, visual animation editors, animating Three.js/R3F scenes, creating keyframe animations, or using Theatre.js, @theatre/core, @theatre/studio, @theatre/r3f, theatric, or building animation tooling for the web.
37payload
Use when working with Payload CMS projects (payload.config.ts, collections, fields, hooks, access control, Payload API). Use when debugging validation errors, security issues, relationship queries, transactions, or hook behavior.
36nuqs
Use when implementing URL query state in React, managing search params, syncing state with URL, building filterable/sortable lists, pagination with URL state, or using nuqs/useQueryState/useQueryStates hooks in Next.js, Remix, React Router, or plain React.
33