メニュー
Workflow paso a paso para desarrollo web profesional. Usar cuando inicies un nuevo proyecto web o landing page.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/santifer/claudeable --skill claudable-workflowコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
SOC 職業分類に基づく
SKILL.md を表示中
| 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