/design-system
Usar para diseñar la arquitectura de un sistema con diagramas y contratos. Activar cuando el usuario quiera diseñar arquitectura, definir componentes del sistema, crear un diagrama de flujo, establecer contratos entre módulos, planificar la estructura del proyecto o decidir cómo
$ npx -y skills add 686f6c61/alfred-dev --skill design-system --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.
- You can call itInvoke it directly when you want it.
- Slash command
/design-system
Context preview
The summary Claude sees to decide when to auto-load this skill.
Usar para diseñar la arquitectura de un sistema con diagramas y contratos. Activar cuando el usuario quiera diseñar arquitectura, definir componentes del sistema, crear un diagrama de flujo, establecer contratos entre módulos, planificar la estructura del proyecto o decidir cómo
SKILL.md
design-system.SKILL.mdname: design-system
description: "Usar para diseñar la arquitectura de un sistema con diagramas y contratos. Activar cuando el usuario quiera diseñar arquitectura, definir componentes del sistema, crear un diagrama de flujo, establecer contratos entre módulos, planificar la estructura del proyecto o decidir cómo organizar los servicios."
Diseñar arquitectura del sistema
Resumen
Este skill produce el diseño arquitectónico de un sistema o módulo, incluyendo diagramas de componentes, contratos entre módulos y decisiones de diseño fundamentales. El resultado es un documento que permite a cualquier desarrollador del equipo entender cómo encajan las piezas antes de escribir código.
La arquitectura no se diseña para impresionar, sino para comunicar. Los diagramas deben ser claros, los contratos precisos y las decisiones justificadas.
Proceso
1. **Entender los requisitos.** Leer el PRD si existe. Identificar los requisitos funcionales (qué hace el sistema) y los no funcionales (rendimiento, escalabilidad, seguridad, disponibilidad). Los requisitos no funcionales suelen ser los que más condicionan la arquitectura.
2. **Definir los componentes principales.** Identificar los módulos, servicios o capas del sistema. Para cada componente, documentar:
- Responsabilidad principal (una sola, siguiendo SRP).
- Inputs que recibe.
- Outputs que produce.
- Dependencias externas.
3. **Generar diagrama de componentes con Mermaid:**
graph TD
A[Cliente] --> B[API Gateway]
B --> C[Servicio Auth]
B --> D[Servicio Core]
D --> E[(Base de datos)]
D --> F[Cola de mensajes]El diagrama debe mostrar los componentes y sus relaciones, no los detalles internos de cada uno.
4. **Generar diagrama de secuencia para los flujos críticos:**
sequenceDiagram
participant U as Usuario
participant A as API
participant D as DB
U->>A: POST /recurso
A->>D: INSERT
D-->>A: OK
A-->>U: 201 CreatedCubrir al menos el happy path y el principal flujo de error.
5. **Definir contratos entre módulos.** Para cada interfaz entre componentes, especificar:
- Formato de datos (tipos, esquemas).
- Protocolo de comunicación (HTTP, gRPC, eventos, etc.).
- Manejo de errores (códigos, reintentos, fallbacks).
- Versionado del contrato.
6. **Aplicar principios SOLID.** Verificar que el diseño respeta:
- **S**ingle Responsibility: cada componente tiene una razón para cambiar.
- **O**pen/Closed: extensible sin modificar lo existente.
- **L**iskov Substitution: las implementaciones son intercambiables.
- **I**nterface Segregation: interfaces pequeñas y específicas.
- **D**ependency Inversion: depender de abstracciones, no de implementaciones concretas.
7. **Documentar decisiones no obvias.** Si se elige un patrón (Event Sourcing, CQRS, Hexagonal, etc.), explicar por qué es adecuado para este caso y qué alternativas se descartaron.
8. **Registrar las decisiones arquitectónicas principales en la memoria del proyecto.** Usar `memory_log_decision` para cada decisión significativa (elección de patrón, estrategia de comunicación entre servicios, estructura de capas, etc.). Esto permite que futuros skills y sesiones tengan contexto sin releer todo el documento.
9. **Revisar con el usuario.** La arquitectura es una decisión de equipo. Presentar el diseño, recoger feedback e iterar antes de implementar.
Qué NO hacer
- **No diseñar sin entender los requisitos.** Una arquitectura que no responde a requisitos reales es un ejercicio académico. Leer el PRD o hablar con el usuario antes de dibujar diagramas.
- **No crear diagramas que nadie mantendrá.** Si un diagrama no se va a actualizar cuando el código cambie, se convertirá en documentación engañosa. Preferir diagramas simples y mantenibles a obras de arte que caducan.
- **No sobreingeniar con patrones que el equipo no domina.** CQRS, Event Sourcing o microservicios son herramientas potentes, pero si el equipo no tiene experiencia con ellos, el coste de aprendizaje superará al beneficio. Elegir la complejidad que el equipo puede gestionar.
Criterios de éxito
- El diseño incluye al menos un diagrama de componentes y un diagrama de secuencia en Mermaid.
- Cada componente tiene su responsabilidad documentada.
- Los contratos entre módulos están definidos con tipos y manejo de errores.
- Las decisiones de diseño están justificadas, no son arbitrarias.
- El usuario ha validado la arquitectura propuesta.
Read more
name: design-system description: "Usar para diseñar la arquitectura de un sistema con diagramas y contratos. Activar cuando el usuario quiera diseñar arquitectura, definir componentes del sistema, crear un diagrama de flujo, establecer contratos entre módulos, planificar la estructura del proyecto o decidir cómo organizar los servicios."
Diseñar arquitectura del sistema
Resumen
Este skill produce el diseño arquitectónico de un sistema o módulo, incluyendo diagramas de componentes, contratos entre módulos y decisiones de diseño fundamentales. El resultado es un documento que permite a cualquier desarrollador del equipo entender cómo encajan las piezas antes de escribir código.
La arquitectura no se diseña para impresionar, sino para comunicar. Los diagramas deben ser claros, los contratos precisos y las decisiones justificadas.
Proceso
1. **Entender los requisitos.** Leer el PRD si existe. Identificar los requisitos funcionales (qué hace el sistema) y los no funcionales (rendimiento, escalabilidad, seguridad, disponibilidad). Los requisitos no funcionales suelen ser los que más condicionan la arquitectura.
2. **Definir los componentes principales.** Identificar los módulos, servicios o capas del sistema. Para cada componente, documentar:
- Responsabilidad principal (una sola, siguiendo SRP).
- Inputs que recibe.
- Outputs que produce.
- Dependencias externas.
3. **Generar diagrama de componentes con Mermaid:**
graph TD
A[Cliente] --> B[API Gateway]
B --> C[Servicio Auth]
B --> D[Servicio Core]
D --> E[(Base de datos)]
D --> F[Cola de mensajes]El diagrama debe mostrar los componentes y sus relaciones, no los detalles internos de cada uno.
4. **Generar diagrama de secuencia para los flujos críticos:**
sequenceDiagram
participant U as Usuario
participant A as API
participant D as DB
U->>A: POST /recurso
A->>D: INSERT
D-->>A: OK
A-->>U: 201 CreatedCubrir al menos el happy path y el principal flujo de error.
5. **Definir contratos entre módulos.** Para cada interfaz entre componentes, especificar:
- Formato de datos (tipos, esquemas).
- Protocolo de comunicación (HTTP, gRPC, eventos, etc.).
- Manejo de errores (códigos, reintentos, fallbacks).
- Versionado del contrato.
6. **Aplicar principios SOLID.** Verificar que el diseño respeta:
- **S**ingle Responsibility: cada componente tiene una razón para cambiar.
- **O**pen/Closed: extensible sin modificar lo existente.
- **L**iskov Substitution: las implementaciones son intercambiables.
- **I**nterface Segregation: interfaces pequeñas y específicas.
- **D**ependency Inversion: depender de abstracciones, no de implementaciones concretas.
7. **Documentar decisiones no obvias.** Si se elige un patrón (Event Sourcing, CQRS, Hexagonal, etc.), explicar por qué es adecuado para este caso y qué alternativas se descartaron.
8. **Registrar las decisiones arquitectónicas principales en la memoria del proyecto.** Usar `memory_log_decision` para cada decisión significativa (elección de patrón, estrategia de comunicación entre servicios, estructura de capas, etc.). Esto permite que futuros skills y sesiones tengan contexto sin releer todo el documento.
9. **Revisar con el usuario.** La arquitectura es una decisión de equipo. Presentar el diseño, recoger feedback e iterar antes de implementar.
Qué NO hacer
- **No diseñar sin entender los requisitos.** Una arquitectura que no responde a requisitos reales es un ejercicio académico. Leer el PRD o hablar con el usuario antes de dibujar diagramas.
- **No crear diagramas que nadie mantendrá.** Si un diagrama no se va a actualizar cuando el código cambie, se convertirá en documentación engañosa. Preferir diagramas simples y mantenibles a obras de arte que caducan.
- **No sobreingeniar con patrones que el equipo no domina.** CQRS, Event Sourcing o microservicios son herramientas potentes, pero si el equipo no tiene experiencia con ellos, el coste de aprendizaje superará al beneficio. Elegir la complejidad que el equipo puede gestionar.
Criterios de éxito
- El diseño incluye al menos un diagrama de componentes y un diagrama de secuencia en Mermaid.
- Cada componente tiene su responsabilidad documentada.
- Los contratos entre módulos están definidos con tipos y manejo de errores.
- Las decisiones de diseño están justificadas, no son arbitrarias.
- El usuario ha validado la arquitectura propuesta.
Plugin de Claude Code: 18 agentes especializados, 60 skills, 25 comandos, 13 hooks, memoria persistente, Memory UI local, quality gates, evidence guard, continuidad operativa y modo autopilot.
Repo: 686f6c61/alfred-dev
Other skills on alfred-dev.
- /alfred
Alias global /alfred para abrir el asistente contextual de Alfred Dev sin escribir el namespace completo. Activar solo cuando el usuario invoque explicitamente /alfred.
Open skill - /choose-stack
Usar para evaluar y elegir tecnologías con matriz de decisión ponderada. Activar cuando el usuario quiera elegir tecnología, comparar frameworks, decidir entre alternativas técnicas, construir una matriz de decisión, evaluar stack, seleccionar base de datos, elegir lenguaje o
Open skill - /evaluate-dependencies
Usar para evaluar si una dependencia merece la pena antes de añadirla. Activar cuando el usuario quiera añadir una librería, saber si merece la pena esta dependencia, evaluar un paquete antes de instalarlo, hacer npm install o pip install de algo nuevo, buscar alternativas a una
Open skill - /write-adr
Usar para documentar decisiones arquitectónicas como ADR. Activar cuando el usuario quiera documentar por qué se tomó una decisión, registrar alternativas descartadas, crear un ADR, un decision record, dejar constancia de una elección técnica o justificar una decisión de diseño
Open skill - /code-review
Usar para revisar código con foco en calidad, legibilidad y errores lógicos. También: revisar código, buscar errores, calidad del código, revisión de PR, pull request review.
Open skill - /e2e-testing
Configurar y escribir tests end-to-end con Playwright o Cypress. También: validar flujos de usuario completos, testing de integración en navegador, tests E2E en CI, tests de aceptación, smoke tests en producción.
Open skill

