菜单
Critique constructive d'interfaces et suggestions d'amélioration UX/UI. Se déclenche avec "critique mon design", "avis sur mon UI", "améliorer mon interface", "feedback design", "review UX", "est-ce que mon design est bon", "UI review".
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
Administration et optimisation PostgreSQL — diagnostic de performance, indexation, partitioning, tuning mémoire, VACUUM, backup/restore, JSONB, réplication. Se déclenche avec "PostgreSQL", "Postgres", "pg_stat", "JSONB", "partitioning", "VACUUM", "pg_dump"
Patterns d'utilisation Redis pour le cache, pub/sub, streams et sessions. Se déclenche avec "Redis", "cache distribué", "pub/sub Redis", "Redis streams", "session store"
Optimisation et administration SQL Server. Se déclenche avec "SQL Server", "SSMS", "execution plan", "index SQL Server", "Always On", "tempdb"
Vérifie et améliore l'accessibilité web (WCAG 2.1/2.2). Se déclenche avec "accessibilité", "a11y", "WCAG", "screen reader", "ARIA", "contraste", "accessible", "handicap", "lecteur d'écran".
Conception et implémentation d'agents IA autonomes avec outils, mémoire et orchestration. Se déclenche avec "agent IA", "AI agent", "autonomous agent", "tool use", "function calling", "agent framework", "LangChain agent", "CrewAI", "AutoGen", "agent loop", "ReAct".
Orchestration de workflows IA complexes avec chaînes et pipelines. Se déclenche avec "workflow IA", "LangChain", "LangGraph", "pipeline IA", "chaîne de prompts", "orchestration LLM", "AI pipeline", "multi-step AI".
| name | design-critique |
| description | Critique constructive d'interfaces et suggestions d'amélioration UX/UI. Se déclenche avec "critique mon design", "avis sur mon UI", "améliorer mon interface", "feedback design", "review UX", "est-ce que mon design est bon", "UI review". |
Identifier avant de commencer :
Répondre à ces trois questions sans réfléchir :
Si l'une des réponses est floue → problème de clarté à signaler en priorité.
Vérifier avec le test du "blur" (défocaliser mentalement l'écran) :
| Niveau | Signal attendu | Anti-pattern |
|---|---|---|
| H1 — titre principal | Largest element, bold | Plusieurs éléments de même poids |
| CTA principal | Couleur contrastante, seul de son type | Deux boutons primaires côte à côte |
| Body content | Lisible, subordonné au titre | Même taille que les titres |
| Metadata / labels | Réduit, discret | Trop proche du corps |
Taille corps : ≥ 16px (mobile ≥ 14px uniquement pour labels)
Line-height body : 1.4 – 1.6
Longueur de ligne : 45 – 75 ch (CSS: max-width: 75ch)
Nombre de fontes : ≤ 2 (une pour les titres, une pour le corps)
Contrastes de taille : H1/body ratio ≥ 2x
Outil de vérification rapide : https://typescale.com (générer la scale et comparer).
Seuils obligatoires :
| Contexte | Ratio minimum (AA) | Ratio idéal (AAA) |
|---|---|---|
| Texte normal | 4.5:1 | 7:1 |
| Texte large (≥ 18px bold) | 3:1 | 4.5:1 |
| Éléments UI (bordures, icônes) | 3:1 | — |
Outil : npx color-contrast-checker ou https://webaim.org/resources/contrastchecker/
Vérifier aussi :
prefers-color-scheme: dark si applicable.Utiliser une spacing scale cohérente (exemple Tailwind / Material 8px base) :
4px (0.25rem) — séparateur interne
8px (0.5rem) — gap entre éléments liés
16px (1rem) — padding standard de card
24px (1.5rem) — gap entre sections
32px (2rem) — section breathing room
48px (3rem) — séparation majeure
Anti-pattern : spacing arbitraire (13px, 22px, 37px) → toujours arrondir à la scale.
Checklist :
hover, active, focus-visible, disabled définis pour chaque composant interactifoutline: none sans alternative)Exemple CSS focus accessible :
:focus-visible {
outline: 2px solid #005fcc;
outline-offset: 2px;
border-radius: 2px;
}
| # | Heuristique | Question à poser |
|---|---|---|
| 1 | Visibilité du statut | L'utilisateur sait-il ce qui se passe ? (loaders, progress) |
| 2 | Correspondance monde réel | Le vocabulaire est-il celui de l'utilisateur, pas du développeur ? |
| 3 | Contrôle utilisateur | Peut-on annuler / revenir en arrière facilement ? |
| 4 | Consistance et standards | Les patterns suivent-ils la plateforme (iOS HIG / Material) ? |
| 5 | Prévention d'erreurs | Les erreurs sont-elles évitées avant de survenir (validation inline) ? |
| 6 | Reconnaissance > rappel | L'info nécessaire est-elle visible sans avoir à mémoriser ? |
| 7 | Flexibilité | Y a-t-il des raccourcis pour les utilisateurs avancés ? |
| 8 | Esthétique minimaliste | Chaque élément a-t-il une raison d'être ? |
| 9 | Aide à la récupération | Les messages d'erreur expliquent-ils comment corriger ? |
| 10 | Documentation | Le produit est-il utilisable sans aide ? Si non, la doc est-elle accessible ? |
Structurer le feedback en trois niveaux actionnables :
P1 — Quick wins (< 1 jour, fort impact)
hover/focus manquantsP2 — Améliorations majeures (1 sprint)
P3 — Nice-to-have (backlog)
Chaque suggestion doit inclure : problème observé → impact utilisateur → solution concrète (avec référence visuelle ou snippet si possible).
| Anti-pattern | Conséquence | Correction |
|---|---|---|
| Deux CTA primaires côte à côte | L'utilisateur hésite, taux de conversion baisse | Un seul bouton primary ; l'autre en secondary/ghost |
outline: none sans alternative | Inaccessible au clavier | Remplacer par outline-offset stylé |
| Couleur seule pour coder une info | Daltoniens exclus | Ajouter icône + label texte |
| Modals empilées | Désorientation complète | Une seule modal active ; préférer les drawers sur mobile |
| Animations > 300ms sur interactions répétées | Frustration utilisateur avancé | Respecter prefers-reduced-motion ; durée ≤ 200ms pour feedback immédiat |
| Densité identique desktop/mobile | Mobile illisible | Adapter la taille des touch targets et le spacing par breakpoint |
| 3+ niveaux de gris similaires | Hiérarchie invisible | Limiter à 3 grises distinctes (light / mid / dark) |