diff --git a/README.md b/README.md index 0eb1842..d41d7c8 100644 --- a/README.md +++ b/README.md @@ -235,10 +235,14 @@ Este proyecto está configurado para trabajar de forma óptima con **Claude Code ├── agents/ # Subagentes especializados │ ├── database-specialist.md # Base de datos (PostgreSQL, migraciones, índices) │ ├── backend-developer.md # Backend (Express, Sequelize, servicios, JWT) -│ ├── frontend-developer.md # Frontend (Angular, componentes, formularios) +│ ├── frontend-developer.md # Frontend — lógica (Angular, componentes, formularios) +│ ├── ux-ui-designer.md # Frontend — diseño (UX/UI, accesibilidad, SEO, PWA) │ └── qa-engineer.md # Control de calidad (tests, linting, cobertura) ├── skills/ # Skills invocables -│ └── angular-developer.md # Directrices oficiales de Angular (fuente Google) +│ ├── angular-developer.md # Directrices oficiales de Angular (fuente Google) +│ ├── frontend-design/ # Estética + sistema de design tokens +│ ├── web-design-review/ # Auditoría a11y / SEO / UX (salida file:line) +│ └── angular-pwa-seo/ # PWA (manifest, service worker) + SEO └── settings.local.json # Permisos y lista de operaciones permitidas/denegadas ``` @@ -251,16 +255,23 @@ Petición del usuario ↓ [AGENTS.md] Orquestador ↓ - ┌──────┬──────────┬──────────┐ - ↓ ↓ ↓ ↓ - DB Backend Frontend QA - ↓ ↓ ↓ ↓ - └──────┴──────────┴──────────┘ + ┌──────┬──────────┬─────────────────────────────┬──────┐ + ↓ ↓ ↓ ↓ ↓ + DB Backend Frontend QA + ├─ ux-ui-designer (diseño) │ + ├─ frontend-developer (lógica) │ + └─ ux-ui-designer (review a11y/SEO) │ + ↓ ↓ ↓ ↓ ↓ + └──────┴──────────┴─────────────────────────────┴──────┘ ↓ Informe por capa al usuario ``` El orden de ejecución respeta las dependencias: base de datos → backend → frontend → QA. +En la capa de frontend colaboran **dos** agentes sin pisarse: `ux-ui-designer` define el +diseño (tokens, accesibilidad, SEO, PWA), `frontend-developer` implementa la lógica, y el +diseñador cierra con un pase de revisión. El orquestador los secuencia para que nunca +editen el mismo fichero a la vez. ### Subagentes @@ -294,6 +305,26 @@ Especialista en Angular siguiendo Clean Architecture y las últimas prácticas o - Rutas lazy-loaded con `loadComponent()` / `loadChildren()` - Signal Forms para nuevos formularios (Angular v21+) - DTOs importados de `libs/rest-dto` (fuente única de verdad, nunca redefinidos) +- **Consume los design tokens** del diseñador — nunca hardcodea colores/espaciados + +#### 🎨 UX/UI Designer + +Especialista en la **capa de experiencia y presentación** del frontend. Colabora con el +`frontend-developer` sin solaparse: el diseñador define y revisa el look & feel, la +accesibilidad, el SEO y la PWA; el desarrollador implementa la lógica. + +- **UX/UI y theming**: sistema de **design tokens** (light/dark) mapeados sobre las + variables `--bs-*` de Bootstrap; layout responsive **mobile-first**; estados visuales + (hover/focus/disabled/loading/empty/error) +- **Accesibilidad** (WCAG 2.2 AA): HTML semántico, ARIA, navegación por teclado, + `:focus-visible`, contraste, `prefers-reduced-motion` +- **SEO**: `Title`/`Meta` por ruta, Open Graph/Twitter, canonical, JSON-LD, Core Web Vitals +- **PWA**: web app manifest, service worker (`@angular/service-worker`), offline e instalación +- **Carriles** (para no pisarse): edita estilos/tokens, `index.html`, manifest/`ngsw-config`, + claves i18n y el markup de plantillas (semántica/ARIA/clases/`alt`); **no** toca lógica + de componentes — cuando hace falta, entrega un _spec_ con contratos al desarrollador +- Stack real: **Bootstrap 5 + ng-bootstrap + Lineicons** (no Material ni Tailwind) +- Skills: `/frontend-design`, `/web-design-review`, `/angular-pwa-seo` #### ✅ QA Engineer @@ -312,6 +343,9 @@ Se ejecuta **siempre el último**, una vez que todos los agentes de implementaci | Skill | Invocación | Descripción | | ------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------ | | `angular-developer` | `/angular-developer` | Carga las directrices oficiales de Angular antes de escribir código. Se invoca automáticamente en el agente de frontend. | +| `frontend-design` | `/frontend-design` | Diseño estético + sistema de design tokens (light/dark), filosofías de diseño, mobile-first. Lo usa el `ux-ui-designer`. | +| `web-design-review` | `/web-design-review` | Auditoría de accesibilidad / SEO / UX con salida concisa `file:line`. Lo usa el `ux-ui-designer`. | +| `angular-pwa-seo` | `/angular-pwa-seo` | Configura/audita PWA (manifest, service worker) y SEO (meta, JSON-LD) en Angular. Lo usa el `ux-ui-designer`. | > **Gestión de tareas**: este starter no impone ningún gestor. Usa el que ya emplee tu equipo (Jira, Linear, GitHub Issues, etc.) o ninguno; la orquestación no lo requiere. diff --git a/docs/README_eng.md b/docs/README_eng.md index d8f750c..637d62b 100644 --- a/docs/README_eng.md +++ b/docs/README_eng.md @@ -234,10 +234,14 @@ This project is configured to work optimally with **Claude Code**, Anthropic's c ├── agents/ # Specialised subagents │ ├── database-specialist.md # Database (PostgreSQL, migrations, indexes) │ ├── backend-developer.md # Backend (Express, Sequelize, services, JWT) -│ ├── frontend-developer.md # Frontend (Angular, components, forms) +│ ├── frontend-developer.md # Frontend — logic (Angular, components, forms) +│ ├── ux-ui-designer.md # Frontend — design (UX/UI, accessibility, SEO, PWA) │ └── qa-engineer.md # Quality assurance (tests, linting, coverage) ├── skills/ # Invokable skills -│ └── angular-developer.md # Official Angular guidelines (Google source) +│ ├── angular-developer.md # Official Angular guidelines (Google source) +│ ├── frontend-design/ # Aesthetics + design-token system +│ ├── web-design-review/ # a11y / SEO / UX audit (file:line output) +│ └── angular-pwa-seo/ # PWA (manifest, service worker) + SEO └── settings.local.json # Permissions and allowed/denied operations ``` @@ -250,16 +254,23 @@ User request ↓ [AGENTS.md] Orchestrator ↓ -┌─────┬──────────┬──────────┐ -↓ ↓ ↓ ↓ -DB Backend Frontend QA -↓ ↓ ↓ ↓ -└─────┴──────────┴──────────┘ +┌─────┬──────────┬─────────────────────────────┬──────┐ +↓ ↓ ↓ ↓ ↓ +DB Backend Frontend QA + ├─ ux-ui-designer (design) │ + ├─ frontend-developer (logic) │ + └─ ux-ui-designer (a11y/SEO review) │ +↓ ↓ ↓ ↓ ↓ +└─────┴──────────┴─────────────────────────────┴──────┘ ↓ Layer-by-layer report to user ``` Execution order respects dependencies: database → backend → frontend → QA. +In the frontend layer, **two** agents collaborate without overlapping: `ux-ui-designer` +defines the design (tokens, accessibility, SEO, PWA), `frontend-developer` implements the +logic, and the designer closes with a review pass. The orchestrator sequences them so they +never edit the same file at once. ### Subagents @@ -293,6 +304,26 @@ Expert in Angular following Clean Architecture and the latest official best prac - Lazy-loaded routes with `loadComponent()` / `loadChildren()` - Signal Forms for new forms (Angular v21+) - DTOs imported from `libs/rest-dto` (single source of truth, never redefined locally) +- **Consumes the designer's design tokens** — never hardcodes colours/spacing + +#### 🎨 UX/UI Designer + +Expert in the frontend's **experience and presentation layer**. Collaborates with +`frontend-developer` without overlapping: the designer defines and reviews the look & +feel, accessibility, SEO and PWA; the developer implements the logic. + +- **UX/UI & theming**: a **design-token** system (light/dark) mapped onto Bootstrap's + `--bs-*` variables; **mobile-first** responsive layout; visual states + (hover/focus/disabled/loading/empty/error) +- **Accessibility** (WCAG 2.2 AA): semantic HTML, ARIA, keyboard nav, `:focus-visible`, + contrast, `prefers-reduced-motion` +- **SEO**: per-route `Title`/`Meta`, Open Graph/Twitter, canonical, JSON-LD, Core Web Vitals +- **PWA**: web app manifest, service worker (`@angular/service-worker`), offline & install +- **Lanes** (to avoid clashes): edits styles/tokens, `index.html`, manifest/`ngsw-config`, + i18n keys and template markup (semantics/ARIA/classes/`alt`); does **not** touch + component logic — when needed, hands a _spec_ with contracts to the developer +- Real stack: **Bootstrap 5 + ng-bootstrap + Lineicons** (not Material or Tailwind) +- Skills: `/frontend-design`, `/web-design-review`, `/angular-pwa-seo` #### ✅ QA Engineer @@ -308,9 +339,12 @@ Always runs **last**, after all implementation agents have finished. ### Skills -| Skill | Invocation | Description | -| ------------------- | -------------------- | ------------------------------------------------------------------------------------------------------- | -| `angular-developer` | `/angular-developer` | Loads the official Angular guidelines before writing code. Invoked automatically by the frontend agent. | +| Skill | Invocation | Description | +| ------------------- | -------------------- | ----------------------------------------------------------------------------------------------------------------- | +| `angular-developer` | `/angular-developer` | Loads the official Angular guidelines before writing code. Invoked automatically by the frontend agent. | +| `frontend-design` | `/frontend-design` | Aesthetic design + design-token system (light/dark), design philosophies, mobile-first. Used by `ux-ui-designer`. | +| `web-design-review` | `/web-design-review` | Accessibility / SEO / UX audit with terse `file:line` output. Used by `ux-ui-designer`. | +| `angular-pwa-seo` | `/angular-pwa-seo` | Sets up/audits PWA (manifest, service worker) and SEO (meta, JSON-LD) in Angular. Used by `ux-ui-designer`. | > **Task tracking**: this starter is not tied to any task manager. Use whatever your team already uses (Jira, Linear, GitHub Issues, etc.) or none; the orchestration does not require one.