9Fase 9 · Claude desde cero
Extender Claude Code: subagentes, hooks, skills y MCP
Añadir a la app de práctica un hook, un subagente, una skill y un servidor MCP
11/13
Qué vas a conseguir: ampliar Claude Code con las cuatro piezas que lo convierten en tu herramienta: un servidor MCP, un hook, un subagente y una skill.
Tiempo: 40 minutos. Necesitas: Node.js instalado (para el hook de ejemplo). Todos los ficheros están listos para copiar en ejemplos/ del repositorio, y el proyecto completo en soluciones/fase-09/.
Tiempo: 40 minutos. Necesitas: Node.js instalado (para el hook de ejemplo). Todos los ficheros están listos para copiar en ejemplos/ del repositorio, y el proyecto completo en soluciones/fase-09/.
Las cuatro piezas, en una línea
MCP
Conecta Claude con herramientas y datos externos. El mismo estándar que los conectores de la fase 4.
Hook
Un comando que se ejecuta siempre en un momento concreto, por ejemplo tras cada edición.
Subagente
Un especialista con sus propias instrucciones y herramientas, que trabaja en un contexto aparte.
Skill
Un procedimiento reutilizable que invocas con /nombre o que Claude usa cuando encaja.
Paso 1 · Añade un servidor MCP
Fuera de Claude Code (o con ! delante), en la carpeta del proyecto:
claude mcp add --transport http deepwiki --scope project https://mcp.deepwiki.com/mcp
Al abrir Claude Code, te pedirá aprobar el servidor del proyecto. Elige Use this MCP server:
Úsalo:
Usa el servidor MCP deepwiki para explicarme en 3 líneas qué es el repositorio Fission-AI/OpenSpec.
Paso 2 · Añade un hook
Vamos a anotar en un registro cada fichero que Claude edita. Primero, el script (requiere Node.js):
const fs = require('node:fs');
const path = require('node:path');
let datos = '';
process.stdin.on('data', trozo => (datos += trozo));
process.stdin.on('end', () => {
const evento = JSON.parse(datos || '{}');
const proyecto = process.env.CLAUDE_PROJECT_DIR || evento.cwd || process.cwd();
const fichero = evento.tool_input?.file_path ?? '(desconocido)';
const linea = `${new Date().toISOString()} ${evento.tool_name} ${path.basename(fichero)}\n`;
fs.appendFileSync(path.join(proyecto, '.claude', 'cambios.log'), linea);
});
Después, regístralo en .claude/settings.json, junto a los permisos de la fase 8:
"hooks": {
"PostToolUse": [
{
"matcher": "Edit|Write",
"hooks": [
{ "type": "command", "command": "node",
"args": ["${CLAUDE_PROJECT_DIR}/.claude/hooks/registrar-cambio.js"] }
]
}
]
}
- PostToolUse + matcher "Edit|Write": se ejecuta justo después de que Claude edite o cree un fichero.
- command + args («forma exec»): lanza Node directamente, sin pasar por una terminal, así que funciona igual en Windows, macOS y Linux.
- ${CLAUDE_PROJECT_DIR}: la carpeta del proyecto. Úsala siempre: en nuestra primera prueba pusimos una ruta relativa y el hook falló cuando Claude trabajó desde otra carpeta.
Pide un cambio pequeño y comprueba el registro con el modo shell:
Añade debajo de la lista un pie de página discreto con el texto «Hecho con Claude Code». Es un cambio pequeño: no hace falta plan.
Paso 3 · Crea un subagente
Un revisor de accesibilidad que solo lee y nunca modifica:
---
name: revisor-accesibilidad
description: Revisa la accesibilidad de páginas HTML (contraste, etiquetas, teclado,
textos alternativos). Úsalo después de cambiar la interfaz.
tools: Read, Grep, Glob
model: sonnet
---
Eres un experto en accesibilidad web (WCAG 2.2, nivel AA).
Cuando te invoquen, revisa los ficheros HTML y CSS del proyecto y devuelve:
1. Un resumen de una línea con el estado general.
2. Como máximo 5 problemas, ordenados por gravedad, con fichero, línea y cómo arreglarlo.
3. Lo que ya está bien hecho, en una línea.
Responde siempre en español. No modifiques ficheros: solo revisa.
- description: cuándo debe usarlo Claude. Es lo más importante.
- tools: solo lectura. Así no puede cambiar nada aunque quiera.
- model: puede usar un modelo distinto, más ligero, para ahorrar.
Usa el subagente revisor-accesibilidad para revisar index.html.
Paso 4 · Crea una skill
Una skill para redactar las novedades de la app a partir de los commits:
---
name: novedades
description: Redacta la entrada de novedades (changelog) a partir de los últimos
commits. Úsala cuando el usuario pida las novedades, el changelog o qué ha cambiado.
argument-hint: "[número de commits]"
---
## Últimos commits
!`git log --oneline -n 10`
## Instrucciones
Con los commits anteriores (o los $ARGUMENTS últimos), redacta una entrada para NOVEDADES.md:
- Un título con la fecha de hoy.
- Novedades en «Añadido», «Cambiado» y «Corregido» (omite los grupos vacíos).
- Frases cortas, en español y pensadas para el usuario de la app.
Añade la entrada al principio de NOVEDADES.md (créalo si no existe) y enséñame el resultado.
La línea !`git log …` se ejecuta antes de que Claude lea la skill, así que recibe los commits ya escritos. Para tener commits que resumir, pide antes: «Haz commit de todos los cambios pendientes con un mensaje descriptivo».
✓ Gate 9 — Extensiones activas
✓
DeepWiki está en .mcp.json y lo he usado✓
El hook anota cada edición en cambios.log✓
El subagente ha revisado la accesibilidad✓
/novedades ha creado NOVEDADES.md✓
He hecho commit de la carpeta .claude y de .mcp.jsonFuentes oficiales: MCP · Hooks guide · Hooks reference · Subagents · Skills. Revisado el 15 de octubre de 2026 con Claude Code 2.1.300.