Guides shadcn/ui CLI usage, component installation, theming, and custom registry workflows.
npx skills add https://github.com/ridhijain709/AIPORSCHE --skill shadcn-ridhijain709
Please help me install this Agent Skill. Skill: shadcn Source: https://github.com/ridhijain709/AIPORSCHE/tree/main/.agents/skills/shadcn Command: npx skills add https://github.com/ridhijain709/AIPORSCHE --skill shadcn-ridhijain709
init -d), adding components, searching registries, building custom registries, and CLI v4 commands like docs, view, info, and migrate. - Theming & Design Guidance: Explains CSS variable theming with Tailwind v4, dark mode setup, presets, and composition patterns for dashboards, settings pages, and CRUD interfaces. - Gotcha Prevention: Documents known issues such as the Geist font circular-reference bug after init, the missing Avatar size prop, and AI Elements incompatibility with Base UI. - Use Case: When scaffolding a new Next.js dashboard, use this Skill to initialize shadcn non-interactively with the correct base library, add the right components, and apply a consistent dark-mode design system without hitting common configuration traps. ## Quick Start Ask the agent to initialize shadcn/ui in this project non-interactively and add the button, card, and dialog components.High-intent search queries and answers about installing and using this skill.
Use `npx shadcn@latest init -d` to apply defaults and skip all interactive prompts. The `-y` flag alone is insufficient because it still prompts for component library selection, so always prefer `-d` for CI or agent-driven setups.
Run `npx shadcn@latest add` followed by component names, such as `npx shadcn@latest add button dialog card`. You can also add from custom registries with namespace syntax like `@acme/header` or from a full registry URL.
Radix UI is the default and recommended base, especially if the project uses AI Elements, which rely on Radix-specific APIs and produce type errors with Base UI. Choose Base UI only with `npx shadcn@latest init --base base-ui` when you have a specific reason.
The init command can introduce a circular `--font-sans: var(--font-sans)` reference in Tailwind v4's `@theme inline`, which resolves at parse time. Fix it by using literal font family names in `@theme inline` and moving font variable classNames from `<body>` to `<html>`.
No, the Avatar component has no `size` variant prop. Control dimensions with Tailwind classes such as `className="h-12 w-12"`, or add your own size variants via `cva` in the component source.
Define a `registry.json` describing your items with types like `registry:ui`, `registry:base`, or `registry:font`, then run `npx shadcn@latest build` to output JSON files. Consumers install items with `npx shadcn@latest add` pointing at your hosted registry URL.
Tonybleything76Scaffold React and Next.js projects with TypeScript, Tailwind CSS, and authentication.
brainbrewlabsPublishes documentation to GitHub Pages, Vercel, or Netlify from source docs and build outputs.
yanko-belovSeparate data fetching, business logic, and presentation into hooks, functions, and components.
partme-aiGuide Ant Design React component usage with TypeScript and design system support.