Skip to content

docs(readme): document ux-ui-designer subagent and its skills #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dherrero merged 1 commit into from
Jun 10, 2026
Merged

docs(readme): document ux-ui-designer subagent and its skills #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 41 additions & 7 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
```

Expand All @@ -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

Expand Down Expand Up @@ -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

Expand All @@ -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.

Expand Down
54 changes: 44 additions & 10 deletions docs/README_eng.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
```

Expand All @@ -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

Expand Down Expand Up @@ -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

Expand All @@ -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.

Expand Down
Loading