Agent skill

base-ui

Base UI reference and workflows for @base-ui/react (unstyled, accessible React components, composition utilities, and form helpers). Use when implementing Base UI components, portals, styling/state hooks, render-prop composition, eventDetails customization, animations, forms/validation, TypeScript typing, CSP/RTL utilities, or checking Base UI docs, issues, or releases.

View SKILL.md on GitHub Repository
Stars 1
Forks 0

Install this agent skill to your Project

npx add-skill https://github.com/noklip-io/agent-skills/tree/main/skills/base-ui

SKILL.md

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

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

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

noklip-io/agent-skills

three-js

This skill should be used when the user asks to "create a 3D scene", "add a mesh", "implement OrbitControls", "load a GLTF model", "add bloom post-processing", "write a custom shader", "create particle effects", "optimize Three.js performance", "use WebGPU", "add shadows", "animate a model", or mentions Three.js, threejs, WebGL, WebGPU, GLTF, raycaster, shader material, PBR material, or post-processing effects. IMPORTANT: This skill is for VANILLA Three.js (imperative JavaScript). For React Three Fiber (@react-three/fiber, R3F, drei), check the `r3f-best-practices` skill, although three-js skills helps when working with R3F since R3F is a React renderer for Three.js. Provides complete Three.js reference for 3D web graphics including scene setup, geometry, materials, textures, lighting, cameras, loaders, animation, controls, interaction, shaders, post-processing, performance optimization, TSL/node materials, WebGPU, physics, and VR/XR integration.

1 0
Explore
noklip-io/agent-skills

nuqs

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.

1 0
Explore
noklip-io/agent-skills

payload

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.

1 0
Explore
noklip-io/agent-skills

gsap

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.

1 0
Explore
noklip-io/agent-skills

shadcn-base

Use when you need the Base UI version of shadcn/ui components, docs, CLI, theming, forms, registries, or MCP guidance for shadcn’s Base UI stack.

1 0
Explore
noklip-io/agent-skills

theatre-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.

1 0
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results