kimjusnu/miseui

Mise UI

Une UI qui s'explique elle-même. Chaque composant fournit le principe derrière sa forme et une règle pour savoir quand ne pas l'utiliser. Gardez les deux lorsque vous installez ou adaptez un composant.

Quand l'utiliser

• Le projet est React + Tailwind CSS v4 avec un components.json de style shadcn
• L'écran comporte une étape d'IA : une attente sur un modèle, du texte en streaming, des appels d'outils, un raisonnement, une saisie vocale
• Vous avez besoin d'un kit de base (bouton, dialogue, select…) dont la logique peut être citée lors d'une revue de conception

Installation

1. Thème, une fois par projet : npx shadcn@latest add https://miseui.junsu4621.workers.dev/r/theme.json
2. Chaque composant : npx shadcn@latest add https://miseui.junsu4621.workers.dev/r/<nom>.json (les dépendances s'installent automatiquement)
3. Lisez references/<nom>.md avant d'utiliser un composant pour la première fois

Règles

1. Respectez prefers-reduced-motion. Chaque composant Mise le fait déjà ; conservez cela lorsque vous en modifiez un.
2. Un accent mise par écran. Il marque l'action principale ou l'activité IA en direct, jamais la décoration.
3. Nommez l'attente. Tout appel de modèle durant plus d'une seconde environ reçoit un thinking-indicator dont l'étiquette indique ce qui se passe.
4. Pas de dark patterns : pas de faux comptes à rebours, d'annulation cachée, de consentement pré-coché. La ligne Ne pas faire dans chaque référence est contraignante.
5. Conservez les attributs data-slot ; les tests et les hooks de style en dépendent.

Symptôme → composant

Quand vous voyez	Utilisez
L'utilisateur attend un appel de modèle durant plus d'une seconde environ	thinking-indicator
Des jetons arrivent un par un et doivent donner l'impression de taper, non d'un bloc figé	streaming-text
Un agent a exécuté un outil et l'utilisateur doit pouvoir faire confiance au résultat	tool-call-card
Un plan en plusieurs étapes que l'utilisateur peut vouloir inspecter mais ne doit pas être obligé de lire	reasoning-steps
Le microphone est actif et l'utilisateur doit le savoir	voice-wave
Le contenu charge et la mise en page finale est connue	skeleton
Une action est plus importante que le reste de l'écran	button
Trop d'options au même endroit	select
Une courte liste d'actions derrière un déclencheur	dropdown-menu
L'utilisateur doit décider avant de faire autre chose	dialog
Détail supplémentaire dont seuls certains utilisateurs ont besoin	tooltip
Contrôles associés qui vont ensemble	card

États IA

• Reasoning Steps (reasoning-steps) : Chronologie réduite des étapes du modèle ; l'en-tête nomme l'étape en cours, le corps les montre toutes. — Divulgation progressive · référence
• Streaming Text (streaming-text) : Révèle le texte arrivant caractère par caractère à une vitesse de lecture, avec un curseur qui marque où se pose le mot suivant. — Latence perçue · référence
• Thinking Indicator (thinking-indicator) : Trois points respirants et une étiquette en direct qui indiquent à l'utilisateur que le modèle travaille, et sur quoi. — Visibilité de l'état du système · illusion du travail · référence
• Tool Call Card (tool-call-card) : Enregistrement repliable d'un appel d'outil : nom, statut, durée, et l'entrée et la sortie exactes à la demande. — La transparence construit la confiance · référence
• Voice Wave (voice-wave) : Barres qui s'élèvent avec le niveau du microphone afin que l'utilisateur voie qu'il est entendu, et voie quand il ne l'est pas. — Visibilité de l'état du système · référence

Composants de base

• Badge (badge) : Petit indicateur de statut en cinq variantes ; la variante mise chaude est réservée à l'élément qui doit se démarquer. — Effet Von Restorff · référence
• Button (button) : Cible de pression avec un temps de stabilisation de 150 ms et une compression de 2 % pour que le clic soit ressenti comme pris en compte. — Seuil de Doherty · référence
• Card (card) : Surface bordée avec des emplacements d'en-tête, de contenu et de pied de page qui se lit comme une région avant même que quiconque lise le texte. — Loi de la région commune · référence
• Checkbox (checkbox) : Basculant carré qui se remplit et dessine sa coche dans les 150 ms suivant la pression, et annonce le changement via aria-checked. — Retour immédiat · référence
• Dialog (dialog) : Surface modale qui assombrit tout le reste et retient le focus jusqu'à ce que l'utilisateur réponde à une question. — Entonnoir d'attention · référence
• Dropdown Menu (dropdown-menu) : Menu compact d'actions qui s'ouvre depuis un bouton et se ferme sur choix, avec navigation par flèches et une variante destructive. — Loi de Hick · référence
• Input (input) : Champ de texte monoligne, 36 px de haut pour correspondre à Button, qui déplace l'état invalide sur sa bordure et son anneau. — Loi de Fitts · référence
• Label (label) : Légende liée à un contrôle : cliquer dessus focalise le champ, et elle s'assombrit lorsque le champ est désactivé. — Loi de proximité · référence
• Popover (popover) : Petit panneau flottant ancré au contrôle qui l'a ouvert, pour un formulaire ou un détail qui ne nécessite pas un dialogue complet. — Mémoire spatiale · référence
• Select (select) : Menu déroulant pour un choix parmi une liste, avec un texte indicatif, des groupes, une coche sur la ligne choisie et un support clavier complet. — Effet par défaut · référence
• Skeleton (skeleton) : Espace réservé pulsant en forme du contenu en cours de chargement, afin que l'attente semble plus courte qu'un spinner. — Performance perçue · référence
• Switch (switch) : Contrôle marche/arrêt coulissant dont le pouce parcourt 16 px en 150 ms, reflétant l'interrupteur physique qu'il imite. — Affordance · référence
• Tabs (tabs) : Contrôle segmenté qui échange un panneau pour un autre sur place, afin que les vues liées partagent un emplacement unique sur l'écran. — Regroupement · référence
• Textarea (textarea) : Champ de texte multiligne qui commence à 64 px et grandit avec son contenu, de sorte que la réponse ne soit jamais cachée derrière une barre de défilement. — Regroupement · référence
• Tooltip (tooltip) : Indice d'une ligne qui apparaît au survol ou au focus sans délai et disparaît avec le pointeur, pour un détail qui ne mérite pas d'espace à l'écran. — Divulgation progressive · référence

Source et problèmes : https://github.com/kimjusnu/miseui