본문으로 건너뛰기
cccskills
무료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").

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

brayandiazc/project-starter-template-es-ai
설치 방법 보기

포함된 파일(1)

  • SKILL.md2.9 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

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.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

accessibility-audit

무료

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

brayandiazc/project-starter-template-es-ai152026년 9월 23일 업데이트

actualizar-plantilla

무료

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

brayandiazc/project-starter-template-es-ai152026년 9월 23일 업데이트

changelog

무료

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

brayandiazc/project-starter-template-es-ai152026년 9월 23일 업데이트

commit

무료

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.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

brayandiazc/project-starter-template-es-ai152026년 9월 23일 업데이트

configurar-repo

무료

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

brayandiazc/project-starter-template-es-ai152026년 9월 23일 업데이트

copywriting

무료

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

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

brayandiazc/project-starter-template-es-ai152026년 9월 23일 업데이트

brayandiazc의 스킬 모두 보기

이 스킬의 문제 신고