Communitygithub.com

DevvGwardo/impeccable

Compétence complète de design frontend — 23 commandes pour façonner, auditer, polir et affiner l'interface utilisateur. À utiliser lorsque l'utilisateur souhaite concevoir, reconcevoir, façonner, critiquer, auditer, polir, clarifier, distiller, durcir, optimiser, adapter, animer, coloriser, extraire ou améliorer une interface frontend. Couvre les sites web, pages d'atterrissage, tableaux de bord, UI produit, shells d'application, composants, formulaires, paramètres, onboarding, états vides. Gère la revue UX, la hiérarchie visuelle, l'architecture de l'information, la charge cognitive, l'accessibilité, les performances, le comportement responsive, le thème, les anti-patrons, 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 conception/tokens réutilisables. À utiliser également pour les designs fades nécessitant de l'audace, les designs bruyants nécessitant du calme, l'itération en direct dans le navigateur, ou les effets visuels ambitieux. Pas pour les tâches backend ou non-UI.

Qu'est-ce que impeccable ?

Impeccable est une compétence de conception frontend complète pour les agents IA, offrant 23 commandes pour façonner, auditer, polir et affiner l'interface utilisateur. Basée sur le projet open-source pbakaus/impeccable, elle prend en charge le travail sur les sites web, les pages d'atterrissage, les tableaux de bord, l'UI produit, les formulaires, l'onboarding, les états vides et bien plus encore. Elle couvre la revue UX, la hiérarchie visuelle, l'architecture de l'information, la charge cognitive, l'accessibilité, les performances, le comportement responsive, la typographie, les systèmes de conception et les tokens, avec des anti-patrons stricts et une philosophie anti-slop IA. Utile pour les concepteurs et développeurs qui souhaitent itérer rapidement sur des interfaces de qualité production, que ce soit pour un registre de marque (marketing, landing pages) ou produit (applications, tableaux de bord). La compétence s'appuie sur des fichiers de référence détaillés pour chaque commande et domaine de conception, et inclut un outil CLI autonome pour détecter les anti-patrons UI sans nécessiter d'agent IA.

Compatible avec✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add DevvGwardo/impeccable
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Impeccable — Compétence de Conception Frontend

Conçoit et itère des interfaces frontend de qualité production. Code réel fonctionnel, choix de conception assumés, artisanat exceptionnel.

Basé sur pbakaus/impeccable (Apache 2.0), qui s'appuie sur la compétence de conception frontend d'Anthropic.

Configuration

Avant tout travail de conception ou modification de fichiers :

  1. Lire le contexte — Vérifier la présence de PRODUCT.md / DESIGN.md à la racine du projet. Si PRODUCT.md est manquant ou un placeholder (<200 caractères), suggérer à l'utilisateur d'exécuter impeccable:teach d'abord.
  2. Identifier le registre — Chaque tâche de conception est marque (marketing, landing, campagne, portfolio : la conception EST le produit) ou produit (UI d'application, admin, tableau de bord, outil : la conception SERT le produit). Identifier avant de concevoir.
  3. Charger la référence du registre — Utiliser la référence marque ou produit depuis les fichiers de référence de cette compétence selon le registre.

Commandes

Lorsque l'utilisateur invoque une commande impeccable spécifique (par exemple « auditez cette page », « polissez le checkout »), suivre le modèle : impeccable:<commande> [cible]. Chaque commande possède un fichier de référence dans le répertoire de référence de cette compétence.

CommandeCatégorieDescription
impeccable:craft [fonctionnalité]ConstructionFlux complet de conception puis construction avec itération visuelle
impeccable:teachConstructionConfiguration unique : recueillir le contexte de conception, écrire PRODUCT.md et DESIGN.md
impeccable:documentConstructionGénérer DESIGN.md à partir du code existant du projet
impeccable:extract [cible]ConstructionExtraire les composants et tokens réutilisables dans le système de conception
impeccable:shape [fonctionnalité]ConstructionPlanifier l'UX/UI avant d'écrire du code
impeccable:critique [cible]ÉvaluationRevue de conception UX : hiérarchie, clarté, résonance émotionnelle
impeccable:audit [cible]ÉvaluationEffectuer des contrôles de qualité technique (a11y, performances, responsive)
impeccable:polish [cible]AffinageDernière passe, alignement du système de conception et préparation à la livraison
impeccable:bolder [cible]AffinageAmplifier les designs fades
impeccable:quieter [cible]AffinageAtténuer les designs trop audacieux
impeccable:distill [cible]AffinageRéduire à l'essentiel
impeccable:harden [cible]AffinageGestion des erreurs, i18n, débordement de texte, cas limites
impeccable:onboard [cible]AffinageFlux de première utilisation, états vides, parcours d'activation
impeccable:animate [cible]AméliorationAjouter du mouvement intentionnel
impeccable:colorize [cible]AméliorationIntroduire de la couleur stratégique
impeccable:typeset [cible]AméliorationCorriger les choix de polices, la hiérarchie, le dimensionnement
impeccable:layout [cible]AméliorationCorriger la mise en page, l'espacement, le rythme visuel
impeccable:delight [cible]AméliorationAjouter des moments de joie
impeccable:overdrive [cible]AméliorationAjouter des effets techniquement extraordinaires
impeccable:clarify [cible]CorrectionAméliorer le copy UX peu clair
impeccable:adapt [cible]CorrectionAdapter pour différents appareils
impeccable:optimize [cible]CorrectionAméliorations des performances
impeccable:liveItérationMode variante visuelle : itérer sur des éléments dans le navigateur

Routage

  • Aucune cible spécifiée : Afficher le tableau des commandes groupées par catégorie, demander ce que l'utilisateur souhaite faire.
  • Commande correspondante : Charger son fichier de référence depuis le répertoire reference/ de cette compétence et suivre ses instructions.
  • Aucune correspondance mais lié au design : Appliquer les lois de conception partagées et la référence du registre directement.

Lois de Conception Partagées

Appliquer à chaque conception, tous registres confondus. Faire correspondre la complexité d'implémentation à la vision esthétique. Varier selon les projets ; ne jamais converger vers les mêmes choix.

Couleur

  • Utiliser OKLCH. Réduire le chroma à mesure que la luminosité approche 0 ou 100 ; un chroma élevé aux extrêmes semble criard.
  • Ne jamais utiliser #000 ou #fff. Teinter chaque neutre vers la teinte de la marque (chroma 0,005–0,01 suffit).
  • Choisir une stratégie de couleur avant de choisir les couleurs. Quatre étapes sur l'axe de l'engagement :
    • Retenue : neutres teintés + un accent ≤10 %. Valeur par défaut du produit ; minimalisme de marque.
    • Engagée : une couleur saturée porte 30–60 % de la surface. Valeur par défaut de la marque pour les pages centrées sur l'identité.
    • Palette complète : 3–4 rôles nommés, chacun utilisé délibérément. Campagnes de marque ; visualisation de données produit.
    • Trempée : la surface EST la couleur. Héros de marque, pages de campagne.
  • La règle « un accent ≤10 % » ne s'applique qu'à la palette Retenue. Les palettes Engagée / Complète / Trempée la dépassent intentionnellement.

Thème

Sombre vs clair n'est jamais une valeur par défaut. Pas de sombre « parce que les outils ont l'air cool en sombre ». Pas de clair « pour être sûr ».

Avant de choisir, écrire une phrase de scène physique : qui utilise ceci, où, sous quelle lumière ambiante, dans quelle humeur. Si la phrase ne force pas la réponse, elle n'est pas assez concrète. Ajouter des détails jusqu'à ce que ce soit le cas.

« Tableau de bord d'observabilité » ne force pas une réponse. « SRE jetant un coup d'œil à la gravité d'un incident sur un écran 27 pouces à 2 h du matin dans une pièce sombre » le fait.

Typographie

  • Limiter la longueur de ligne du corps à 65–75 ch.
  • Hiérarchie via le contraste d'échelle + de poids (ratio ≥1,25 entre les niveaux). Éviter les échelles plates.

Mise en page

  • Varier l'espacement pour le rythme. Le même padding partout, c'est la monotonie.
  • Les cartes sont la solution de facilité. Ne les utiliser que lorsqu'elles sont vraiment la meilleure affordance. Les cartes imbriquées sont toujours erronées.
  • Ne pas tout envelopper dans un conteneur. La plupart des choses n'en ont pas besoin.

Mouvement

  • Ne pas animer les propriétés de mise en page CSS.
  • Utiliser des courbes exponentielles pour l'ease-out (ease-out-quart / quint / expo). Pas de bounce, pas d'elastic.

Interdictions Absolues (Anti-Patrons)

Correspondre et refuser. Si vous êtes sur le point d'écrire l'un de ces éléments, le réécrire avec une structure différente.

  • Bordures latérales. border-left ou border-right >1 px comme accent coloré sur les cartes, éléments de liste, encarts ou alertes. Utiliser des bordures complètes, des teintes d'arrière-plan, des numéros/icônes en tête, ou rien.
  • Texte dégradé. background-clip: text + dégradé. Décoratif, jamais significatif. Utiliser une seule couleur unie. Accentuation via le poids ou la taille.
  • Verre dépoli par défaut. Flous et cartes en verre utilisés de manière décorative. Rare et intentionnel, ou rien.
  • Le modèle métrique héros. Grand nombre, petite étiquette, statistiques de support, accent dégradé. Cliché SaaS.
  • Grilles de cartes identiques. Cartes de même taille avec icône + titre + texte, répétées à l'infini.
  • Modale comme première idée. Les modales sont généralement de la paresse. Épuiser d'abord les alternatives en ligne/progressives.

Copy

  • Chaque mot gagne sa place. Pas de titres reformulés, pas d'introductions qui répètent le titre.
  • Pas de tirets cadratins. Utiliser des virgules, deux-points, points-virgules, points ou parenthèses.

Le Test Anti-Slop IA

Si quelqu'un pouvait regarder cette interface et dire « c'est l'IA qui a fait ça » sans aucun doute, c'est un échec.

Vérification de réflexe catégoriel — deux niveaux :

  • Premier ordre : si quelqu'un pouvait deviner le thème + la palette à partir de la seule catégorie (« observabilité → bleu foncé », « santé → blanc + sarcelle », « finance → marine + or », « crypto → néon sur noir »), c'est le réflexe des données d'entraînement. Retravailler la phrase de scène et la stratégie de couleur jusqu'à ce que la réponse ne soit pas évidente du domaine.
  • Second ordre : si quelqu'un pouvait deviner la famille esthétique à partir de la catégorie plus des contre-références (« outil de workflow IA qui n'est pas SaaS-crème → éditorial-typographique », « fintech qui n'est pas marine-et-or → mode sombre natif terminal »), c'est le piège un niveau plus profond. Le premier réflexe a été évité, mais pas le second. Retravailler jusqu'à ce que les deux réponses ne soient pas évidentes.

Fichiers de Référence

Des fichiers de référence détaillés sont disponibles dans le répertoire reference/ de cette compétence pour chaque commande et domaine de conception. Les charger avec skill_view(name='impeccable', file_path='reference/<nom>.md').

Références clés par domaine de conception (charger pour des explorations approfondies) :

  • reference/brand.md — Registre marque : marketing, landing, pages de campagne
  • reference/product.md — Registre produit : UI d'application, tableaux de bord, outils
  • reference/typography.md — Systèmes typographiques, paires de polices, échelles modulaires, OpenType
  • reference/color-and-contrast.md — OKLCH, neutres teintés, mode sombre, accessibilité
  • reference/spatial-design.md — Systèmes d'espacement, grilles, hiérarchie visuelle
  • reference/motion-design.md — Courbes d'assouplissement, décalage, mouvement réduit
  • reference/interaction-design.md — Formulaires, états de focus, modèles de chargement
  • reference/responsive-design.md — Mobile-first, design fluide, container queries
  • reference/ux-writing.md — Étiquettes de boutons, messages d'erreur, états vides
  • reference/cognitive-load.md — Réduire la charge cognitive dans les interfaces
  • reference/heuristics-scoring.md — Rubrique d'évaluation heuristique de style Nielsen

Références spécifiques aux commandes (charger sur correspondance de commande) :

  • reference/craft.md — Flux complet conception puis construction
  • reference/shape.md — Planification UX/UI avant le code
  • reference/teach.md — Configuration de PRODUCT.md et DESIGN.md
  • reference/document.md — Génération de DESIGN.md à partir du code existant
  • reference/extract.md — Extraction de tokens dans le système de conception
  • reference/critique.md — Revue de conception UX
  • reference/audit.md — Contrôles de qualité technique
  • reference/polish.md — Dernière passe de qualité
  • reference/bolder.md — Amplification des designs sûrs
  • reference/quieter.md — Atténuation des designs bruyants
  • reference/distill.md — Réduction à l'essentiel
  • reference/harden.md — Préparation à la production
  • reference/onboard.md — Flux de première utilisation et états vides
  • reference/animate.md — Animation intentionnelle
  • reference/colorize.md — Introduction stratégique de la couleur
  • reference/typeset.md — Corrections typographiques
  • reference/layout.md — Corrections de mise en page et d'espacement
  • reference/delight.md — Personnalité et touches mémorables
  • reference/overdrive.md — Repousser les limites conventionnelles
  • reference/clarify.md — Améliorations du copy UX
  • reference/adapt.md — Adaptation aux appareils
  • reference/optimize.md — Performance UI
  • reference/live.md — Itération de variante dans le navigateur

Outil CLI

Impeccable est également fourni avec un CLI autonome pour détecter les anti-patrons UI sans nécessiter d'agent IA :

npx impeccable detect src/                   # analyser un répertoire
npx impeccable detect index.html             # analyser un fichier HTML
npx impeccable detect https://example.com    # analyser une URL (nécessite Puppeteer)
npx impeccable detect --fast --json .        # uniquement regex, sortie JSON

Analyse les fichiers HTML, CSS, JSX, TSX, Vue, Svelte pour 25+ anti-patrons. Code de sortie 0 = propre, 2 = problèmes trouvés. Nécessite Node.js 18+.

Source

Original : github.com/pbakaus/impeccable Site web : impeccable.style

Skills associés

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community