Communitygithub.com

revisión-de-tema

Úsalo solo cuando el usuario solicite revisar o auditar un tema de interfaz de usuario, tokens de diseño o un diseño o código base para verificar consistencia visual y reutilización de componentes en relación con su tema. No lo uses para revisiones de código general, revisiones de flujo de UX o trabajo no relacionado con la interfaz de usuario.

¿Qué es revisión-de-tema?

Esta habilidad, denominada 'theme-review', permite auditar cómo un proyecto se adhiere a su tema de diseño definido, evaluando tanto la solidez del archivo del tema como el uso real del tema en los diseños y el código. Es útil para garantizar consistencia visual, identificar desviaciones y proponer mejoras concretas al tema, evitando inventar nuevos temas desde cero. La revisión se basa en reglas predefinidas en archivos compartidos como `rules.md` y `checklist.md`, y admite diversos objetivos de revisión: código fuente, diffs, PRs, artefactos de canvas o capturas de pantalla. Los resultados se presentan como una lista clasificada de hallazgos, cada uno con evidencia (confirmada o probable), gravedad, regla violada y una solución concreta, además de un conjunto de cambios propuestos para el tema. La herramienta utiliza scripts de Node.js para escanear valores en el código, verificar tokens y analizar la composición visual, proporcionando una auditoría automatizada pero con verificación manual requerida antes de reportar un hallazgo.

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/mrgnhnt96/ultrahand/tree/main/skills/theme-review

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

ultrahand: theme-review

Audita qué tan bien un proyecto se adhiere a su tema: si el archivo del tema es sólido en sí mismo y si los diseños y el código realmente lo utilizan. La salida es una lista clasificada de hallazgos más una lista de cambios propuestos al tema. El revisor se basa en el tema del proyecto; nunca inventa uno nuevo. Una brecha en el tema se convierte en una adición propuesta para la habilidad theme, no en una paleta nueva.

Las reglas están en shared/theme/rules.md (no negociables NN-n, ejes creativos CR-n, reglas de evolución EV-n); cada verificación está en references/checklist.md, y ambas citan shared/theme/sources.md. Para problemas de UX más allá del tema (flujos, etiquetas, convenciones de plataforma), dirige a la habilidad review.

Los scripts a continuación residen en ${CLAUDE_PLUGIN_ROOT}/shared/theme/.

1. Obtén el tema y el objetivo

  • El tema: encuentra design/THEME.md y el archivo de tokens (búscalo como lo hace el paso 1 de la habilidad theme). Lee THEME.md: su personalidad, qué decisiones están bloqueadas, su inventario de componentes y su registro de cambios. Esos son los estándares a los que se debe ajustar el objetivo.
  • Sin tema aún: no inventes uno. Ejecuta node scan.mjs <directorio src> para mostrar los valores que el código usa hoy, y revisa solo contra los no negociables. Recomienda la habilidad theme para extraer un tema a partir de eso, y coloca los grupos principales del escaneo en el informe como punto de partida.
  • El objetivo: código (una carpeta de origen, un diff o un PR), un artefacto de canvas, o una captura de pantalla. Como en review, indica cuál tienes y marca cada hallazgo como Confirmado (medido en código, el archivo de tokens o el canvas) o Probable (juzgado a partir de una imagen). Para un diff, revisa lo que cambia y nota cualquier desviación que añada.

2. Ejecuta las verificaciones

  1. Archivo del tema: node check.mjs design/theme.tokens.json --json. Cada error es un hallazgo; lee la tabla de contraste para ambos esquemas.
  2. Uso de tokens en código: node scan.mjs <directorio src> --theme design/theme.tokens.json.
    • valores sin formato que coinciden con un token: una copia hardcodeada de un valor del tema. Cuando el tema cambie, estos no lo harán [HIG-COLOR] [PRIMER-LINT].
    • valores sin token: desviación del tema. Cada uno es o un error (ajústalo al token más cercano mostrado) o una necesidad real (propón un token).
    • tokens que ningún archivo menciona: posiblemente no utilizados. Confírmalos antes de proponer su eliminación; el escaneo coincide con nombres por patrón.
    • colores casi duplicados y espaciado fuera de la cuadrícula: un hallazgo por grupo, no por línea. También busca tokens primitivos usados directamente en código (primitive., o el equivalente de la plataforma), que omiten el rol (NN-1).
  3. En el canvas o en una página en vivo: lee los estilos calculados de los elementos bajo revisión. La auditoría de composición (shared/composition/audit.mjs, ejecutada a través de shared/input/drive.mjs) informa estilos de control, tamaños de texto y espacios por sección, lo que muestra de inmediato un segundo estilo de botón o un tamaño de texto fuera de lugar.
  4. Trabaja a través de las pasadas en references/checklist.md: salud del tema, uso de tokens, reutilización de componentes, consistencia entre pantallas, ambos esquemas y carácter.

Los scripts encuentran patrones, no pruebas. Abre cada pista y confírmala antes de que se convierta en un hallazgo.

3. Clasifica e informa

Clasifica con la misma escala 0–4 que review (consulta su guía de gravedad en la lista de verificación), usando los anclajes en la lista de verificación de esta habilidad. Un problema en muchos lugares es un hallazgo con un recuento y sus ubicaciones principales.

## Veredicto
<Versión del tema y objetivo, evidencia, recuentos por gravedad, la mayor fuente única de desviación.>

## Hallazgos
### T1 · 3 Grave · <título corto>
- **Dónde:** <archivo:línea, pantalla › elemento, o ruta de token>; ×<recuento>
- **Evidencia:** Confirmado | Probable
- **Problema:** <qué se desvía y qué costo tiene: inconsistencia que la gente ve, o un valor que no seguirá el próximo cambio de tema>
- **Regla:** <NN-n / EV-n / CR-n> [<clave de fuente>]
- **Solución:** <concreta: "reemplazar #8e3f27 con var(--color-primary) en 3 lugares">

## Cambios propuestos al tema
<Para que la habilidad `theme` los aplique. Cada uno: añadir / deprecar / bloquear, el token o decisión, su valor como alias, por qué y qué hallazgos lo necesitan. Omite cualquier cosa que los tokens existentes ya cubran.>

## Qué funciona
## No revisado

Mantén las soluciones dentro del tema: ajusta primero a un token existente, propón un token en segundo lugar, y nunca sugieras un valor que rompa un no negociable. Ofrece aplicar las correcciones de código y ejecutar la habilidad theme para los cambios propuestos.

Individual skills in this repo

This repo contains 5 individual skills — each has its own dedicated page.

Skills relacionados