kimjusnu/miseui

Mise UI

UI que se explica a sí misma. Cada componente incluye el principio detrás de su forma y una regla sobre cuándo no usarlo. Conserva ambos al instalar o adaptar uno.

Cuándo usarlo

• El proyecto es React + Tailwind CSS v4 con un components.json estilo shadcn
• La pantalla tiene un paso de IA: espera en un modelo, texto en streaming, llamadas a herramientas, razonamiento, entrada de voz
• Necesitas un kit base (botón, diálogo, select…) cuya justificación puedas citar en una revisión de diseño

Instalación

1. Tema, una vez por proyecto: npx shadcn@latest add https://miseui.junsu4621.workers.dev/r/theme.json
2. Cada componente: npx shadcn@latest add https://miseui.junsu4621.workers.dev/r/<nombre>.json (las dependencias se instalan automáticamente)
3. Lee references/<nombre>.md antes de usar un componente por primera vez

Reglas

1. Respeta prefers-reduced-motion. Todos los componentes de Mise ya lo hacen; mantén eso al editar uno.
2. Un único acento mise por pantalla. Marca la acción principal o la actividad de IA en vivo, nunca decoración.
3. Nombra la espera. Cualquier llamada a modelo que dure más de un segundo recibe un thinking-indicator cuya etiqueta dice lo que está sucediendo.
4. Sin patrones oscuros: sin cuentas atrás falsas, cancelación oculta, consentimiento pre-seleccionado. La línea No en cada referencia es vinculante.
5. Conserva los atributos data-slot; las pruebas y los hooks de estilo dependen de ellos.

Síntoma → componente

Cuando ves	Usa
El usuario espera una llamada a modelo que dura más de un segundo	thinking-indicator
Los tokens llegan uno a uno y deben leerse como escritura, no como un bloque congelado	streaming-text
Un agente ejecutó una herramienta y el usuario debe poder confiar en el resultado	tool-call-card
Un plan de varios pasos que el usuario puede querer inspeccionar pero no debe estar obligado a leer	reasoning-steps
El micrófono está activo y el usuario debe saberlo	voice-wave
El contenido se está cargando y se conoce el diseño final	skeleton
Una acción importa más que el resto de la pantalla	button
Demasiadas opciones en un solo lugar	select
Una lista corta de acciones detrás de un único disparador	dropdown-menu
El usuario debe decidir antes de hacer cualquier otra cosa	dialog
Detalle extra que solo algunos usuarios necesitan	tooltip
Controles relacionados que pertenecen juntos	card

Estados de IA

• Reasoning Steps (reasoning-steps): Línea de tiempo colapsada de los pasos del modelo; el encabezado nombra el actual, el cuerpo los muestra todos. — Revelación progresiva · referencia
• Streaming Text (streaming-text): Revela el texto que llega carácter por carácter a velocidad de lectura, con un cursor que marca dónde aterriza la siguiente palabra. — Latencia percibida · referencia
• Thinking Indicator (thinking-indicator): Tres puntos que respiran y una etiqueta en vivo que le dicen al usuario que el modelo está trabajando, y en qué. — Visibilidad del estado del sistema · ilusión del trabajo · referencia
• Tool Call Card (tool-call-card): Registro colapsable de una llamada a herramienta: nombre, estado, duración, y la entrada y salida exactas bajo demanda. — Transparencia genera confianza · referencia
• Voice Wave (voice-wave): Barras que suben con el nivel del micrófono para que el usuario pueda ver que está siendo escuchado, y ver cuando no lo está. — Visibilidad del estado del sistema · referencia

Núcleo

• Badge (badge): Chip de estado pequeño en cinco variantes; la variante cálida mise está reservada para el elemento que debe destacar. — Efecto Von Restorff · referencia
• Button (button): Objetivo de pulsación con un asentamiento de 150 ms y una compresión del 2% para que el clic se sienta reconocido. — Umbral de Doherty · referencia
• Card (card): Superficie con borde, encabezado, contenido y pie que se lee como una región antes de que nadie lea el texto. — Ley de región común · referencia
• Checkbox (checkbox): Alternancia cuadrada que se llena y dibuja su marca en 150 ms desde la pulsación, y anuncia el cambio mediante aria-checked. — Retroalimentación inmediata · referencia
• Dialog (dialog): Superficie modal que oscurece todo lo demás y mantiene el foco hasta que el usuario responde una pregunta. — Embudo de atención · referencia
• Dropdown Menu (dropdown-menu): Menú compacto de acciones que se abre desde un botón y se cierra al elegir, con navegación por teclado de flechas y una variante destructiva. — Ley de Hick · referencia
• Input (input): Campo de texto de una línea, 36 px de alto para coincidir con Button, que mueve el estado inválido a su borde y anillo. — Ley de Fitts · referencia
• Label (label): Etiqueta vinculada a un control: al hacer clic enfoca el campo, y se atenúa cuando el campo está deshabilitado. — Ley de proximidad · referencia
• Popover (popover): Pequeño panel flotante anclado al control que lo abrió, para un formulario o detalle que no necesita un diálogo completo. — Memoria espacial · referencia
• Select (select): Desplegable para una elección de una lista, con marcador de posición, grupos, una marca en la fila elegida y soporte completo de teclado. — Efecto por defecto · referencia
• Skeleton (skeleton): Marcador de posición pulsante con la forma del contenido que se carga, para que la espera se sienta más corta que un spinner. — Rendimiento percibido · referencia
• Switch (switch): Control deslizante de encendido/apagado cuyo pulgar recorre 16 px en 150 ms, reflejando el interruptor físico que imita. — Asequibilidad · referencia
• Tabs (tabs): Control segmentado que intercambia un panel por otro en el mismo lugar, para que las vistas relacionadas compartan un solo punto en la pantalla. — Agrupación · referencia
• Textarea (textarea): Campo de texto multilínea que comienza en 64 px y crece con su contenido, para que la respuesta nunca esté oculta tras una barra de desplazamiento. — Agrupación · referencia
• Tooltip (tooltip): Pista de una línea que aparece al pasar el ratón o al enfocar sin demora y desaparece con el puntero, para detalles que no merecen espacio en pantalla. — Revelación progresiva · referencia

Fuente y problemas: https://github.com/kimjusnu/miseui