¿Qué hace unslop-components?
Las aplicaciones generadas por IA comparten una silueta: un título de página, una fila de cuatro tarjetas KPI, una tabla, un formulario con desplegables. Es correcto y olvidable. Los componentes deberían estar moldeados por lo que son los datos, no por lo que ofrece la biblioteca de componentes.
Construye primero sobre la base (unslop-foundation): tokens de paleta, estilo de iconos, sistema de ilustraciones, lenguaje de movimiento y una hoja de componentes aprobada. Los componentes de aquí usan esos tokens y partes; no inventan colores ni estilos.
La lista de prohibiciones (aspecto predeterminado)
Piensa primero en componentes: nombra los bloques de construcción del producto, constrúyelos y revísalos, luego compón las pantallas. No entregues una pantalla cuyo contenido principal sea cualquiera de estos, a menos que los datos realmente lo sean:
-
filas o grupos separados por bordes y líneas finas (separa con espacio y tono)
-
un formulario etiquetado (cuadrícula de campos más Guardar) como forma de editar; usa los patrones de edición en
unslop-foundation/references/designer-standard.md -
una fila de tarjetas KPI/de estadísticas (usa una frase, o muestra el número dentro de la cosa que mide)
-
una tabla con desplegables de edición en las celdas (las tablas son para comparar muchos atributos de muchas filas)
-
una cuadrícula uniforme de tarjetas idénticas
-
un formulario como interfaz principal (los formularios son para introducir datos, no para mirarlos)
-
estado como texto de color plano o píldoras con solo un nombre (dale al estado una forma, ver más abajo)
-
gráficos circulares para progreso, indicadores, anillos de donut como decoración
Proceso (por pantalla)
- Nombra la forma de los datos. Secuencia/trayecto, partes de un todo, comparación, relación, cambio en el tiempo, clasificación, ubicación, jerarquía, o un flujo de cosas que requieren atención.
- Elige la forma que se ajusta a los datos de
references/patterns.md. Escribe una línea: "Esta pantalla es un mapa de ruta porque los datos son un flujo ordenado por área." - Define un componente característico por pantalla: aquello que un usuario recordaría. Lleva la riqueza; todo lo demás es texto tranquilo y líneas finas.
- Dale al estado un lenguaje visual con al menos dos canales (forma/relleno y color, no solo color), usado de forma idéntica en cada pantalla.
- Muestra, luego edita. La vista predeterminada es de solo lectura. La edición vive un nivel más profundo (un bloque de detalles, un cajón, una página de detalle), no en cada fila.
- Manipulación directa sobre controles. Filtros que también son la leyenda. Haz clic en la cosa en lugar de un botón "Ver". Arrastra solo si reemplaza un desplegable con algo más rápido.
- Varía la densidad. Un momento grande, un medio tranquilo, un pequeño detalle de apoyo. No cinco cajas iguales.
- Verifica contra el filtro de abajo.
Filtro
- El elemento principal de la pantalla no es una tabla, una cuadrícula de tarjetas, una fila de estadísticas o un formulario.
- Una razón de una línea vincula el componente elegido con la forma de los datos.
- El estado usa forma/relleno más color y es consistente entre pantallas.
- Solo lectura: ninguna pantalla tiene más de un puñado de desplegables o entradas visibles sin un clic.
- El componente sigue funcionando a 360 px (se envuelve, apila o desplaza intencionadamente) y es accesible mediante teclado con foco visible.
- Se respeta el movimiento reducido; nada anima solo para decorar.
- Lo has mirado: capturas de pantalla tomadas con Playwright MCP (
claude mcp add playwright npx @playwright/mcp@latest) a 360 px y 1280 px. Si no pudiste mirar, dilo; no llames creativa o terminada a una pantalla solo desde el código.
Cuándo las tablas son correctas
Muchas filas, muchas columnas comparables, la ordenación importa (registros de auditoría, listas de precios, exportaciones). Entonces diseña la tabla: números tabulares, columnas alineadas, reglas silenciosas, resaltado de fila, sin rayas de cebra ni celdas enmarcadas, y sin controles en las celdas.
Archivos
references/patterns.md- catálogo de forma de datos a componente, lenguaje de estado, ejemplo trabajado (mapa de ruta para flujos de producto)