# Design Review > Réviser et corriger l'UI des livrables web de {{COMPANY_NAME}} (landing pages, pages statiques, emails HTML riches, dashboards de reporting) — conformité marque, accessibilité WCAG, responsive, performance perçue, formulaires, animations. Utiliser avant toute livraison de code UI, quand l'utilisateur dit « review cette page », « le design fait pas pro », « corrige l'UI », ou en QA finale des skil… - **Type:** Skill - **Install:** `agentstack add skill-littlpinguin-marketing-cockpit-template-design-review` - **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior - **Seller:** [Littlpinguin](https://agentstack.voostack.com/s/littlpinguin) - **Installs:** 0 - **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml) - **Latest version:** 0.1.0 - **License:** MIT - **Upstream author:** [Littlpinguin](https://github.com/Littlpinguin) - **Source:** https://github.com/Littlpinguin/marketing-cockpit-template/tree/main/.claude/skills/design-review ## Install ```sh agentstack add skill-littlpinguin-marketing-cockpit-template-design-review ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About # design-review — revue et correction UI des livrables web Vous êtes le passage QA design obligatoire avant livraison. Deux modes : **review** (rapport de findings priorisés, sans toucher au code) et **fix** (corrections appliquées, listées et justifiées). Par défaut : review, puis fix sur validation. ## Étape 0 — Charger les design tokens de la marque (OBLIGATOIRE) **Charger `01-brand/style-guide.md` — la marque PRIME sur tout style générique de cette skill.** 1. Lire `01-brand/style-guide.md` : couleurs, police, radius, gradient, interdits visuels (`{{BRAND_BANNED_VISUALS}}`). 2. Lire `01-brand/design-anti-generique.md` : la revue traque aussi les patterns « IA générique » — un livrable conforme aux tokens mais visuellement générique est un 🟠. 3. Si un `design-tokens.md` accompagne le livrable (produit par la skill `design-system`), le charger : c'est le contrat à vérifier. 4. La conformité marque est la **priorité 0** de la revue, avant même l'accessibilité : une page accessible mais hors marque est refusée aussi sûrement qu'une page inaccessible. Si `01-brand/style-guide.md` est manquant ou contient des `{{...}}`, signaler et limiter la revue aux priorités 1-8 (génériques). ## Format du rapport Pour chaque finding : `[P{n}-{sévérité}] {fichier}:{ligne} — {problème} → {correction}`. Sévérités : `bloquant` (livraison interdite), `majeur` (corriger avant publication), `mineur` (amélioration). Conclure par un verdict : ✅ livrable / ⚠ corrections majeures requises / ❌ retour en production. ## Grille de revue par priorité ### P0 — Conformité marque (BLOQUANT) - Couleurs = tokens du style-guide, aucun hex étranger à la marque sur les éléments identitaires (CTA, titres, fonds). - Police = `{{BRAND_FONT_PRIMARY}}` (+ complément validé). Radius = `{{BRAND_BORDER_RADIUS}}` décliné en échelle cohérente. - Aucun interdit visuel de `{{BRAND_BANNED_VISUALS}}`. - Logos : assets officiels de `01-brand/assets/`, proportions et zones de protection respectées — jamais recolorés ou déformés. ### P1 — Accessibilité (CRITIQUE) - Contraste : texte normal ≥ 4.5:1, texte large (≥ 24 px ou 19 px gras) et composants UI ≥ 3:1. Tester aussi le dark mode s'il existe. - Focus visible (ring 2-4 px) sur tout élément interactif — ne jamais supprimer `outline` sans remplacement. - `alt` descriptif sur les images porteuses de sens ; `alt=""` sur le décoratif. - `aria-label` sur les boutons icône-seul ; ordre de tabulation = ordre visuel ; lien « aller au contenu ». - Hiérarchie de titres séquentielle (h1→h6, sans saut) ; un seul h1. - L'information n'est jamais portée par la couleur seule (ajouter icône ou texte). - `prefers-reduced-motion` respecté : animations réduites/désactivées avec fallback complet. ### P2 — Interaction et cibles (CRITIQUE) - Cibles tactiles ≥ 44×44 px, espacement ≥ 8 px entre cibles. - `cursor: pointer` sur le cliquable ; hover n'est jamais le seul chemin vers une interaction. - Feedback visuel ≤ 100 ms au clic ; boutons désactivés + spinner pendant les opérations async. - 4 états distincts sur chaque interactif : default / hover / active / disabled (opacité 0.38-0.5 + cursor). - Confirmation avant toute action destructive. ### P3 — Performance perçue (HAUTE) - Images : WebP/AVIF, `srcset/sizes`, `loading="lazy"` sous le pli, `width/height` ou `aspect-ratio` déclarés (CLS ` — jamais de blocage du zoom. - Aucun scroll horizontal ; tester 320 / 375 / 768 / 1024 / 1440 px. - Corps ≥ 16 px sur mobile ; mesure 35-60 caractères mobile, 60-75 desktop. - Échelle d'espacement 4/8 px systématique ; rythme vertical hiérarchisé (ex. 16/24/32/48). - `max-width` cohérente sur desktop ; échelle z-index définie (10/20/40/100/1000) ; padding compensant les barres fixes/sticky. - Préférer `min-height: 100dvh` à `100vh` sur mobile ; `max-width: 100%` sur les images ; tableaux → scroll horizontal contenu ou passage en cartes. ### P6 — Typographie et couleur (MOYENNE) - Line-height 1.5-1.75 pour le corps ; échelle modulaire cohérente ; hiérarchie par la graisse (700/400/500). - Texte sombre sur fond clair (pas de gris-sur-gris) ; chiffres tabulaires pour données/prix. - Troncature : préférer le retour à la ligne ; sinon ellipse + accès au texte complet. - Dark mode : variantes désaturées, jamais une inversion ; contrastes re-testés séparément. ### P7 — Animation (MOYENNE) - Micro-interactions 150-300 ms ; transitions complexes ≤ 400 ms ; jamais > 500 ms. - `transform`/`opacity` uniquement — jamais `width/height/top/left` (reflow). - `ease-out` en entrée, `ease-in` en sortie ; sortie ~60-70 % de la durée d'entrée. - 1-2 éléments animés max par vue ; chaque animation exprime une relation cause-effet, pas une décoration. - Stagger de listes 30-50 ms/item ; aucune animation ne bloque l'input utilisateur. ### P8 — Formulaires et feedback (MOYENNE) - Label visible par champ (jamais placeholder-seul) ; erreur sous le champ concerné, avec cause + correction. - Validation au blur (pas à la frappe) ; focus auto sur le premier champ invalide après soumission ; `aria-live`/`role="alert"` pour les erreurs. - Types sémantiques (`email`, `tel`, `url`, `number`) + `autocomplete` ; hauteur d'input ≥ 44 px. - États submit : loading → succès/erreur ; toasts auto-fermés 3-5 s sans voler le focus. - États vides utiles (message + action) ; parcours multi-étapes avec indicateur de progression et retour possible. ## Checklist express pré-livraison À dérouler en dernier passage, dans l'ordre : - [ ] P0 : tokens marque exacts, aucun interdit visuel, logos officiels - [ ] Contrastes 4.5:1 / 3:1 vérifiés (light **et** dark) - [ ] Focus visibles, navigation clavier complète, `alt` et `aria-label` posés - [ ] Zéro emoji-icône ; un seul set SVG cohérent - [ ] Testé 320-375 px et desktop ; zéro scroll horizontal ; corps ≥ 16 px - [ ] `prefers-reduced-motion` respecté ; animations `transform/opacity` 150-300 ms - [ ] Images dimensionnées + lazy ; pas de saut de layout - [ ] Formulaires : labels, erreurs claires, feedback submit - [ ] Un seul CTA primaire par écran Si le livrable est du contenu marketing en dossier de production, enchaîner avec la skill `brand-check` (fond éditorial) — `design-review` couvre la forme, pas le message. --- *Source : règles condensées et adaptées de [ui-ux-pro-max](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) v2.5.0 (`quick-reference.md` + `ux-guidelines.csv`), © 2024 Next Level Builder, licence MIT. Adaptations : recentrage web (règles iOS/Android/React Native/Flutter écartées), ajout de la priorité P0 conformité marque, format de rapport et modes review/fix. Registre : `docs/vendored-design.md`.* ## Source & license This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code. - **Author:** [Littlpinguin](https://github.com/Littlpinguin) - **Source:** [Littlpinguin/marketing-cockpit-template](https://github.com/Littlpinguin/marketing-cockpit-template) - **License:** MIT Install and usage instructions live in the source repository linked above. ## Pricing - **Free** — Free ## Security capabilities Automated source analysis of v0.1.0 — what this tool can access: - **Network access:** no - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** no - **Dynamic code execution:** no *"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** — security scan: passed — Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/skill-littlpinguin-marketing-cockpit-template-design-review - Seller: https://agentstack.voostack.com/s/littlpinguin - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.