Communitygithub.com

taste

Audita una app web viva, genera una contrapropuesta en un clon con rama propia y produce un informe antes y después, todo sin escribir en el repositorio original.

¿Qué es taste?

Taste es una skill para agentes de IA (como Claude Code, Cursor, Codex) que permite auditar y limpiar la interfaz de usuario de una aplicación web activa. Realiza capturas por vista, identifica hallazgos con su fuente (archivo:línea), asigna puntajes por tier (A, AA, AAA) y genera una propuesta de mejora en un clon del repositorio con una rama separada, produciendo un informe completo de antes y después. La skill está diseñada para revisar, limpiar, corregir o mejorar la interfaz sin tocar el repositorio analizado. Soporta múltiples modos (corrección, limpieza, mejora, edición, creación) y perfiles configurables (mundo y perfil). Taste distingue entre ruido base de la aplicación y cambios reales, y fuerza criterios de UX, DX y AX para descartar cambios que empeoren la experiencia. Además, integra la skill 'stageshow' para mostrar el producto limpiado en escenarios visuales, usando marcos dorados personalizables.

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/madebyjred-sudo/taste/tree/HEAD/skill

Preguntar en tu IA favorita

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

Documentación

¿Qué hace taste?

Audita una app web viva (capturas por vista, hallazgos con fuente, puntaje por tier) y produce una contrapropuesta en un clon con rama propia, con informe antes y después. Nunca escribe en el repo analizado.

Cuándo usarlo

  • Te piden revisar, limpiar, corregir o mejorar la interfaz de un repo con servidor de desarrollo.
  • Quieres pruebas visuales de un cambio de UI antes de llevarlo al repo real.

Perfiles y mundos

  • perfiles/REPO.json en el repo de taste: mundo (shift | personal), perfil (libre | estricto), url, arranque, lecturas_permitidas (lista {metodo, ruta} de peticiones POST que solo leen; el resto se bloquea), previo ({nombre, puerto, comando}: lo que el servidor necesita antes de arrancar, p. ej. un túnel ssh a la base de desarrollo; taste lo abre si el puerto está cerrado y cierra solo lo que abrió), entorno (variables extra para el servidor: apaga trabajos de fondo que escriben, p. ej. un barrido periódico).
  • Una corrida solo lee biblioteca/externa y la biblioteca de su mundo. Nunca la del otro.
  • Estricto (productos de cliente con marca cerrada): nunca cambies tokens ni marca ni agregues piezas.

Tiers

A (lo mínimo), AA (por defecto, A + AA), AAA (todo). El puntaje del tier usa los hallazgos de ese tier y los de abajo.

Los cinco modos

modoqué hace
correccionarregla hallazgos sin cambiar layout ni piezas
limpiezasolo quita: eslogan, textos de ayuda, etiquetas secundarias, duplicados, estilos muertos; voseo a tuteo y em-dash fuera
mejorapule dentro del esquema actual
edicionsolo lo pedido en --pedido TEXTO
creacionpantalla o componente nuevo desde la biblioteca

De punta a punta

  1. taste MODO --repo RUTA --tier AA [--solo VISTA] [--agente ninguno|claude] [--pedido TEXTO] Audita, escribe paquete/VISTA.md por vista, clona a CORRIDA/arbol en la rama taste/AAAAMMDD-HHMM-MODO y escribe CORRIDA/TAREA.md. Con ninguno imprime la frase para pegar en tu agente.
  2. Lee TAREA.md y cada paquete (capturas, hallazgos por regla con archivo:línea, reglas que aplican, inspo y componentes del mismo patrón).
  3. Escribe CORRIDA/criterios.json: uno por hallazgo o grupo de la misma regla. Cada criterio lleva regla (id de reglas.json o inspo:ID), criterio (una frase imperativa), por_que (con la fuente archivo:línea), ux, dx, ax (mejora | igual | empeora + 5 palabras), accion, componente, archivos, estado, motivo_descarte.
    • Si algo empeora UX, DX o AX, se descarta (taste lo fuerza).
    • En limpieza, todo lo que no sea quitar queda propuesto.
  4. Aplica en el árbol solo los aplicado, un commit por criterio o grupo. Nunca push.
  5. Corre el chequeo de tipos del árbol (npx tsc --noEmit si hay tsconfig).
  6. taste comparar --corrida CORRIDA: levanta el árbol en puerto + 1, repite las mismas vistas, captura en capturas/despues, re-detecta, corre guardas y genera informe.html.

Ruido base

La auditoría captura cada vista dos veces sobre el mismo árbol y guarda en vista.ruido cuánto cambia sola (datos vivos, relojes, carga diferida). Las guardas suman ese ruido al tope de 0,5 % de las vistas no tocadas. --sin-ruido lo salta (corre la mitad de rápido, pero las guardas quedan más estrictas de lo justo). Cada captura usa un contexto de navegador nuevo: el estado que deja un clic (barra plegada en localStorage) no pasa a la vista siguiente.

Leer el informe

  • Arriba: puntaje global antes, después y delta por tier; índice de vistas con su delta.
  • Por vista: escritorio y móvil antes y después, cada criterio con regla, fuente, ux/dx/ax y estado.
  • Guardas no ok o un delta negativo: no lleves la rama. Revisa el motivo.
  • Traer la rama: git fetch CORRIDA/arbol RAMA.

Escenas: mostrar el producto (Stageshow)

Taste limpia la app real; para mostrarla (hero de landing, tarjeta de feature, demo animada) se usa la skill stageshow de Benji Taylor tal cual, con las reglas de Taste encima. No es otro comando.

  • Marco por defecto: el gold finder-glass (escenario 860 x 440, ventana en 40/40/780/480 que sangra por abajo; compacto 400 x 340, ventana en 20/20/460/400 que sangra a la derecha y abajo; radio 14; fondo de tres capas recoloreado a la marca). Geometría y capturas: biblioteca/externa/golds/marco-finder-glass.md.
  • Antes de construir, capturar la app real con sesión de prueba (solo lectura) y tomar sus tokens del CSS.
  • Escenas aprobadas = gold propio por mundo, en biblioteca/<mundo>/escenas/ (o en TASTE_BIBLIOTECA_SHIFT para un segundo mundo de trabajo).
  • Ensayo: film.mjs --gate de Stageshow es pista, no veredicto (en sus propios golds pasa la mitad).
  • Después de limpiar con Taste, la escena se arma sobre la pantalla ya limpia: primero el producto, luego cómo se muestra.

Trampas

  • Si una vista sale en error, mira vista.error: bloqueada POST /api/... indica una lectura POST que falta en lecturas_permitidas (agrégala solo si leíste el código y no escribe); 500 suele ser la base de datos o un túnel caído: revisa la nota de previo en corrida.notas.
  • El árbol enlaza node_modules del original: no instales dependencias en el árbol.

Skills relacionados