web-design-reviewerpar GitHub

Web Design Reviewer Skill.

Un skill Claude Code et Codex pour la révision de design : inspecte visuellement un site web en ligne et localise et corrige les problèmes de mise en page.

Revue de conception et accessibilité
Rapport de revue

Télécharger OpenDesign Voir le guide d'utilisation

github/awesome-copilot · skills/web-design-reviewer/SKILL.mdSKILL.md

--- name: web-design-reviewer description: This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level. --- ## Scope of Application ## Prerequisites ## Step 1: Information Gathering Phase ## Step 2: Visual Inspection Phase ## Step 3: Issue Fixing Phase ## Step 4: Re-verification Phase

En-tête et titres de section lus depuis le fichier source le 14 septembre 2026 · 10 577 caractères au total

01 Ce qu'il fait

Ce que fait le skill web-design-reviewer dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Web Design Reviewer pilote un site web en cours d'exécution via un outil d'automatisation de navigateur, l'inspecte visuellement, puis corrige ce qu'il trouve dans le code source. Il couvre les sites statiques, les SPA sur React, Vue, Angular ou Svelte, les frameworks full-stack comme Next.js et Nuxt, les plateformes CMS telles que WordPress et Drupal, et toute autre application web.

Le workflow comporte quatre phases : rassembler le contexte et détecter automatiquement le framework et la méthode de style, inspecter les pages selon une checklist visuelle, corriger les problèmes priorisés de P1 à P3, puis revérifier et itérer. Les constats sont regroupés en mise en page, responsive, accessibilité et cohérence visuelle, chacun avec un niveau de sévérité. Les corrections suivent des principes de changement minimal et se terminent par un rapport de revue en markdown.

Ce qu'il produit

Un rapport de résultats de revue en markdown intitulé Web Design Review Results.
Un tableau récapitulatif couvrant l'URL cible, le framework détecté, le style, les tailles d'écran testées, les problèmes détectés et les problèmes corrigés.
Des entrées par problème indiquant la priorité, la page, l'élément, la description, le chemin du fichier corrigé, les détails de la correction et des captures d'écran avant/après.
Une section des problèmes non corrigés indiquant la raison pour laquelle chaque problème a été laissé en l'état et une action recommandée pour l'utilisateur, ainsi que des recommandations générales.

Voir l'exemple de prompt ↗

Fonctionnement

01
Rassembler le contexte et détecter la stack
Il demande l'URL si aucune n'est fournie, puis tente une détection automatique à partir des fichiers du workspace tels que package.json, tsconfig.json, tailwind.config, next.config, vite.config et nuxt.config, et demande quelles pages sont concernées.
02
Naviguer et capturer
Il ouvre l'URL cible, prend des captures d'écran, récupère la structure du DOM ou un snapshot lorsque c'est possible, et parcourt d'autres pages via la navigation du site.
03
Inspecter selon la checklist visuelle
Les problèmes de mise en page, de responsive, d'accessibilité et de cohérence visuelle sont vérifiés en parcourant une checklist de référence, réutilisée après les corrections.
04
Localiser l'origine de chaque problème
Les éléments problématiques sont retracés jusqu'à leur source en recherchant les noms de classe ou les ID dans le code, en identifiant le composant à partir du texte ou de la structure de l'élément, et en filtrant les motifs de fichiers de style, de composant et de page.
05
Corriger, puis revérifier
Les corrections sont appliquées en suivant les recommandations spécifiques au framework, puis le navigateur est rechargé ou le HMR du serveur de développement est attendu, les zones corrigées sont capturées à nouveau, et l'avant et l'après sont comparés.

02 Trouvez celui qui vous convient

Quand utiliser le skill web-design-reviewer

Utilisez le skill web-design-reviewer dans Claude Code ou Codex lorsque le travail consiste en une revue de design de ce type. La portée et les limites ci-dessous sont extraites du propre fichier du skill.

Bon choix

Revue d'un site statique construit avec du HTML, CSS et JS simples.
Revue d'une application monopage sur React, Vue, Angular ou Svelte.
Revue d'une application full-stack sur un framework tel que Next.js, Nuxt ou SvelteKit.
Revue d'un site piloté par CMS tel qu'une installation WordPress ou Drupal.
Vérification d'un serveur de développement local fonctionnant à une adresse comme http://localhost:3000 pendant le développement.

Connaître les limites

Les environnements de production ne sont pris en charge que pour des revues en lecture seule, donc aucune modification ne peut y être appliquée.
Les corrections nécessitent que le code source du projet existe dans l'espace de travail, donc un site distant sans code local ne peut pas être réparé.
Le refactoring à grande échelle sans confirmation de l'utilisateur est explicitement listé comme un comportement à éviter.
Les corrections qui ignorent la performance sont listées comme un anti-pattern.

Quoi fournir

L'URL du site à examinerElle est requise pour la navigation ; si l'utilisateur ne la fournit pas, le skill la demande, avec http://localhost:3000 comme exemple de forme.
Framework et emplacement des stylesLe skill demande quel framework et quelle méthode de style sont utilisés, ainsi que l'emplacement des fichiers de style et des composants, afin de pouvoir trouver la bonne cible d'édition.
Portée de la revueL'utilisateur indique si la revue couvre uniquement des pages spécifiques ou l'ensemble du site.

03 Dans le skill

Règles que le Skill web-design-reviewer donne à Claude Code et Codex

8 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

Arrêter après trois tentatives
Le skill fixe une limite d'itération : si un problème spécifique nécessite plus de 3 tentatives de correction, il doit consulter l'utilisateur plutôt que de continuer.
Un problème à la fois
Chaque problème est corrigé individuellement et vérifié avant de passer au suivant, plutôt que de regrouper les modifications.
Capture d'écran avant de toucher au code
Des captures d'écran de l'état défectueux doivent toujours être enregistrées avant les corrections, afin de pouvoir comparer l'avant et l'après.
Uniquement des changements minimaux
Le principe de correction consiste à n'apporter que le changement minimal nécessaire pour résoudre le problème, en respectant le style de code existant et en évitant toute rupture ailleurs.
Traiter la matrice de priorités
Les problèmes de mise en page affectant la fonctionnalité sont P1 et corrigés immédiatement, les problèmes visuels dégradant l'UX sont P2 et corrigés ensuite, les incohérences visuelles mineures sont P3 et corrigées si possible.
Tester quatre largeurs d'écran
Les vérifications responsives s'effectuent à 375px (Mobile, iPhone SE/12 mini), 768px (Tablet, iPad), 1280px (Desktop) et 1920px (Wide).
Respecter les modèles existants
Les corrections doivent suivre le style de code existant déjà utilisé dans le projet plutôt qu'introduire une nouvelle convention.
Confirmer avant les changements majeurs
Les refontes à grande échelle ne sont pas effectuées unilatéralement : on demande à l'utilisateur de confirmer avant les changements majeurs, et on ne corrige pas plusieurs problèmes à la fois car cela est difficile à vérifier.

04 Mettez-le en pratique

Installer web-design-reviewer dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter web-design-reviewer à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal

npx skills add https://github.com/github/awesome-copilot --skill web-design-reviewer

Forme générique de la CLI skills pour skills/web-design-reviewer/SKILL.md ; le dépôt peut documenter son propre chemin.

Donner au skill une première tâche de révision de conception

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

Starter prompt

Review the design of the website running at http://localhost:3000. It is a [Next.js] app styled with [Tailwind CSS], please check the [home and pricing] pages at mobile and desktop widths. Find the layout, responsive and accessibility problems like element overflow, weak contrast or tiny touch targets, then fix them in the source and verify the fixes.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

Rechargez le navigateur ou attendez le HMR du serveur de développement, puis capturez des captures d'écran des zones corrigées.
Comparez les captures d'écran avant et après pour chaque élément corrigé.
Exécutez des tests de régression pour vérifier que les corrections n'ont pas affecté d'autres zones.
Confirmez que l'affichage responsive est toujours intact après le changement.
Lisez les messages de la console du navigateur pour détecter les erreurs JavaScript, via l'outil browser_console_messages dans la configuration de référence Playwright.

Dans OpenDesign, importez web-design-reviewer depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

Télécharger OpenDesign Lire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author: GitHub
Repository: github.com/github/awesome-copilot Branche main
Fichier du skill: skills/web-design-reviewer/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 1899b18
License: MIT D'après LICENSE.
Étoiles du dépôt: 38 981 Instantané GitHub pris le 14/09/2026 pour l'ensemble du dépôt github/awesome-copilot, qui contient 6 skills dans ce catalogue. Ce n'est pas une note ou un compteur d'utilisation pour web-design-reviewer.
Vérifié par OpenDesign: 2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

Champ d'applicationListe les sites statiques, les SPA et frameworks full-stack, les plateformes CMS et autres applications web qu'il couvre.
PrérequisUn site cible en cours d'exécution, une automatisation du navigateur avec accès aux captures d'écran et au DOM, et le code source pour les corrections.
Étape 1 : phase de collecte d'informationsConfirme l'URL, interroge sur le framework, le style et la portée, détecte automatiquement les fichiers de configuration et la méthode de style.
Étape 2 : phase d'inspection visuelleParcourt les pages, capture des écrans, vérifie la mise en page, le responsive, l'accessibilité et les problèmes de cohérence sur quatre largeurs d'écran.
Étape 3 : phase de correction des problèmesPriorise de P1 à P3, trouve les fichiers source par sélecteur, composant ou modèle, applique des corrections minimales spécifiques au framework.
Étape 4 : phase de revérificationRecharge, reprend des captures d'écran, compare avant et après, effectue des tests de régression, boucle si des problèmes subsistent.
Format de sortieDéfinit le modèle de rapport de revue en markdown avec un tableau récapitulatif, les problèmes, les éléments non corrigés et les recommandations.
Capacités requisesRépertorie la navigation, les captures d'écran, l'analyse d'images, la récupération du DOM, la lecture/écriture de fichiers et la recherche de code.
Implémentation de référenceFait correspondre les fonctionnalités aux outils Playwright MCP, fournit une configuration de serveur MCP et liste d'autres outils compatibles.
Bonnes pratiquesListes à faire et à ne pas faire : enregistrer les captures d'écran, corriger un problème à la fois, aucune refactorisation massive sans confirmation.
DépannageCouvre les fichiers de style introuvables, les corrections non reflétées, et les corrections affectant d'autres zones.

Description du skill lui-même

« Ce skill permet l'inspection visuelle de sites web exécutés localement ou à distance pour identifier et corriger les problèmes de conception. Se déclenche sur des demandes telles que « review website design », « check the UI », « fix the layout », « find design problems ». Détecte les problèmes de responsive design, d'accessibilité, de cohérence visuelle et de rupture de mise en page, puis effectue les corrections au niveau du code source. »

Description front-matter du fichier SKILL.md. Le fichier complet fait environ 10 577 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill web-design-reviewer

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

Le site doit-il être en cours d'exécution avant que je commence ?

Oui. Le premier prérequis obligatoire est une cible en cours d'exécution, qu'il s'agisse d'un serveur de développement local, d'un environnement de préproduction ou de production pour des revues en lecture seule.

L'automatisation de navigateur avec capture d'écran, navigation de pages et récupération du DOM est également requise, et les corrections nécessitent que le projet existe dans l'espace de travail.

Est-ce que cela modifie mon code ou se contente-t-il de signaler les problèmes ?

Il effectue des corrections au niveau du code source, en modifiant la couche correspondant à la méthode de style du projet : className dans les composants pour Tailwind, fichiers CSS modulaires pour CSS Modules, fichiers CSS ou SCSS simples, et fichiers JS/TS pour styled-components et Emotion. S'il ne peut pas corriger quelque chose, le rapport indique la raison et une action recommandée.

De quel outil d'automatisation de navigateur a-t-il besoin ?

Playwright MCP est recommandé comme implémentation de référence, avec des outils pour la navigation, l'instantané, la capture d'écran, le clic, le redimensionnement et les messages de la console. Le workflow fonctionne également avec Selenium, Puppeteer, Cypress ou WebDriver BiDi, à condition que la navigation, les captures d'écran et la récupération du DOM soient disponibles.

Web Design Reviewer

Exécuter web-design-reviewer sur une vraie tâche de revue de design.

Téléchargez OpenDesign, importez web-design-reviewer depuis son lien SKILL.md, collez le prompt ci-dessus, et lisez le plan avant le résultat.

Télécharger OpenDesign Parcourir tous les skills