Menu
Workflow paso a paso para desarrollo web profesional. Usar cuando inicies un nuevo proyecto web o landing page.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
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