Agent skill

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.

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/shadcn-base

SKILL.md

shadcn/ui (Base UI) — shadcn-base

Overview

This skill documents the Base UI version of shadcn/ui. Use it to navigate the official Base UI docs and the shadcn/ui Base UI component pages.

shadcn/ui is not headless. It provides styled, copy-and-own components built on top of Base UI’s headless primitives. Composition follows compound components, composition-over-inheritance, and variant-driven styling.

Primary docs:

Important:

  • Base UI vs Radix docs and the conversion rule are defined in references/overview.md. Use that guidance instead of the Radix components index.

Start Here

  1. Read references/overview.md for scope and doc entry points.
  2. Use references/components.md to find the component you need.
  3. Use references/installation.md or references/cli.md to set up a project.
  4. Use references/theming.md and references/dark-mode.md for design tokens.
  5. Use references/components-json.md for CLI config details.
  6. Use references/forms.md for field patterns and references/forms-integrations.md for form libs.
  7. Use references/registry.md and references/registry-schema.md for registries.
  8. Use references/blocks.md for blocks workflows.
  9. Use references/composition-pattern.md for the composition paradigm and Base UI render rule.
  10. Use references/examples.md for render and useRender patterns.
  11. Check references/changelog.md before shipping.

Composition Pattern (Short)

Base UI + shadcn/ui uses copy-and-own styled components on headless primitives, composed via compound subcomponents and render-prop substitution (render / useRender). Reference: references/composition-pattern.md.

Reference Map

  • references/overview.md: what shadcn/ui is and official doc entry points.
  • references/components.md: full component list from llms.txt.
  • references/installation.md: create/init and per-framework installation links.
  • references/cli.md: CLI commands and options.
  • references/components-json.md: components.json schema and key fields.
  • references/theming.md: theming and design tokens.
  • references/dark-mode.md: dark mode guidance and framework-specific pages.
  • references/forms.md: field usage patterns and validation structure.
  • references/forms-integrations.md: React Hook Form and TanStack Form pages.
  • references/registry.md: registry docs.
  • references/registry-schema.md: registry.json and registry-item.json schema details.
  • references/blocks.md: blocks library workflows.
  • references/composition-pattern.md: Base UI composition rule (render/useRender only).
  • references/examples.md: render and useRender examples (Base UI).
  • references/mcp.md: MCP server guidance.
  • references/changelog.md: release notes.
  • references/links.md: quick links index.

Recommended Agent Skills

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

noklip-io/agent-skills

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.

1 0
Explore
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

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