Skip to content

CLAUDE_CODE_INSTRUCTIONS.md

Latest commit

 

History

History
206 lines (151 loc) · 4.76 KB

CLAUDE_CODE_INSTRUCTIONS.md

File metadata and controls

206 lines (151 loc) · 4.76 KB
Raw

🤖 INSTRUCCIONES PARA CLAUDE CODE

Ejecución Automática del Plan MacSweep UI

📍 PATHS IMPORTANTES

PROYECTO_ROOT: /Users/oxyzen/Projects/MacSweep
WEB_UI: /Users/oxyzen/Projects/MacSweep/web-ui
COMPONENTS: /Users/oxyzen/Projects/MacSweep/web-ui/src/components
STYLES: /Users/oxyzen/Projects/MacSweep/web-ui/src/styles
UTILS: /Users/oxyzen/Projects/MacSweep/web-ui/src/utils
DOCS: /Users/oxyzen/Projects/MacSweep/docs

🎯 OBJETIVO

Transformar el dashboard actual (web-ui/index.html) en un UI profesional siguiendo el design system en CLAUDE_CODE_PLAN.md.

⚡ PROMPT ÚNICO PARA EJECUCIÓN COMPLETA

Copia y pega esto en Claude Code:

Voy a mejorar el UI de MacSweep. Lee estos archivos para contexto:

1. /Users/oxyzen/Projects/MacSweep/CLAUDE_CODE_PLAN.md - Plan completo
2. /Users/oxyzen/Projects/MacSweep/web-ui/index.html - Dashboard actual

Ejecuta TODAS las fases del plan:

FASE 1 - Crear estructura:
- mkdir -p /Users/oxyzen/Projects/MacSweep/web-ui/src/{components,hooks,utils,styles}
- mkdir -p /Users/oxyzen/Projects/MacSweep/web-ui/public
- Crear theme.css con design tokens
- Crear format.js con utilidades
- Crear logo.svg

FASE 2 - Componentes:
- DiskRing.jsx (SVG animado de uso de disco)
- ModuleCard.jsx (toggle card con icono)
- StatsCard.jsx (card de estadísticas)

FASE 3-5 - Dashboard completo:
- Reescribir index.html con:
  - Design system aplicado
  - Layout responsive (grid)
  - Tabs funcionales
  - localStorage para persistencia
  - Animaciones y transiciones
  - Toast notifications
  - Loading states
  - Accesibilidad básica

REQUISITOS:
- Todo debe funcionar SIN build step (CDN para React/Tailwind)
- Archivo index.html autocontenido
- Tema oscuro premium
- UI nivel producto profesional

Output: Solo código, mínimas explicaciones para ahorrar tokens.

🔄 PROMPTS POR FASE (alternativa)

Si prefieres ejecutar fase por fase:

FASE 1:

cd /Users/oxyzen/Projects/MacSweep/web-ui

Crea:
1. src/styles/theme.css - Variables CSS (colores, tipografía, espaciado)
2. src/utils/format.js - formatBytes(), formatDate(), formatDuration()
3. public/logo.svg - Logo minimalista de escoba/barrido

Sigue el design system de CLAUDE_CODE_PLAN.md

FASE 2:

En /Users/oxyzen/Projects/MacSweep/web-ui/src/components/

Crea componentes React standalone:
1. DiskRing.jsx - Props: {used, total} - SVG circular animado
2. ModuleCard.jsx - Props: {name, icon, size, enabled, onToggle}
3. StatsCard.jsx - Props: {title, value, subtitle, icon, trend}

Cada componente exporta default function.
Usa CSS-in-JS inline o clases Tailwind.

FASE 3:

Reescribe /Users/oxyzen/Projects/MacSweep/web-ui/index.html

Estructura:
- Header: logo, status, botón Clean Now
- Tabs: Dashboard | Modules | Schedule | History
- Content area con grid responsive
- Footer mínimo

Incluye los componentes inline (no imports, todo en un archivo).

FASE 4-5:

Mejora /Users/oxyzen/Projects/MacSweep/web-ui/index.html

Añade:
1. const [data, setData] = useState(mockData) con localStorage sync
2. simulateCleanup() con setTimeout y progress
3. Toast component para notificaciones
4. CSS animations (@keyframes fadeIn, slideUp)
5. Hover effects en cards
6. ARIA labels en botones e inputs

🎨 REFERENCIA RÁPIDA DE ESTILOS

Colores principales

--primary: #a855f7 (purple)
--secondary: #06b6d4 (cyan)
--success: #10b981 (green)
--warning: #f59e0b (amber)
--danger: #ef4444 (red)
--bg: #0f0f0f (dark)
--card: #1a1a1a
--border: #333

Efectos

/* Glassmorphism sutil */
background: rgba(26, 26, 26, 0.8);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.1);

/* Glow */
box-shadow: 0 0 20px rgba(168, 85, 247, 0.3);

/* Gradient text */
background: linear-gradient(135deg, #a855f7, #06b6d4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

✅ VERIFICACIÓN

Después de ejecutar, verifica:

# Abrir en navegador
open /Users/oxyzen/Projects/MacSweep/web-ui/index.html

# Verificar estructura
ls -la /Users/oxyzen/Projects/MacSweep/web-ui/src/

📦 POST-EJECUCIÓN

Una vez completado el UI:

cd /Users/oxyzen/Projects/MacSweep

# Tomar screenshot (manual)
# Guardar en docs/screenshot-dashboard.png

# Inicializar git
git init
git add .
git commit -m "✨ feat: MacSweep v1.0.0 - Professional UI"

# Subir a GitHub
gh repo create RUDAgency/MacSweep --public --source=. --push

💡 TIPS PARA AHORRO DE TOKENS

  1. No pidas explicaciones - Solo código
  2. Especifica paths absolutos - Evita confusiones
  3. Una tarea por prompt - Más eficiente
  4. Usa "continúa" - Si se corta, no repitas contexto
  5. Archivos completos - No diffs parciales

Listo para ejecutar. Abre Claude Code y usa el prompt único o por fases.