SKILL.md

---
name: argui-prototipo
description: >-
  Andamiaje del prototipo trazable de Argui (fase 3). Úsala al construir o iterar el
  prototipo navegable —un solo archivo HTML con switch de modo— para cablear trazabilidad
  al PRD por ID de requisito, modo prototipo, comentario por bloque, export de feedback
  (Markdown/JSON) y envío opcional por Formspree.
---

# Skill: andamiaje de prototipo trazable (Argui)

Esta skill es el **envoltorio de Claude Code** sobre el artefacto portable de
`templates/prototype/`. El mecanismo no requiere la skill; la skill solo automatiza su uso.

## Cuándo usarla

- En la **fase 3** de Argui, al construir o iterar el prototipo navegable.
- La invoca el **agente UX/UI (experiencia / interfaz de usuario)** (o el agente padre) antes de implementar trazabilidad/feedback
  a mano. No reimplementes esta maquinaria por proyecto.

## Cuándo NO usarla

- Para el diseño visual en sí (paleta, tipografía, layout): eso es criterio del agente UX/UI +
  la skill de diseño (p. ej. `frontend-design`). Esta skill es solo el andamiaje de
  trazabilidad y feedback.

## Qué hace

1. Pega `argui-prototipo.css` y `argui-prototipo.js` inline en el archivo único del prototipo,
   con `data-proyecto`, `data-prd-base` y, si el cliente aprobó el envío a un tercero,
   `data-formspree`.
2. Cablea cada bloque de UI con `data-prd="RF-12 · descripción"` —empezando por el **ID estable**
   del requisito— y las dudas con `data-prd-note`.
3. Declara las dimensiones del prototipo (`data-roles`, `data-fases`, `data-escenarios`) y cablea
   los bloques con `data-cuando-rol` / `data-cuando-fase` / `data-cuando-escenario`. Es el
   mecanismo del refinamiento de F3.5: los estados de vacío, carga, error y permiso denegado se
   ven cambiando de escenario, no editando el archivo.
4. Deja disponible `check-consistency.mjs` para validar los IDs prototipo ↔ PRD (Product Requirements Document) (ideal en CI o
   pre-commit).

## Pasos

1. Lee el `README.md` de `templates/prototype/` para los detalles de cableado.
2. Copia el andamiaje al prototipo: inline al entregar, o como archivos externos mientras se
   desarrolla.
3. Edita el HTML del prototipo según el README. Un prototipo, un archivo: las pantallas se
   navegan mostrando y ocultando secciones, no enlazando a otros archivos.
4. Corre `node check-consistency.mjs --proto prototipo.html --prd prd.md` y corrige toda
   referencia rota antes de cerrar el cambio.

## Reglas que no se rompen

- **Un archivo por prototipo.** Solo se parte cuando editarlo se vuelve inmanejable (más de ~15
  pantallas), por área funcional y con el mismo `data-proyecto`.
- **Se traza por ID, no por sección.** `RF-12`, no `§7.3`: el ID sobrevive a la partición del PRD
  en F3.4.
- **Con el modo apagado, el prototipo se ve como producción.** Nada del andamiaje puede filtrarse
  al lienzo: ni insignias, ni notas, ni resaltes.

## Recordatorio de la DoD

Todo cambio al prototipo actualiza las superficies que toca: HTML, prosa del PRD, `data-prd`,
specs y —cuando toca apariencia— el design system. Ver `methodology/prototype.md`.