Audita una vista o componente frente al design system en lo que un script no puede comprobar — estados de interacción, los cuatro estados de datos, primitivas nativas frente a componentes reinventados y jerarquía visual. Úsalo cuando la persona pida revisar el cumplimiento del design system o si un componente sigue las guías (p. ej. "¿esta tarjeta sigue nuestro sistema?", "audita la vista de ajustes").
インストールする前に、エージェントに与えられる指示の中身を確認できます。
Audita la UI indicada frente al design system de design/.
Los colores no los revisas tú. El job Design system del CI
(.github/scripts/check-design-tokens.sh) ya falla ante cualquier hex, rgb(),
utilidad de paleta (bg-blue-500) o valor arbitrario (bg-[#0A7A9D]) en las vistas.
Si crees ver un color crudo, es que el check no cubre esa ruta: dilo, y propón añadir
la carpeta al script en vez de convertirte en un linter humano.
Tu trabajo es lo que ningún script puede comprobar:
Lee design/README.md (el sistema) y docs/conventions/ui.md (cómo se organizan
las vistas y dónde están los assets de marca).
Primitiva nativa antes que componente reinventado. Un diálogo hecho con <div>
y position: fixed es un hallazgo aunque se vea bien: <dialog>, <details> y
popover traen foco, teclado y Escape resueltos por el navegador. Si hay un
componente custom donde había una primitiva, señálalo con el reemplazo concreto.
Si el componente custom es inevitable, señálalo y remite su accesibilidad
(focus trap, Escape, aria-*, tabulación) a /accessibility-audit — esa lista
vive allí, en un solo sitio, a propósito.
Estados de interacción: default, hover, active y disabled. (El foco visible y
la navegación por teclado los audita /accessibility-audit.)
Los cuatro estados de datos, en toda vista que cargue algo: loading (skeleton con la forma del contenido, no un spinner genérico ni "Cargando…"), empty (icono + por qué está vacío + CTA que oriente), error (mensaje + acción de reintento) y éxito. El estado vacío es el que más define el producto y el que más se salta.
Ambos temas: claro y data-theme="dark" — que la vista use los tokens en los
dos y ninguna pieza quede pegada a un solo tema. (La medición de contraste AA es
de /accessibility-audit; design/preview.html la trae para los tokens base.)
Jerarquía antes que decoración: ¿se entiende qué es lo importante de la vista sin leer el texto? Espaciado y peso tipográfico antes que bordes y sombras.
Informa una lista: cada ítem Pasa / Falla, con archivo:línea y la corrección
concreta. Ejemplo: Modal.tsx:12 — <div role="dialog"> sin focus trap; usa <dialog>.
NO rediseñes ni reestilices por iniciativa propia: informas y propones. Para una
revisión de accesibilidad completa (contraste medido, lectores de pantalla), usa
accessibility-audit. design/ siempre manda.
まだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
Revisa los cambios de UI en cuanto a accesibilidad — contraste de color, navegación por teclado, gestión del foco, uso de ARIA y texto alternativo. Úsalo cuando la persona pida una revisión de a11y/accesibilidad, verificar el cumplimiento de WCAG, el soporte de teclado, la compatibilidad con lectores de pantalla o el manejo del foco (p. ej. "¿es accesible este modal?", "audita la a11y del formulario").
日本語の概要は準備中です。原文の説明を表示しています。
Trae a este proyecto las mejoras que la plantilla de origen recibió después de la instanciación — lee .template-origin, calcula el diff del tooling (skills, hooks, scripts, workflows) contra la plantilla actual y propone aplicarlo. Úsalo cuando la persona quiera actualizar/sincronizar el proyecto con la plantilla (p. ej. "actualiza la plantilla", "trae las mejoras nuevas del template").
日本語の概要は準備中です。原文の説明を表示しています。
Actualiza CHANGELOG.md en el formato Keep a Changelog, añadiendo los cambios actuales bajo la sección Unreleased. Úsalo cuando la persona pida actualizar el changelog, añadir una entrada al changelog o registrar lo que cambió para las notas de la versión (p. ej. "añade esto al changelog", "actualiza el CHANGELOG con estos commits").
日本語の概要は準備中です。原文の説明を表示しています。
Escribe un mensaje de Conventional Commits para los cambios en stage y crea el commit, incluyendo la línea de coautoría de atribución de IA. Úsalo cuando la persona pida hacer commit, escribir un mensaje de commit o guardar cambios (p. ej. "haz commit de esto", "escribe un mensaje de commit para estos cambios"). No hace push.
日本語の概要は準備中です。原文の説明を表示しています。
Configura el repositorio de GitHub de punta a punta con gh — descripción, topics, labels, rama develop, protección de ramas, merge settings y metadatos — a partir de la definición del producto. Úsalo al crear el repo de un proyecto nuevo o cuando haya que poner en orden uno existente (p. ej. "configura el repo", "prepara el repositorio en GitHub", "pon los labels y la protección de ramas").
日本語の概要は準備中です。原文の説明を表示しています。
Revisa o produce textos visibles para la persona usuaria (texto de UI, encabezados, botones, mensajes de error, marketing) con la voz y el tono del proyecto. Úsalo cuando la persona pida escribir/mejorar textos, corregir la redacción, revisar el tono o redactar microcopy (p. ej. "escribe el texto del estado vacío", "haz este mensaje de error más amable", "revisa el titular de la landing").
日本語の概要は準備中です。原文の説明を表示しています。