ux-flows

ux-flows

Catalogue généré le 2026-05-11

En une phrase

StructurerPasse lesd'une idée floue à un plan d'interface complet : architecture d'information, écrans, parcours UX,utilisateurs l’architectureclés, d’informationétats UX (loading/error/empty) et lesmétriques écrans/sections.de À utiliser pour SaaS, dashboard, checkout, onboarding, landing conversion, refonte produit.succès.

Quand l'utiliser

• VoirAu ladémarrage descriptiond'un ci-dessusSaaS ou d'un dashboard pour structurer ce qu'on va construire

Pour préparer un checkout, un onboarding ou un flow d'inscription Avant une refonte produit pour cartographier l'existant et lales sectionchangements «Sur Pourune allerlanding plusà loinfort ».enjeu de conversion qui doit guider vers une action Quand tu as un brief client mais zéro idée du nombre d'écrans à prévoir

Comment l'invoquer

• Slash command : /ux-flows (si exposé dans ton CLI)

Phrases déclencheurs : voir la description complète ci-dessous Auto-invocation : sur✅ demandeOui explicite— pour structurer parcours UX, IA, écrans/sections

PourDescription aller plus loin

UX Flows

Objectifdétaillée

PasserCe deskill “j’aiévite unele idée”piège àclassique undu plan"je d’interfacecode direct" : IA,foncer sections/écrans,dans flows,Figma states,ou métriques.

dans

Procédure

React

sans Résumeravoir :clarifié cible, contexte, objectif business, friction actuelle. Définir 3–5 Top Tasks (ce que l’l'utilisateur vient faire)chercher. Il commence par résumer la cible (qui), le contexte (où), l'objectif business (pourquoi) et les frictions actuelles s'il y en a.

Ensuite il identifie 3 à 5 Top Tasks — les choses concrètes pour lesquelles les utilisateurs viennent (par exemple "réserver une session", "comparer deux produits", "récupérer ma facture").

ProduirePuis 2–il produit 2 à 3 flows clés (sous forme d'étapes numérotées, en couvrant un happy path +et 1au moins un edge case). Définir IA :

Navigationcase (global/local)paiement Listerefusé, compte déjà existant, etc.). Il définit l'architecture d'information (navigation globale et locale, liste des écrans/sectionsécrans, Contenusblocs (copyde blocks)contenu) et surtout Définirn'oublie pas les états UX :

loading, loadingempty, / empty / error /error, success — qui Définirsont métriques80 % du polish d'une UI mais que personne ne planifie au début.

Tu repars avec un document structuré qui couvre audience, top tasks, IA, flows numérotés, états et messages, plus une liste de risques UX avec leurs solutions. Pour Thymon :

c'est conversionle /skill activationà /utiliser time-to-taskdès /qu'un erreurprojet dépasse "une seule

Outputpage" attendu— (format)

il

transforme Audienceune &discussion Job-to-be-doneen Topplan Tasksactionnable (3–5)avant IAde (navtoucher +au map) Flows (3 min) : étapes numérotées States & messages (loading/empty/error) “UX risks” (3–6) + solutions code.

Source

• Plugin : perso (standalone)
• Nom interne : ux-flows
• Fichier : /home/thymon/.claude/skills/ux-flows/SKILL.md