Developer plugin package for scaffolders, component generators, and design token integration in Vite React projects.
Vite + React 19 + Tailwind v4 + shadcn/ui Plugin Suite
What this plugin suite does
This plugin equips AI coding assistants with scaffolding rules, component templates, and color-system tokens for building modern React frontend interfaces using Vite, React 19, Tailwind CSS v4, and shadcn/ui.
Features & Capabilities
- Automatic shadcn CLI Integration: Guidance on calling
npx shadcn@latest add <component> instead of creating raw unstyled form elements.
- Tailwind v4 Theme Variable Presets: Preset CSS variables for dark mode glassmorphism, accent glows, and accessible contrast ratios.
- Lucide Icons Provider: Patterns for importing and wrapping icons dynamically with accessible ARIA labels.
Scaffolding Config (components.json)
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": false,
"tsx": true,
"tailwind": {
"config": "",
"css": "client/src/index.css",
"baseColor": "slate",
"cssVariables": true
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui"
}
}
UI Design Guidelines for Agents
1. Never write raw <select> or <button> tags when shadcn/ui equivalents exist in @/components/ui.
2. Use smooth HSL colors and vibrant dark mode palettes instead of default browser gray/blue.
3. Ensure responsive layouts using flex and grid containers with explicit mobile breakpoint handling (sm:, md:, lg:).