القائمة
Workflow paso a paso para desarrollo web profesional. Usar cuando inicies un nuevo proyecto web o landing page.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
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.
استنادا إلى تصنيف SOC المهني
| 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