felipebasurto/unslop-ui

Unslop UI

Edita el texto visible y la decoración cromática de una página web, pantalla de aplicación, gráfico o panel para que deje de leerse como generado por IA. Una buena interfaz se usa, no se lee: conserva las palabras que una persona necesita para actuar, y recorta el resto.

Objetivo: $ARGUMENTS (si está vacío, usa los archivos modificados en esta conversación, o pregunta).

Reglas de escritura de /pstack:unslop

Aplica estas a cada cadena que conserves. Cítalas por su número.

!python3 ${CLAUDE_SKILL_DIR}/scripts/load_unslop.py

Si la línea anterior aún muestra un comando en lugar de reglas (agentes distintos a Claude Code), ejecuta python3 scripts/load_unslop.py desde la carpeta de este skill y aplica lo que imprima.

Reglas de interfaz

Los IDs son estables. Menciónalos como U1 a U16 en el informe.

Texto de interfaz

• U1. Etiquetas ceja. Texto pequeño en mayúsculas o con espaciado encima de un encabezado ("PASAPORTE", "CARACTERÍSTICAS", "CÓMO FUNCIONA"). Elimínalo. El encabezado ya indica de qué trata la sección.
• U2. Numeración decorativa. "01 02 03", "01 // Características", "§", prefijos "//". Elimínalo a menos que el orden sea real y el usuario lo siga (pasos de un proceso de pago, una guía de instalación numerada).
• U3. Reflejo de subtítulo. Un subtítulo debajo de cada encabezado, o una línea encima del H1. Conserva solo uno cuando indique un hecho que el encabezado no menciona. "Analytics / Comprende mejor tus datos" pierde la segunda línea.
• U4. Explicación robótica. Leyendas, texto de ayuda y descripciones que narran lo que el elemento hace visiblemente ("Haz clic en el botón de abajo para comenzar", "Este gráfico muestra los ingresos a lo largo del tiempo"). Elimínalo. Los encabezados y leyendas se mantienen en 5 palabras o menos. Exento: estados vacíos, mensajes de error y confirmaciones de acciones destructivas, que pueden usar una oración completa.
• U5. Notas de diseño filtradas. Texto sobre cómo funciona la pantalla o por qué se diseñó así, paréntesis largos, "(se actualiza en tiempo real)", "(impulsado por IA)". Elimínalo, o muévelo a un tooltip si un usuario realmente lo buscaría.
• U6. Cadenas de estado. Hechos encadenados con "·" o "|" ("12 elementos · Actualizado hace 2m · Sincronizado · v2.1"). Conserva el único hecho sobre el que el usuario actúa. Coloca los demás donde se necesiten, o elimínalos.
• U7. Etiquetarlo todo. Una etiqueta que repite el marcador de posición, el icono, el texto del botón o el encabezado de la sección. Elige una sola pista. Un campo de búsqueda con un icono de lupa no necesita ni una etiqueta "Buscar" ni un marcador de posición "Buscar..." más allá de uno de ellos.
• U8. Eslóganes entrecortados y vacíos. "Único. Grande. Cosa.", "Construido de otra manera.", "Envía más rápido. Piensa menos." Reescríbelos como una sola oración que nombre la cosa y lo que hace, o elimínalos.

Decoración

• U9. Insignias y píldoras sin estado real. "EN VIVO", "NUEVO", "IA", "Beta", "Pro", "🔥 Popular" añadidos por estilo. Conserva una insignia solo si refleja datos que la aplicación realmente rastrea (una transmisión real está en vivo, un elemento es realmente nuevo desde la última visita).
• U10. Puntos de estado. Puntos pulsantes o de color (animate-pulse, rounded-full pequeños) junto al texto. Consérvalos solo si están vinculados a un estado en vivo real.
• U11. Emojis e iconos decorativos. En encabezados, botones, etiquetas de KPI y elementos de lista. Elimínalos. Un icono se queda solo si es el control en sí mismo (botón de icono con un aria-label) o si transmite un significado que el texto no tiene.

Gráficos y paneles

• U12. Títulos de gráficos que nombran el tipo de gráfico. "Gráfico de barras de ingresos mensuales" se convierte en "Ingresos mensuales", o el hallazgo: "Los ingresos se duplicaron desde marzo".
• U13. Instrucciones de lectura. Subtítulos o leyendas que explican cómo leer el gráfico ("Cada barra representa un mes", "Pasa el cursor para más detalles"). Elimínalos.
• U14. Decirlo dos veces. Cada cantidad recibe una única codificación. Una barra, un número sobre la barra, una línea de cuadrícula a su altura y una marca de eje que dicen el mismo valor son tres de más; un KPI con flecha más porcentaje más la palabra "subió" más una oración debajo ("Los ingresos crecieron un 12% en comparación con el mes pasado") es el mismo error en texto. Conserva la codificación que el lector necesita: ejes y líneas de cuadrícula para la forma, un valor impreso para el número que importa (a menudo solo el último punto o el máximo).
• U15. Andamio del gráfico que compite con los datos. Un recuadro alrededor del área de trazado, líneas de cuadrícula oscuras o densas, marcas menores, bordes de eje gruesos, 3D, sombras paralelas y brillos en las marcas, fondos de relleno detrás del trazado. Elimínalos, o haz que lo que debe permanecer (algunas líneas de cuadrícula, una línea base) sea una línea fina en gris claro. Datos arriba, etiquetas al lado, andamio más tenue. No rediseñes el gráfico: mismo tipo, mismos datos, mismos colores de serie.
• U16. Leyenda donde funciona una etiqueta directa. Un recuadro de leyenda que obliga al lector a emparejar colores con nombres, cuando el nombre podría colocarse al final de la línea o junto a la barra. Etiqueta la serie directamente, idealmente con su último valor ("Este año 1.150"), y elimina la leyenda. Conserva una leyenda para más de cuatro series o cuando las marcas estén demasiado juntas para etiquetarlas.

Para pares antes/después, consulta references/examples.md cuando no estés seguro de hasta dónde recortar.

Barreras de seguridad

• Cambia solo texto visible y elementos decorativos. No toques lógica, datos, colores, tokens de espaciado ni estructura de diseño. La única excepción es el andamio del gráfico según U15, que puede adelgazarse o aclararse.
• Cuando elimines un elemento, elimina también su contenedor ahora vacío y cualquier margen o espacio que existiera solo para él. Un contenedor que queda con un solo hijo que solo existió para agrupar también se elimina.
• Nunca elimines aria-label, alt, title en botones de icono, ni texto solo para lectores de pantalla. Si el texto visible eliminado era el único nombre accesible, muévelo a aria-label.
• Texto que proviene de datos, props, archivos i18n o un CMS: edítalo en su origen (el archivo de traducción, el fixture) o repórtalo; no codifiques un reemplazo en el componente.
• Si un caso marcado se justifica (estado real, orden real, texto legal), consérvalo y explica por qué en el informe.

Procedimiento

Copia esta lista de verificación y hazle seguimiento:

- [ ] 1. Contar: python3 ${CLAUDE_SKILL_DIR}/scripts/count_tells.py <objetivo>   (${CLAUDE_SKILL_DIR} es la carpeta de este archivo)
- [ ] 2. Leer cada cadena visible y elemento decorativo; etiqueta cada problema con U1-U16 o un número de regla unslop
- [ ] 3. Editar
- [ ] 4. Volver a contar con el mismo comando
- [ ] 5. Informar

El contador es una heurística de expresiones regulares. Encuentra candidatos y da un número antes/después. Omite U3, U4, U5, U7, U8, U12, U13 y U14, que requieren lectura. Para U15 y U16 solo ve las formas de código (sombras, bordes de eje y líneas de cuadrícula gruesos, leyendas activadas). También marca algunos casos legítimos. Tu lectura en el paso 2 es la verificación real.

Formato del informe:

Regla	Antes	Después
U1 ceja	6	0
unslop 13 guion largo	4	0

Luego enumera lo que conservaste a propósito, una línea cada uno, con la razón.