noklip-io/agent-skills
Overview
This skill documents the Base UI version of shadcn/ui and guides using its styled, copy-and-own components built on Base UI primitives. It helps you find docs, setup instructions, theming, forms, registries, and CLI guidance tailored to the Base UI stack. Use it when you need concrete patterns for composition, theming, or integrating forms and registries with shadcn's Base UI approach.
How this skill works
The skill maps key reference pages into a clear start sequence: overview, components index, install/CLI steps, theming and dark-mode guidance, forms integrations, registries, blocks, composition patterns, examples, MCP guidance, and changelog. It inspects which area you need (component, install, theming, forms, or CLI) and points to the precise reference resource and actionable rules for Base UI usage. It emphasizes the composition rule (render/useRender) and copy-and-own workflow for styled components.
When to use it
- You need the Base UI variant of shadcn/ui component docs or examples.
- Setting up a project with the shadcn Base UI stack or running the shadcn CLI for Base UI.
- Designing or applying theming and dark-mode tokens for Base UI components.
- Implementing forms and integrating with React Hook Form or TanStack Form using shadcn conventions.
- Creating or maintaining component registries, blocks, or MCP server workflows for Base UI.
Best practices
- Start with the overview and component index to scope your work before implementing components.
- Follow copy-and-own: copy component code and adapt styles/tokens instead of editing upstream templates.
- Adhere to the Base UI composition rule: prefer render/useRender for render-prop substitution and compound subcomponents.
- Use the provided theming and dark-mode guidance to keep tokens consistent across components.
- Consult the components.json and registry schemas when configuring the CLI or publishing registry items.
Example use cases
- Add a shadcn Base UI dialog component to a project and adapt tokens for dark mode.
- Run the shadcn CLI to scaffold Base UI components and wire them into your registry.json.
- Implement form fields with React Hook Form following the forms-integrations patterns for validation and controlled inputs.
- Create a blocks workflow that composes multiple Base UI components for a page builder.
- Migrate a Radix-targeted pattern to Base UI using the conversion guidance in the overview reference.
FAQ
Use render/useRender and compound subcomponents—prefer render-prop substitution over other render approaches.
Where do I start when adding a Base UI component to a project?
Follow the start sequence: overview, components index, installation/CLI, theming, forms, then examples; this ensures consistent setup and tokens.
5 skills
This skill helps you navigate and apply Base UI patterns from shadcn/ui, accelerating component usage, theming, and forms integration.
This skill helps you navigate and reference Base UI documentation, components, and patterns to implement accessible, composable React UI efficiently.
This skill helps you adopt React 19 patterns and deprecations, guiding component and hook updates for server-first rendering and compiler-assisted optimization.
This skill helps you implement web animations with GSAP for tweens, timelines, and scroll-based effects across components and pages.
This skill provides vanilla Three.js reference and patterns to quickly build 3D scenes and optimize rendering.
