sukirman1901/polish

¿Qué hace polish?

Descripción general

Después de los tokens, la estructura y el anti-slope, aplique micro-artesanía para que la UI se sienta bien en la superficie renderizada. Las recetas numéricas aquí son heurísticas a menos que un estándar o token de proyecto las posea.

Cuándo usarlo

• Finalizando builds /ui (después de anti-slop-design)
• /polish / "rapihin detail" / "se siente extraño"
• Micro-interacciones de hover, press, enter/exit, intercambio de iconos

Cuándo omitirlo

• Cuadrícula estructural/espaciado/jerarquía → design-foundations
• Comparar direcciones renderizadas / estresar todos los estados → prototype
• Lenguaje de radio/elevación anidado → design-surfaces
• Roles de tipo, envoltura, truncamiento → design-typography
• Conformidad (contraste, nombres, teclado) → accessibility
• Sistemas de movimiento / familias nombradas → motion
• Solo copia / "tulisan AI" / redacción de estado vacío → content-design
• "Rapikan kode" / implementación generada → anti-slop-code
• Ediciones solo de backend sin cambio de UI renderizada

OBLIGATORIO

Regla	Detalle
Prueba renderizada	Juzgar envoltura, alineación, presión y radio desde la UI renderizada, no solo desde el código fuente
Tokens primero	Usar tokens --radius, espaciado y tipo; no inventar valores únicos cuando exista un token
Clasificar recetas	Etiquetar 0.96, ms de escalonamiento y números similares como heurísticas
Corrección válida más barata	Eliminar decoración → CSS nativo → reutilizar tokens del proyecto → luego agregar abstracción
Artesanía móvil	CTA primario de ancho completo <768; safe-area en chrome adhesivo; acciones alcanzables con el pulgar
Sin transition: all	Nombrar propiedades; omitir el transition simple de Tailwind
Prueba de geometría de control	Renderizar la matriz de control completa, incluyendo pendiente/carga y LTR/RTL aplicable, antes de aceptar la alineación óptica

Puntos de partida de artesanía

Preocupación	Punto de partida	Clase	Transferencia
Esquinas anidadas	Exterior ≈ interior + sangría cuando las curvas comparten centro	Heurística	design-surfaces
Icono en control	Empujón óptico sobre el centro geométrico	Recomendación	—
Profundidad de sección	Lenguaje de borde/elevación del proyecto	Valor predeterminado del proyecto	design-surfaces
Hover/toggle	Transiciones CSS interrumpibles	Recomendación	motion si hay coreografía
Presión	scale(0.96) si se desea feedback de presión	Heurística	—
Números dinámicos	tabular-nums	Recomendación	design-typography
Títulos cortos	text-wrap: balance	Recomendación	design-typography
Área de impacto	44×44 táctil / ≥40 escritorio denso	Recomendación	accessibility para WCAG 2.5.8 (24px)

Excepciones: píldoras/círculos, barras de herramientas densas (deshabilitar scale de presión), movimiento reducido, lenguaje de marca no concéntrico, imágenes que no necesitan contornos.

Geometría de control

• Matriz de variantes ópticas renderizadas: solo texto, icono principal, icono final, solo icono y pendiente/carga.

El centrado geométrico (inline-flex / items-center / justify-center) es necesario pero no es prueba. No hay desplazamiento de píxel universal: compare primero la matriz renderizada, luego aplique la compensación más pequeña dentro de la ranura fija del icono o el glifo.

Juzgue si el grupo de contenido combinado icono-etiqueta y su masa visual percibida están equilibrados y centrados en todas las variantes y estados. Evalúe la relación de la línea base/altura de mayúsculas de la etiqueta con el icono por separado; la etiqueta en sí no necesita ocupar el centro del control en una variante icono+texto. Verifique el peso visual del icono, el espacio del token, el relleno simétrico del token, el foco, el área de impacto, deshabilitado, y pendiente/carga juntos, sin cambios no intencionados en el grupo de contenido o el ancho del control. Incluya tanto LTR como RTL cuando el producto lo admita.

La geometría pendiente estable es el valor predeterminado. Para una excepción explícita de morfología medida (references/component-patterns.md), inspeccione ambos puntos finales y la reproducción objetivo, confirme que las acciones vecinas permanecen estables e informe la excepción con evidencia. Una morfología deliberada no excusa cambios accidentales de spinner o nombres accesibles faltantes.

Flujo de trabajo

1. Alcance — nombre la superficie; omita el trabajo estructural o del sistema de tokens.
2. Escaneo — renderizado 1x/2x, claro/oscuro, hover/press/focus, ancho móvil.
3. Matriz de control — compare solo texto, icono principal/final, solo icono, pendiente/carga y LTR/RTL aplicable al tamaño renderizado.
4. Corrección — cambio válido más barato; mapee valores a tokens; mantenga la compensación óptica dentro de la ranura del icono.
5. Reporte — tablas de Antes/Después agrupadas por principio; marque los estados no inspeccionados como No verificado.

Límites

• Puede decidir: empujones ópticos, transiciones nombradas, tabular-nums, ayudantes de envoltura, feedback de presión cuando el proyecto no tiene ninguno.
• No debe: tratar 0.96, rebote 0, o radio concéntrico como ley universal; pulir sobre un diseño roto; reemplazar fuentes de marca.

Lista de verificación

• Radios anidados verificados ópticamente (o entregados a design-surfaces)
• Iconos centrados ópticamente donde se veían extraños
• Matriz de control renderizada completa verificada: solo texto, icono principal/final, solo icono, pendiente/carga y LTR/RTL cuando corresponda
• Grupo combinado icono-etiqueta/masa visual percibida centrada; línea base/altura de mayúsculas de la etiqueta, peso visual del icono y espacio/relleno del token verificados
• Foco, área de impacto, deshabilitado y carga preservan la geometría sin cambio de etiqueta o ancho
• Sin transition: all; hover/press interrumpible
• Números dinámicos usan tabular-nums donde vibrarían
• Encabezados text-balance; copia corta text-pretty donde sea útil
• Áreas de impacto cumplen la guía 44/40 sin superposición
• Artesanía móvil: primario de ancho completo <768, safe-area, zona del pulgar
• Heurísticas etiquetadas; estados no probados marcados No verificado

Profundidad

Ejemplos completos: references/polish.md. Relacionado: design-surfaces, design-foundations, design-typography, motion, accessibility, references/evidence-policy.md.