Skip to content
cccskills
FreePublished on GitHub

design-system-audit

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").

The English summary is being prepared. Showing the original description.

brayandiazc/project-starter-template-es-ai
See how to install

Files included (1)

  • SKILL.md2.9 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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:

  1. 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).

  2. 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.

  3. 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.

  4. Estados de interacción: default, hover, active y disabled. (El foco visible y la navegación por teclado los audita /accessibility-audit.)

  5. 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.

  6. 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.)

  7. 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.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

accessibility-audit

Free

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").

The English summary is being prepared. Showing the original description.

brayandiazc/project-starter-template-es-ai15Updated Sep 23, 2026

actualizar-plantilla

Free

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").

The English summary is being prepared. Showing the original description.

brayandiazc/project-starter-template-es-ai15Updated Sep 23, 2026

changelog

Free

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").

The English summary is being prepared. Showing the original description.

brayandiazc/project-starter-template-es-ai15Updated Sep 23, 2026

commit

Free

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.

The English summary is being prepared. Showing the original description.

brayandiazc/project-starter-template-es-ai15Updated Sep 23, 2026

configurar-repo

Free

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").

The English summary is being prepared. Showing the original description.

brayandiazc/project-starter-template-es-ai15Updated Sep 23, 2026

copywriting

Free

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").

The English summary is being prepared. Showing the original description.

brayandiazc/project-starter-template-es-ai15Updated Sep 23, 2026

See all skills by brayandiazc

Report a problem with this skill