// Workflow paso a paso para desarrollo web profesional. Usar cuando inicies un nuevo proyecto web o landing page.
Directrices de diseño visual para crear interfaces distintivas y profesionales. Usar cuando necesites mejorar la estética de componentes o páginas.
Stack de desarrollo web profesional React+Vite+Tailwind+shadcn. Usar cuando el usuario quiera crear páginas web, apps, o componentes UI.
| name | claudable-workflow |
| description | Workflow paso a paso para desarrollo web profesional. Usar cuando inicies un nuevo proyecto web o landing page. |
Antes de escribir código, responde estas preguntas:
Elige UNA dirección principal:
| Estilo | Características | Mejor para |
|---|---|---|
| Minimalist | Espacio blanco, tipografía limpia, pocos colores | SaaS, portfolios |
| Brutalist | Crudo, tipografía bold, contrastes fuertes | Agencias, creativos |
| Luxury | Serif elegante, animaciones suaves, dark mode | Moda, premium |
| Playful | Colores vibrantes, ilustraciones, micro-interacciones | Apps consumer, startups |
| Editorial | Grid definido, jerarquía clara, como revista | Blogs, medios |
| Retro-futuristic | Gradients, glassmorphism, neon | Tech, gaming |
# 1. Crear proyecto
npm create vite@latest mi-proyecto -- --template react-ts
cd mi-proyecto
# 2. Instalar Tailwind CSS v4
npm install tailwindcss @tailwindcss/vite
# 3. Configurar Vite
# Añadir @tailwindcss/vite a vite.config.ts
# 4. Instalar shadcn
npx shadcn@latest init
# 5. Instalar componentes base
npx shadcn@latest add button card input
# 6. Instalar utilidades
npm install clsx tailwind-merge tw-animate-css
Orden recomendado:
# Usar Playwright MCP para screenshots
"Toma un screenshot de la página actual"
"Muéstrame cómo se ve en móvil"
# Build de producción
npm run build
# Deploy a Vercel (con MCP)
"Despliega a Vercel"
# O manualmente
npx vercel