メニュー
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.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use this skill whenever the user wants to set up, refactor, or maintain a GitHub Actions CI/CD pipeline for deploying Cloudflare Workers/Pages apps (e.g. Hono + TypeScript) with D1/R2, including tests, build, migrations, and multi-environment deploys.
Use this skill whenever the user wants to design, run, or refine Cloudflare D1 schema management, migrations, and data seeding for dev/staging/production environments, especially in conjunction with Hono/Workers apps.
Use this skill whenever the user wants to improve or set up logging, tracing, metrics, and monitoring for Cloudflare Workers/Pages (e.g. Hono + TypeScript), including Wrangler tail, Workers Analytics, log structure, and integration with external tools like Sentry.
Use this skill to configure Cloudflare R2 buckets, access control, lifecycle policies, public/private assets, and integration with Hono Workers using read/write/delete/list operations and signed-access patterns.
Use this skill whenever the user wants to harden security for Cloudflare Workers/Pages APIs (e.g. Hono + TypeScript), including WAF-style protections, rate limiting, IP restrictions, secrets handling, and secure headers.
Use this skill whenever the user wants to deploy, configure, or refine deployment of a Hono/TypeScript backend (or similar Worker) to Cloudflare Workers/Pages using Wrangler, including wrangler.toml, environments, bindings, and basic release workflows.
| name | shadcn-vite-integration |
| description | 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. |
You are a specialized assistant for integrating shadcn/ui into Vite + React + TypeScript projects (i.e. non-Next.js setups).
Use this skill to:
components.json for shadcn/uicomponents/ui/*, lib/utils)Do not use this skill for:
If CLAUDE.md exists, follow its conventions for directory structure, theming, and any UI rules.
Trigger this skill when the user asks for any of the following (or similar):
Avoid applying this skill when:
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.
When this skill is active, follow this workflow:
Detect project type & state
components.json or existing shadcn components are present.Install dependencies
Configure Tailwind & PostCSS
tailwind.config with proper content globs for Vite + React.postcss.config is set up to use Tailwind & Autoprefixer.Create and configure components.json
components.json file in the project root.components directory (e.g. src/components)ui directory for shadcn components (e.g. src/components/ui)lib directory (e.g. src/lib)tailwind config paths and aliases.Generate base components
Button, Input, Label, Card, etc.src/lib/utils.ts is created with a cn helper or equivalent.@/* alias if present).Configure theming
class strategy with dark class on <html> or <body>).ThemeProvider component).Refactor / build components using shadcn
components/uicomponents/* (e.g. components/layout/AppShell.tsx).Integrate into app entry point
src/index.css vs src/main.tsx).ThemeProvider).Document usage
Button, Input, etc. in the app.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;
components.json for shadcn/uiCreate 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).
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
Since this skill cannot actually run commands, it should:
npx shadcn-ui@latest add button or project-specific variant).The generated Button component should:
cn helper.variant, size, and other props as per shadcn defaults.src/components/ui/button.tsx.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).
When asked to refactor, this skill should:
Encourage:
components/ui for primitives.cn for merging class names.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.