Aller au guide d’utilisation
impeccablepar Paul Bakaus

Impeccable Skill.

Un skill Claude Code et Codex pour la revue de design : un seul skill pour concevoir, critiquer, auditer, peaufiner, animer et affiner les interfaces.

  • Revue de conception et accessibilité
  • Code UI
pbakaus/impeccable · plugin/skills/impeccable/SKILL.mdSKILL.md
--- name: impeccable description: Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, … --- ## Setup ## How to design ## Modes ## Commands
En-tête et titres de section lus depuis le fichier source le 14 septembre 2026 · 11 912 caractères au total

01 Ce qu'il fait

Ce que fait le skill impeccable 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

Impeccable transforme les interfaces frontend grâce à la conception, la critique, l'audit, le peaufinage, l'animation et le raffinement. Il couvre les sites web, les landing pages, les tableaux de bord, les UI produit, les composants, les formulaires, les paramètres, l'onboarding et les états vides—en traitant la revue UX, la hiérarchie visuelle, l'accessibilité, la performance, le comportement responsive, le theming, la typographie, l'espacement, la mise en page, la couleur, le mouvement, les micro-interactions et les design systems.

Le skill livre un savoir-faire hors norme grâce à un code de qualité production, une créativité maximale, un point de vue clair et un savoir-faire exceptionnel. Il organise le travail autour de quatre modes—Persuade, Operate, Read, Experience—et plus de vingt commandes spécialisées. Chaque session charge le contexte produit, l'univers visuel et les briefs de surface via un script de lancement, puis suit des playbooks spécifiques à chaque commande ainsi qu'un plancher de qualité de savoir-faire.

Ce qu'il produit

  • PRODUCT.md capturant le contexte produit durable via la commande init
  • DESIGN.md généré à partir du code existant du projet via la commande document
  • Tokens et composants réutilisables extraits vers le design system via la commande extract
  • Code UI de qualité production avec des livrables complets, une créativité maximale et un savoir-faire exceptionnel
Voir l'exemple de prompt ↗

Fonctionnement

  1. 01
    Charger le contexte de session une seule fois

    Exécutez le script impeccable avec l'argument context une fois par session depuis le répertoire du skill.

  2. 02
    Charger le playbook de la requête

    Pour les sous-commandes explicites ou implicites, chargez la référence du tableau Commands ; pour de nouvelles surfaces ou des univers visuels de remplacement, chargez new-work.md.

  3. 03
    Lire craft-floor avant toute modification

    Une fois l'analyse et la direction résolues, lisez craft-floor.md immédiatement avant toute modification d'UI, y compris les petits raffinements.

  4. 04
    Choisir le mode selon le type de surface

    Sélectionnez Persuade pour les pages d'atterrissage et le marketing où les visiteurs décident et agissent. Choisissez Operate pour l'UI d'application et les tableaux de bord où les visiteurs accomplissent des tâches.

  5. 05
    Vérifier par passes délimitées

    Construisez entièrement, inspectez une seule fois avec une passe groupée couvrant desktop et mobile ensemble sur le web, ou les classes d'appareils livrés en natif.

02 Trouvez celui qui vous convient

Quand utiliser le skill impeccable

Utilisez le skill impeccable dans Claude Code ou Codex lorsque le travail consiste en une revue de design de ce type. L'adéquation et les limites ci-dessous sont tirées du fichier du skill lui-même.

Bon choix

  • L'utilisateur souhaite concevoir, redessiner, façonner, critiquer, auditer, peaufiner, clarifier, distiller, renforcer, optimiser, adapter, animer, coloriser, extraire, ou autrement améliorer une interface frontend
  • Designs fades qui doivent devenir plus audacieux ou plus réjouissants
  • Designs criards qui devraient devenir plus discrets
  • Itération en direct dans le navigateur sur des éléments d'UI
  • Effets visuels ambitieux qui doivent sembler techniquement extraordinaires

Connaître les limites

  • Tâches purement backend

Quoi fournir

  • Fichier ou route ciblePassez un fichier source nommé ou une route en utilisant le flag --target avec un argument de chemin lors de l'exécution du script context.
  • PRODUCT.mdFichier de contexte produit durable chargé par le launcher. Lorsque le launcher échoue, lisez directement le fichier existant sans inventer de contexte manquant.
  • Goldens de régression visuelle ou fixtures de captures d'écranLorsque l'application ne peut pas s'exécuter, commencez par les goldens de régression visuelle ou les fixtures de captures d'écran commités.

03 Dans le skill

Règles que le skill impeccable donne à Claude Code et Codex

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

  1. Le brief l'emporte

    Respectez les esthétiques, époques, matériaux, polices et palettes épinglées même lorsqu'elles entrent en conflit avec un avertissement de motif saturé. Réorienter un brief clair vers votre propre goût constitue un échec.

  2. Le raffinement préserve ; la refonte remplace

    Le raffinement conserve l'identité en place, le comportement, le texte et tout ce qui est hors périmètre.

  3. L'autorité visuelle est une preuve, pas un nom de fichier

    L'absence de DESIGN.md ne suffit pas à faire d'un projet un projet greenfield. Le playbook des nouveaux travaux détermine s'il faut préserver, étendre ou remplacer le monde existant sur la base de preuves visuelles.

  4. Vérifier par passes bornées, pas en boucle

    Le plafond couvre l'ensemble du cycle : captures d'écran, analyses de défauts, micro-modifications et reconstructions.

  5. Ne jamais réparer une dérive comme effet secondaire

    Une directive CONTEXT_STALE est signalée, pas exécutée, sauf demande explicite de l'utilisateur. La seule exception concerne les constats marqués auto, que la prochaine écriture dans ce fichier effectue de toute façon.

  6. Un échec du lanceur ne bloque pas le travail

    En cas de refus ou d'échec du script, envoyez un message séparé, puis lisez directement PRODUCT.md et DESIGN.md existants sans inventer de contexte manquant.

04 Mettez-le en pratique

Installer impeccable 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 impeccable à 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/pbakaus/impeccable --skill impeccable

Forme générique de la commande CLI skills pour plugin/skills/impeccable/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
Audit [src/components/SettingsPanel.tsx] for accessibility and responsive behavior, then polish the form layout and typeset the section headings to improve visual hierarchy. The panel should feel confident but scannable for users managing account preferences.

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 :

  • Confirmer avec au plus un tour supplémentaire, puis arrêter de peaufiner
  • Exécuter des analyses de défauts dans le cadre du cycle de vérification borné
  • Vérifier la cible et la fraîcheur par rapport aux tokens, CSS, composants ou assets actuels
  • Comparer les captures de thème et de variante lors du travail avec des systèmes de theming

Dans OpenDesign, impeccable est intégré : Plugins → Skills, sélectionnez-le dans la barre supérieure.

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.

Repository
github.com/pbakaus/impeccable Branche main
Fichier du skill
plugin/skills/impeccable/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit cb56ed6
License
Apache-2.0 D'après LICENSE ; SKILL.md indique « Apache 2.0 ».
Étoiles du dépôt
67 876 Instantané GitHub pris le 14 septembre 2026 pour l'ensemble du dépôt pbakaus/impeccable. Ce n'est ni une note ni un décompte d'utilisation pour impeccable.
Vérifié par OpenDesign
14/09/2026 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Inclus dans OpenDesign main (vérifié le 28/08/2026) ; aucune exécution en direct n'a été enregistrée sur cette page.

Dans le SKILL.md

  1. ConfigurationExécutez le script de contexte une fois par session, chargez le playbook, consultez le craft floor avant de modifier
  2. Comment concevoirLe brief prime, le raffinement préserve l'identité tandis que la refonte la remplace, l'autorité visuelle est une preuve, pas un nom de fichier
  3. ModesPersuade pour les pages d'atterrissage, Operate pour les tableaux de bord, Read pour la documentation, Experience pour les portfolios
  4. CommandesPlus de vingt commandes organisées en catégories Build, Evaluate, Refine, Enhance, Fix et Iterate avec fichiers de référence
Description du skill lui-même
« Utilisez ce skill lorsque l'utilisateur souhaite concevoir, reconcevoir, façonner, critiquer, auditer, peaufiner, clarifier, affiner, renforcer, optimiser, adapter, animer, colorer, extraire ou améliorer une interface frontend. Couvre les sites web, les pages d'accueil, les tableaux de bord, les interfaces produit, les shells d'applications, les composants, les formulaires, les paramètres, l'onboarding et les états vides. Gère la revue UX, la hiérarchie visuelle, l'architecture de l'information, la charge cognitive, l'accessibilité, la performance, le comportement responsive, le theming, les anti-patterns, la typographie, les polices, l'espacement, la mise en page, l'alignement, la couleur, le mouvement, les micro-interactions, le copy UX, les états d'erreur, les cas limites, l'i18n et les systèmes de design ou tokens réutilisables. S'applique également aux designs fades qui doivent devenir plus audacieux ou plus plaisants, aux designs bruyants qui devraient devenir plus discrets, à l'itération en direct dans le navigateur sur les éléments d'interface, ou aux effets visuels ambitieux qui doivent sembler techniquement extraordinaires. Pas pour les tâches backend uniquement ou non-UI. »

Description du front-matter depuis SKILL.md. Le fichier complet fait environ 11 912 caractères. Lisez le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill impeccable

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

Quelle commande dois-je utiliser pour ma demande ?

Si aucun argument n'est fourni, lisez routing.md et présentez son menu contextuel ; n'exécutez jamais automatiquement une commande. Pour les demandes explicites ou clairement implicites, chargez la référence du tableau des commandes.

Pour les questions relatives au workflow ou à la sélection de commande, consultez la section Workflow questions dans routing.md. Sinon, traitez la demande comme un travail de conception général.

Impeccable

Exécuter impeccable sur une vraie tâche de revue de design.

Le skill impeccable est intégré dans OpenDesign. Téléchargez l'application, sélectionnez le skill dans Plugins → Skills, collez le prompt ci-dessus, et lisez le plan avant le résultat.

Terminal
npx skills add https://github.com/pbakaus/impeccable --skill impeccable

OpenDesign Desktop

Un seul design system. Votre marque, cohérente partout

Dans le Vibe Design Workspace complet, appliquez les mêmes règles de marque aux sites, slides, prototypes interactifs, dashboards, images et vidéos HTML. Connectez Codex, Claude Code, Cursor et vos autres agents de code locaux, puis créez gratuitement.

  • Sites, slides, prototypes, dashboards, images et vidéos
  • Plus de 140 design systems et la bibliothèque complète de modèles et skills
  • Codex local et plus de 21 agents de code · Gratuit
Télécharger gratuitement

Disponible sur macOS et Windows