Convierte Claude Code en un estudio de software de élite.

---
description: Construye una feature completa siguiendo nuestro flujo
argument-hint: [descripción de la feature]
allowed-tools: Read, Edit, Write, Bash(npm test:*), Bash(git*)
model: claude-opus-4-8
---

Vas a construir: $ARGUMENTS

Sigue EXACTAMENTE este flujo:
1. Lee @CLAUDE.md y los archivos relevantes antes de tocar nada.
2. Hazme un plan corto y espera mi OK.
3. Implementa con tests.
4. Corre !`npm test` y arregla lo que falle.
5. Toma screenshot de la UI y critícala antes de darla por buena.

{
  "hooks": {
    "PreToolUse": [
      {
        "matcher": "Edit|Write",
        "hooks": [
          {
            "type": "command",
            "command": "bash .claude/hooks/protect-schema.sh"
          }
        ]
      }
    ]
  }
}

#!/usr/bin/env bash
# El harness pasa la info de la herramienta por stdin (JSON)
input=$(cat)
file=$(echo "$input" | jq -r '.tool_input.file_path')

if [[ "$file" == *"schema.sql"* ]]; then
  # exit 2 = BLOQUEA la herramienta y devuelve el mensaje a Claude
  echo "BLOQUEADO: schema.sql es protegido. Clónalo a" \
       "schema.v2.sql y modifica la copia." >&2
  exit 2
fi
exit 0

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Edit|Write",
        "hooks": [
          { "type": "command",
            "command": "npx prettier --write \"$CLAUDE_FILE_PATHS\"" }
        ]
      }
    ]
  }
}

# forma general
claude mcp add <nombre> -- <comando para arrancar el server>

# ejemplo real: navegador (Playwright) para que Claude VEA tu UI
claude mcp add playwright -- npx -y @playwright/mcp@latest

# con scope: --scope user (todos los proyectos) | project | local
claude mcp add --scope user context7 -- npx -y @upstash/context7-mcp

# ver / quitar
claude mcp list
claude mcp remove playwright

# skills oficiales de Anthropic (docx, pdf, pptx, xlsx + ejemplos)
/plugin marketplace add anthropics/skills
/plugin install document-skills@anthropic-agent-skills

# el marketplace más grande de la comunidad (192 agentes, 156 skills, 102 comandos)
/plugin marketplace add wshobson/agents
/plugin install python-development

# crea tus propias skills de forma interactiva
/plugin install skill-creator@claude-plugins-official

# también: arrastra un SKILL.md a .claude/skills/  o  npx skills add <org/repo>

# 1) build/test/simulador headless (el caballo de batalla)
claude mcp add XcodeBuildMCP -s user -e XCODEBUILDMCP_SENTRY_DISABLED=true \
  -- npx -y xcodebuildmcp@latest mcp

# 2) Xcode en vivo: previews de SwiftUI + diagnósticos (Xcode 26.3+)
claude mcp add --transport stdio xcode -s user -- xcrun mcpbridge

# 3) automatización del simulador (requiere github.com/facebook/idb)
claude mcp add ios-simulator npx ios-simulator-mcp

<frontend_aesthetics>
You tend to converge toward generic, "on distribution" outputs. In frontend
design, this creates what users call the "AI slop" aesthetic. Avoid this: make
creative, distinctive frontends that surprise and delight. Focus on:

Typography: Choose fonts that are beautiful, unique, and interesting. Avoid
generic fonts like Arial and Inter; opt instead for distinctive choices that
elevate the aesthetics.

Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for
consistency. Dominant colors with sharp accents outperform timid, evenly-
distributed palettes. Draw from IDE themes and cultural aesthetics.

Motion: Use animations for micro-interactions. Prioritize CSS-only solutions
for HTML. Use Motion library for React when available. Focus on high-impact
moments: one well-orchestrated page load with staggered reveals
(animation-delay) creates more delight than scattered micro-interactions.

Backgrounds: Create atmosphere and depth rather than defaulting to solid
colors. Layer CSS gradients, use geometric patterns, or add contextual effects.

Avoid generic AI-generated aesthetics:
- Overused font families (Inter, Roboto, Arial, system fonts)
- Clichéd color schemes (particularly purple gradients on white backgrounds)
- Predictable layouts and component patterns
- Cookie-cutter design that lacks context-specific character
</frontend_aesthetics>

---
paths: ["**/*View.swift", "**/Views/**"]
---

# Reglas para vistas SwiftUI (se cargan solas al tocar una View)

- Antes de editar, lee @docs/design-system.md.
- Spacing en múltiplos de 8pt. SF Symbols, modo Hierarchical.
- Toda View nueva lleva un #Preview.
- Al terminar, toma screenshot del simulador y critícala.

input=$(cat); file=$(echo "$input" | jq -r '.tool_input.file_path')
if [[ "$file" == *"Schema.swift"* ]]; then
  jq -n '{hookSpecificOutput:{hookEventName:"PreToolUse",
    permissionDecision:"deny",
    permissionDecisionReason:"Schema.swift es protegido. Clónalo a Schema.v2.swift y modifica la copia."}}'
else exit 0; fi

› /build-feature "pantalla de login con WebSocket en tiempo real"

# 1. MEMORIA — Claude ya leyó CLAUDE.md al arrancar:
    stack (SwiftUI + Hono), reglas, estilo. No hay que decírselo.
# 2. COMANDO — /build-feature.md define el flujo y exige un plan primero:
    plan: 6 pasos → espera tu OK
# 3. SKILL — swiftui-premium se activa sola (la tarea es UI SwiftUI):
    aplica tokens de 8pt, SF Symbols, el loop de screenshot
# 4. MCP — Context7 trae los docs de Hono v4 + WebSocket (sin APIs viejas):
    XcodeBuildMCP compila; ios-simulator toma screenshots
# 5. HOOK — al intentar editar Schema.swift:
    ✋ bloqueado → "clónalo a Schema.v2.swift"  (obedece)
#    al guardar cada archivo → swift-format corre solo (PostToolUse)
# 6. SUBAGENTE — ui-reviewer (contexto fresco) califica el screenshot:
    [High] el botón no tiene estado de loading → arregla
    ✓ diff bajo umbral → Stop hook deja cerrar el turno