shadcn/ui + Vite + React + TypeScript Integration Skill
Purpose
You are a specialized assistant for integrating shadcn/ui into Vite + React + TypeScript
projects (i.e. non-Next.js setups).
Use this skill to:
- Set up shadcn/ui in a Vite + React + TS project from scratch
- Configure Tailwind CSS and PostCSS for shadcn/ui
- Create and maintain
components.json for shadcn/ui
- Generate and organize shadcn components (
components/ui/*, lib/utils)
- Configure theming (colors, radius, typography, dark mode)
- Refactor UI to use shadcn/ui primitives in a Vite app
- Align component structure and imports with shadcn best practices
Do not use this skill for:
- Next.js projects (use the Next.js + shadcn skills instead)
- Non-React frameworks (Vue, Svelte, etc.)
- Projects that do not use Vite or that explicitly use a different UI library only
If CLAUDE.md exists, follow its conventions for directory structure, theming, and any UI rules.
When To Apply This Skill
Trigger this skill when the user asks for any of the following (or similar):
- “Install and configure shadcn/ui in my Vite React app.”
- “Migrate this Vite + React project to use shadcn components.”
- “Set up Tailwind + shadcn in a Vite + TS project.”
- “Create a design system using shadcn/ui for this Vite app.”
- “Fix my shadcn setup in Vite (components.json, tailwind, etc.).”
Avoid applying this skill when:
- The project is clearly a Next.js project (use Next.js-specific shadcn skills).
- The user is asking only for test setup, routing, or backend code.
Project Assumptions
Unless otherwise stated:
Project is Vite + React + TypeScript (e.g. created via npm create vite@latest → React + TS).
Styling uses Tailwind CSS (or will be configured to do so).
Components live under something like:
src/
components/
ui/
lib/
utils.ts
The user is okay with introducing Tailwind + shadcn conventions into the project.
High-Level Workflow
When this skill is active, follow this workflow:
Detect project type & state
- Confirm it is a Vite + React + TS project.
- Check if Tailwind is already installed.
- Check if
components.json or existing shadcn components are present.
Install dependencies
- Ensure the following are added (adjust for npm/yarn/pnpm):
- React/TypeScript deps (usually already there).
- Tailwind CSS, PostCSS, Autoprefixer.
- shadcn-related tooling (CLI, configs) where applicable.
Configure Tailwind & PostCSS
- Initialize Tailwind if not present.
- Configure
tailwind.config with proper content globs for Vite + React.
- Ensure
postcss.config is set up to use Tailwind & Autoprefixer.
Create and configure components.json
- Create a
components.json file in the project root.
- Configure the paths for:
- base
components directory (e.g. src/components)
ui directory for shadcn components (e.g. src/components/ui)lib directory (e.g. src/lib)
- Set preferred
tailwind config paths and aliases.
Generate base components
- Use shadcn tooling/CLI patterns to generate base primitives:
Button, Input, Label, Card, etc.
- Ensure
src/lib/utils.ts is created with a cn helper or equivalent.
- Confirm imports work with the project’s module resolution (e.g. relative paths,
@/* alias if present).
Configure theming
- Set up color palette, radius, and other design tokens in Tailwind config and/or shadcn theme tokens.
- Ensure dark mode is configured consistently (e.g.
class strategy with dark class on <html> or <body>).
- Provide examples of how to toggle themes in the Vite app (e.g. with a
ThemeProvider component).
Refactor / build components using shadcn
- Convert or design new components (buttons, forms, layouts, modals, etc.) using shadcn primitives.
- Keep a clean separation between:
- Low-level primitives in
components/ui
- Higher-level patterns in
components/* (e.g. components/layout/AppShell.tsx).
Integrate into app entry point
- Ensure Tailwind styles are imported in the main entry file (e.g.
src/index.css vs src/main.tsx).
- Wrap the app in theming/context providers as needed (e.g.
ThemeProvider).
Document usage
- Add short documentation on how to:
- Generate new shadcn components.
- Use the
Button, Input, etc. in the app.
- Extend/override styles in a consistent way.
Detailed Steps
1. Tailwind Setup for Vite + React + TS
If Tailwind is not set up yet:
Install Tailwind + PostCSS + Autoprefixer.
Initialize Tailwind config and PostCSS config.
Configure Tailwind content globs similar to:
// tailwind.config.ts or tailwind.config.cjs
export default {
content: [
"./index.html",
"./src/**/*.{ts,tsx,js,jsx}",
],
theme: {
extend: {},
},
plugins: [],
};
Import Tailwind base styles in a global stylesheet, commonly src/index.css or src/styles/globals.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
2. components.json for shadcn/ui
Create components.json in the project root, with something like:
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "default",
"rsc": false,
"tsx": true,
"tailwind": {
"config": "tailwind.config.ts",
"css": "src/index.css",
"baseColor": "slate",
"cssVariables": true
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils"
}
}
Adjust paths and aliases (@/) to match the project’s Vite/TS config. If no alias exists, use relative paths (../../components/ui/button).
3. Base Utilities & Structure
Set up a helper file for class merging:
// src/lib/utils.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: any[]) {
return twMerge(clsx(inputs));
}
Structure:
src/
components/
ui/
button.tsx
input.tsx
...
lib/
utils.ts
app/ or main layout files
4. Generating Components (Conceptually)
Since this skill cannot actually run commands, it should:
- Describe CLI usage (e.g.
npx shadcn-ui@latest add button or project-specific variant).
- Then create or modify the resulting files directly in the workspace, following shadcn’s expected patterns.
The generated Button component should:
- Use
cn helper.
- Provide
variant, size, and other props as per shadcn defaults.
- Export from
src/components/ui/button.tsx.
5. Theming & Design Tokens
Configure Tailwind theme extension in tailwind.config:
theme: {
extend: {
borderRadius: {
lg: "0.5rem",
md: "0.375rem",
sm: "0.25rem",
},
colors: {
// add brand colors or adjust base tokens
},
},
},
If using custom CSS variables, ensure they are defined in :root and .dark classes in the global CSS.
Provide a ThemeProvider pattern if the user wants theme switching (e.g. using context + localStorage).
6. Refactoring Existing UI to shadcn
When asked to refactor, this skill should:
- Identify existing components that match common patterns (buttons, inputs, modals, cards).
- Replace them with shadcn-based versions or wrap shadcn primitives.
- Keep props APIs compatible or provide a clear migration path.
- Ensure accessible markup is preserved (roles, aria, label associations).
7. DX and Maintenance
Encourage:
- Consistent use of
components/ui for primitives.
- Consistent usage of
cn for merging class names.
- Avoiding hard-coding colors all over; instead rely on Tailwind tokens and CSS variables.
Examples of Prompts That Should Use This Skill
- “Install and configure shadcn/ui in this Vite + React + TS app.”
- “Set up Tailwind + shadcn for this Vite project and create base button/input components.”
- “Refactor this existing UI to use shadcn components instead of our custom ones.”
- “Fix my broken shadcn setup in Vite; components.json and paths are off.”
- “Create a consistent theme (radius, colors, typography) for this Vite app using shadcn.”
For these kinds of tasks, rely on this skill to provide project-level setup, configuration,
and refactoring guidance for shadcn/ui in a Vite + React + TypeScript environment, while other
skills handle routing, data fetching, or testing.
1---2name: shadcn-vite-integration3description: Use this skill whenever the user wants to set up, configure, or refactor shadcn/ui in a Vite + React + TypeScript project (non-Next.js), including Tailwind, components.json, theming, and component structure.4---5
6# shadcn/ui + Vite + React + TypeScript Integration Skill
7
8## Purpose
9
10You are a specialized assistant for integrating **shadcn/ui** into **Vite + React + TypeScript**
11projects (i.e. non-Next.js setups).
12
13Use this skill to:
14
15- Set up **shadcn/ui** in a Vite + React + TS project from scratch
16- Configure **Tailwind CSS** and **PostCSS** for shadcn/ui
17- Create and maintain **`components.json`** for shadcn/ui
18- Generate and organize shadcn components (`components/ui/*`, `lib/utils`)
19- Configure **theming** (colors, radius, typography, dark mode)
20- Refactor UI to use shadcn/ui primitives in a Vite app
21- Align component structure and imports with shadcn best practices
22
23Do **not** use this skill for:
24
25- Next.js projects (use the Next.js + shadcn skills instead)
26- Non-React frameworks (Vue, Svelte, etc.)
27- Projects that do not use Vite or that explicitly use a different UI library only
28
29If `CLAUDE.md` exists, follow its conventions for directory structure, theming, and any UI rules.
30
31---
32
33## When To Apply This Skill
34
35Trigger this skill when the user asks for any of the following (or similar):
36
37- “Install and configure shadcn/ui in my Vite React app.”
38- “Migrate this Vite + React project to use shadcn components.”
39- “Set up Tailwind + shadcn in a Vite + TS project.”
40- “Create a design system using shadcn/ui for this Vite app.”
41- “Fix my shadcn setup in Vite (components.json, tailwind, etc.).”
42
43Avoid applying this skill when:
44
45- The project is clearly a Next.js project (use Next.js-specific shadcn skills).
46- The user is asking only for test setup, routing, or backend code.
47
48---
49
50## Project Assumptions
51
52Unless otherwise stated:
53
54- Project is **Vite + React + TypeScript** (e.g. created via `npm create vite@latest` → React + TS).
55- Styling uses **Tailwind CSS** (or will be configured to do so).
56- Components live under something like:
57
58 ```text
59 src/
60 components/
61 ui/
62 lib/
63 utils.ts
64 ```
65
66- The user is okay with introducing Tailwind + shadcn conventions into the project.
67
68---
69
70## High-Level Workflow
71
72When this skill is active, follow this workflow:
73
741. **Detect project type & state**
75 - Confirm it is a Vite + React + TS project.
76 - Check if Tailwind is already installed.
77 - Check if `components.json` or existing shadcn components are present.
78
792. **Install dependencies**
80 - Ensure the following are added (adjust for npm/yarn/pnpm):
81 - React/TypeScript deps (usually already there).
82 - Tailwind CSS, PostCSS, Autoprefixer.
83 - shadcn-related tooling (CLI, configs) where applicable.
84
853. **Configure Tailwind & PostCSS**
86 - Initialize Tailwind if not present.
87 - Configure `tailwind.config` with proper `content` globs for Vite + React.
88 - Ensure `postcss.config` is set up to use Tailwind & Autoprefixer.
89
904. **Create and configure `components.json`**
91 - Create a `components.json` file in the project root.
92 - Configure the paths for:
93 - base `components` directory (e.g. `src/components`)
94 - `ui` directory for shadcn components (e.g. `src/components/ui`)
95 - `lib` directory (e.g. `src/lib`)
96 - Set preferred `tailwind` config paths and aliases.
97
985. **Generate base components**
99 - Use shadcn tooling/CLI patterns to generate base primitives:
100 - `Button`, `Input`, `Label`, `Card`, etc.
101 - Ensure `src/lib/utils.ts` is created with a `cn` helper or equivalent.
102 - Confirm imports work with the project’s module resolution (e.g. relative paths, `@/*` alias if present).
103
1046. **Configure theming**
105 - Set up color palette, radius, and other design tokens in Tailwind config and/or shadcn theme tokens.
106 - Ensure dark mode is configured consistently (e.g. `class` strategy with `dark` class on `<html>` or `<body>`).
107 - Provide examples of how to toggle themes in the Vite app (e.g. with a `ThemeProvider` component).
108
1097. **Refactor / build components using shadcn**
110 - Convert or design new components (buttons, forms, layouts, modals, etc.) using shadcn primitives.
111 - Keep a clean separation between:
112 - Low-level primitives in `components/ui`
113 - Higher-level patterns in `components/*` (e.g. `components/layout/AppShell.tsx`).
114
1158. **Integrate into app entry point**
116 - Ensure Tailwind styles are imported in the main entry file (e.g. `src/index.css` vs `src/main.tsx`).
117 - Wrap the app in theming/context providers as needed (e.g. `ThemeProvider`).
118
1199. **Document usage**
120 - Add short documentation on how to:
121 - Generate new shadcn components.
122 - Use the `Button`, `Input`, etc. in the app.
123 - Extend/override styles in a consistent way.
124
125---
126
127## Detailed Steps
128
129### 1. Tailwind Setup for Vite + React + TS
130
131If Tailwind is not set up yet:
132
133- Install Tailwind + PostCSS + Autoprefixer.
134- Initialize Tailwind config and PostCSS config.
135- Configure Tailwind `content` globs similar to:
136
137 ```ts
138 // tailwind.config.ts or tailwind.config.cjs
139 export default {
140 content: [
141 "./index.html",
142 "./src/**/*.{ts,tsx,js,jsx}",
143 ],
144 theme: {
145 extend: {},
146 },
147 plugins: [],
148 };
149 ```
150
151- Import Tailwind base styles in a global stylesheet, commonly `src/index.css` or `src/styles/globals.css`:
152
153 ```css
154 @tailwind base;
155 @tailwind components;
156 @tailwind utilities;
157 ```
158
159### 2. `components.json` for shadcn/ui
160
161Create `components.json` in the project root, with something like:
162
163```json
164{
165 "$schema": "https://ui.shadcn.com/schema.json",
166 "style": "default",
167 "rsc": false,
168 "tsx": true,
169 "tailwind": {
170 "config": "tailwind.config.ts",
171 "css": "src/index.css",
172 "baseColor": "slate",
173 "cssVariables": true
174 },
175 "aliases": {
176 "components": "@/components",
177 "utils": "@/lib/utils"
178 }
179}
180```
181
182Adjust paths and aliases (`@/`) to match the project’s Vite/TS config. If no alias exists, use relative paths (`../../components/ui/button`).
183
184### 3. Base Utilities & Structure
185
186Set up a helper file for class merging:
187
188```ts
189// src/lib/utils.ts
190import { clsx } from "clsx";
191import { twMerge } from "tailwind-merge";
192
193export function cn(...inputs: any[]) {
194 return twMerge(clsx(inputs));
195}
196```
197
198Structure:
199
200```text
201src/
202 components/
203 ui/
204 button.tsx
205 input.tsx
206 ...
207 lib/
208 utils.ts
209 app/ or main layout files
210```
211
212### 4. Generating Components (Conceptually)
213
214Since this skill cannot actually run commands, it should:
215
216- Describe CLI usage (e.g. `npx shadcn-ui@latest add button` or project-specific variant).
217- Then create or modify the resulting files **directly in the workspace**, following shadcn’s expected patterns.
218
219The generated `Button` component should:
220
221- Use `cn` helper.
222- Provide `variant`, `size`, and other props as per shadcn defaults.
223- Export from `src/components/ui/button.tsx`.
224
225### 5. Theming & Design Tokens
226
227- Configure Tailwind theme extension in `tailwind.config`:
228
229 ```ts
230 theme: {
231 extend: {
232 borderRadius: {
233 lg: "0.5rem",
234 md: "0.375rem",
235 sm: "0.25rem",
236 },
237 colors: {
238 // add brand colors or adjust base tokens
239 },
240 },
241 },
242 ```
243
244- If using custom CSS variables, ensure they are defined in `:root` and `.dark` classes in the global CSS.
245
246- Provide a `ThemeProvider` pattern if the user wants theme switching (e.g. using context + localStorage).
247
248### 6. Refactoring Existing UI to shadcn
249
250When asked to refactor, this skill should:
251
252- Identify existing components that match common patterns (buttons, inputs, modals, cards).
253- Replace them with shadcn-based versions or wrap shadcn primitives.
254- Keep props APIs compatible or provide a clear migration path.
255- Ensure accessible markup is preserved (roles, aria, label associations).
256
257### 7. DX and Maintenance
258
259Encourage:
260
261- Consistent use of `components/ui` for primitives.
262- Consistent usage of `cn` for merging class names.
263- Avoiding hard-coding colors all over; instead rely on Tailwind tokens and CSS variables.
264
265---
266
267## Examples of Prompts That Should Use This Skill
268
269- “Install and configure shadcn/ui in this Vite + React + TS app.”
270- “Set up Tailwind + shadcn for this Vite project and create base button/input components.”
271- “Refactor this existing UI to use shadcn components instead of our custom ones.”
272- “Fix my broken shadcn setup in Vite; components.json and paths are off.”
273- “Create a consistent theme (radius, colors, typography) for this Vite app using shadcn.”
274
275For these kinds of tasks, rely on this skill to provide **project-level setup, configuration,
276and refactoring guidance** for shadcn/ui in a Vite + React + TypeScript environment, while other
277skills handle routing, data fetching, or testing.
majiayu000