Communitygithub.com

design-pass

Applique une direction visuelle convenue à une page ou un composant en réutilisant d'abord les composants existants, puis vérifie chaque largeur et le mode sombre avec un audit headless-Chrome et une différence pixel avant/après, et examine en fonction des principes Refactoring UI, Nielsen et WCAG 2.2. À utiliser lorsqu'on demande une refonte, un restylage, un polissage ou « faire ressembler à la référence », après design-ref ou lorsque la direction est déjà claire.

Qu'est-ce que design-pass ?

Cette compétence, design-pass, permet d'appliquer systématiquement une direction visuelle convenue à une page ou un composant en garantissant la cohérence, l'accessibilité et l'absence de régressions. Elle est conçue pour les agents IA comme Claude Code, Cursor ou Codex afin d'automatiser le processus de raffinement de l'interface utilisateur après qu'une décision de conception a été prise. Le flux de travail commence par la prise d'une capture d'audit initiale à l'aide d'un script headless-Chrome, en capturant plusieurs largeurs (375, 768, 1440) en modes clair et sombre. Ensuite, le développeur (ou l'agent) inspecte la page, réutilise les composants primitifs existants, applique les modifications de style à l'aide de jetons de conception spécifiques au projet, et suit une liste de contrôle qui inclut la hiérarchie, les états vides/chargement/erreur et la taille minimale des champs de saisie. Enfin, un second audit est effectué, une comparaison pixel par pixel est générée pour mettre en évidence les modifications involontaires, et des vérifications optionnelles de niveaux de gris, de lint et de typecheck sont exécutées. La compétence met l'accent sur la réutilisation des composants existants, l'évitement des fonctionnalités non demandées et la validation de l'accessibilité par rapport aux normes WCAG 2.2, aux heuristiques de Nielsen et aux principes de Refactoring UI. Elle est particulièrement utile pour les tâches de refonte, de restylage ou de polissage où la direction de conception est déjà définie.

Compatible avec✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/iamk3nnyt/claude-skills/tree/HEAD/skills/design-pass
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

Que fait design-pass ?

Cible : $ARGUMENTS Toolkit : ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/ · Checklist : ${CLAUDE_SKILL_DIR}/reference/review-checklist.md

1. État initial (avant de toucher au code)

Assurez-vous que le serveur de développement est en cours d'exécution (lancez-le en arrière-plan si nécessaire ; n'exécutez jamais une version de production), puis :

node ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/audit.mjs http://localhost:<port> --pages <path> --widths 375,768,1440 --dark --out /tmp/design-pass/before

2. Audit avant correction

  • Trouvez chaque composant que la cible affiche, ainsi que tout autre endroit affichant le même motif (recherchez les chaînes de classe et les noms de composants).
  • Réutilisez un composant primitif existant (bouton, carte, modale, titre de section) avant d'en écrire un nouveau. Si le même balisage apparaît 2 fois ou plus, extrayez-le, puis restylez-le une fois.
  • Construisez exactement ce qui a été demandé. Pas de nouvelles sections, badges, toggles ou animations sauf si demandé.
  • Utilisez uniquement les jetons du projet. Si une valeur ne fait pas partie de l'échelle, utilisez le pas le plus proche, ou proposez un jeton (voir design-ref).

3. Application

Parcourez la liste de contrôle : hiérarchie, une action principale par vue, l'échelle d'espacement, l'échelle typographique, les états vides/chargement/erreur, et les champs de saisie ≥ 16 px sur mobile.

4. Vérification

node ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/audit.mjs http://localhost:<port> --pages <path> --widths 375,768,1440 --dark --out /tmp/design-pass/after
node ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/diff.mjs /tmp/design-pass/before /tmp/design-pass/after
  • Lisez les fiches après pour chaque largeur en mode clair et sombre. Regardez les PNG de différence pour détecter les modifications non intentionnelles en dehors de la cible.
  • Vérification en niveaux de gris : réexécutez une largeur avec --inject "document.documentElement.style.filter='grayscale(1)'".
  • Ensuite, exécutez l'ensemble complet des largeurs ui-audit une fois, puis typecheck + lint (pas de build).
  • Si le projet conserve un fichier Figma synchronisé avec le code, mettez à jour les cadres correspondants dans la même tâche.

Critères de sortie

  • Pas de défilement latéral, aucun nouveau problème de contraste ou d'axe par rapport à avant.
  • La différence montre des modifications uniquement là où prévu.
  • Aucun nouveau composant qui en duplique un existant, et aucune UI non demandée.
  • Mode sombre vérifié, ou confirmé que le projet n'en a pas.
  • Typecheck et lint réussis.
  • Un court résumé à l'utilisateur, ainsi que les 1 à 2 chemins de fiches à consulter.

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

iamk3nnyt/claude-skills

Extracts the visual system from a reference site or pasted HTML (colour roles, type scale, spacing scale, radii, shadows, button/card/eyebrow anatomy, tone) and maps it onto the current project's existing tokens as a short token table. Use when the user shares a reference ("make it look like <site>", "in this style", a URL or HTML paste) before a redesign.

iamk3nnyt/claude-skills

QAs a project's transactional and digest emails by rendering every template without DB or network, screenshotting at 600 and 375 px in light, dark and images-off, and checking for placeholder leaks (undefined, NaN, {{…}}), preheader, unsubscribe, alt text, absolute links, Outlook-safe buttons, viewport meta and Gmail's 102 KB clip. Use when email templates change, before sending a campaign, or when asked to check how emails look.

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