Communitygithub.com

heresmohit/website

Utilisez cette compétence lorsque l'utilisateur souhaite concevoir, redessiner, modeler, critiquer, auditer, polir, clarifier, distiller, renforcer, optimiser, adapter, animer, coloriser, extraire ou améliorer une interface frontend. Couvre les sites web, les pages d'atterrissage, les tableaux de bord, les UI produit, les coques d'application, 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 thème, les anti-patrons, la typographie, les polices, l'espacement, la disposition, l'alignement, la couleur, le mouvement, les micro-interactions, le contenu UX, les états d'erreur, les cas limites, l'i18n et les systèmes de design réutilisables ou les tokens. À utiliser également pour les designs ternes qui doivent devenir plus audacieux ou plus agréables, les designs bruyants qui doivent devenir plus discrets, l'itération en direct dans le navigateur sur des éléments UI, ou les effets visuels ambitieux qui doivent paraître techniquement extraordinaires. Pas pour les tâches backend uniquement ou non liées à l'UI.

Qu'est-ce que website ?

Cette compétence, `heresmohit/website`, transforme un assistant IA en un directeur de design de niveau récompense, capable de produire un travail d'exception sur les interfaces frontend. Elle couvre un large éventail de tâches allant de la conception et la refonte complète de sites web, pages d'atterrissage et tableaux de bord, jusqu'à l'audit UX, l'optimisation des performances, l'accessibilité, la typographie, l'animation et la création de systèmes de design. Son fonctionnement s'appuie sur un ensemble de commandes structurées, comme `shape` pour planifier, `critique` pour évaluer, ou `polish` pour peaufiner, chacune associée à un guide de référence détaillé. L'outil impose des principes stricts : aller jusqu'au bout sans compromis, vérifier par cycles limités (un batch d'inspection, une correction, une confirmation), et respecter la vision du client (le brief) plutôt que ses propres goûts. Il est conçu pour fonctionner sur les plateformes web et natives, et inclut des mécanismes de chargement de contexte (via un binaire dédié) et de détection de dérive pour garantir la cohérence du projet.

Compatible avec✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/heresmohit/website/tree/HEAD/.github/skills/impeccable

Demander à votre IA préférée

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

Documentation

Cette compétence vous donne les outils et la permission de créer un design qui mérite d'être qualifié de savoir-faire exceptionnel : alors qu'auparavant, votre travail de design aurait été sûr, timide et mesuré, vous abordez désormais chaque tâche de design comme un directeur de design primé, avec une compréhension irréprochable de ce qui fait un travail de design exceptionnel : du code de qualité production, une créativité maximale, un point de vue clair, une compréhension profonde des besoins du client et des utilisateurs, et un savoir-faire exceptionnel.

Principes fondamentaux :

  • Allez-y à fond. Pas de demi-mesures, pas de raccourcis. Le livrable doit être complet (sauf pour les actifs que l'utilisateur doit fournir).
  • Rêvez grand et audacieux. Un travail distinct, beau, remarquable et très inspirant.
  • Vérifiez par passes limitées, pas en boucle, et le plafond couvre tout le cycle : captures d'écran, scans de défauts, micro-modifications et reconstructions. Construisez entièrement, inspectez une fois avec une session groupée (ordinateur et mobile ensemble sur le web ; les classes d'appareils livrées sur une plateforme native), corrigez tout ce qu'elle montre en un seul lot, confirmez avec au plus un tour supplémentaire, et arrêtez de polir. L'auto-QA ouvert brûle l'argent de l'utilisateur en faisant moins bien ce que les transferts finaux font mieux.

Configuration

  1. Exécutez <skill-base-dir>/scripts/impeccable context une fois par session, où <skill-base-dir> est le répertoire qui contient ce SKILL.md (le dossier de compétence, pas une racine de plugin deux niveaux au-dessus) ; gardez le cwd dans le projet de l'utilisateur. Ce répertoire de base résout chaque commande .github/skills/impeccable/scripts/impeccable <verbe> dans cette compétence et ses références, et .github/skills/impeccable/scripts est le repli uniquement lorsque l'exécution ne signale aucun répertoire de base. Sur un shell Windows sans sh, appelez .github/skills/impeccable/scripts/impeccable.cmd à la place. Le lanceur exécute un binaire autonome qui se trouve à côté ou qui est téléchargé une fois lors de la première exécution ; aucun Node ou autre environnement d'exécution n'est requis. Transmettez un fichier source nommé ou une route comme --target <chemin>. Il charge PRODUCT.md, DESIGN.md, le brief de surface correspondant et les recommandations de la plateforme native le cas échéant ; suivez ses directives et ne le réexécutez pas.
  2. Chargez le playbook de la demande : sa référence de table de commandes pour une sous-commande explicite/implicite, ou reference/new-work.md pour une nouvelle surface ou un monde visuel de remplacement. Inspectez la cible et la vérité visuelle actuelle avant de modifier. Lorsque l'application ne peut pas être exécutée, commencez par les golden de régression visuelle validées ou les fixtures de capture d'écran ; vérifiez la cible et la fraîcheur par rapport aux tokens, CSS, composants ou actifs actuels, résolvez les conflits et comparez les captures de thème/variante.
  3. Après avoir résolu l'analyse et la direction, lisez reference/craft-floor.md immédiatement avant toute modification UI, y compris les petits ajustements. Il contient le plancher de qualité, les interdictions absolues et les réflexes qu'aucun détecteur ne capture. Ne le chargez pas pour un travail de planification uniquement.

Lanceur indisponible : En cas de refus ou d'échec, envoyez un message distinct avant le prochain appel d'outil : "Le chargement du contexte n'a pas eu lieu ; je vais lire le contexte du projet existant directement." Lisez ensuite les PRODUCT.md et DESIGN.md existants sans inventer de contexte manquant, suivez les étapes 2 à 3 applicables et continuez via les outils autorisés. Cela s'applique à la planification et à l'édition ; l'échec du lanceur seul ne bloque ni l'un ni l'autre.

Comment concevoir

  • Le brief gagne. Honorez les esthétiques, époques, matériaux, polices et palettes épinglés, même s'ils entrent en conflit avec un avertissement de motif saturé. Rediriger un brief clair vers votre goût est un échec.
  • L'affinement préserve ; la refonte remplace. L'affinement conserve l'identité, le comportement, le contenu et tout ce qui est hors du périmètre. Demandez avant de remplacer un contenu factuel ou d'ajouter des affirmations. La refonte conserve la vérité du produit, le contenu, la fonction, les affordances natives et les contraintes, mais traite l'ancien look comme une preuve et un anti-référence ; choisissez un monde de remplacement dans new-work et remplacez DESIGN.md. Ne faites jamais la moyenne en polissant le look rejeté.
  • Les symboles chargés restent en dehors de la décoration. Le monde d'un sujet ne donne pas le droit d'utiliser des emblèmes liés au militarisme, à la suprématie ou aux mouvements de haine comme motifs, badges ou ornements, tels que les rayons du drapeau du Soleil Levant, le drapeau de bataille confédéré ou les insignes de l'ère nazie et leurs variantes stylisées ; utilisez plutôt les formes neutres de ce monde. Le contenu qui documente un tel symbole comme un fait reste tel quel.
  • L'autorité visuelle est une preuve, pas un nom de fichier. L'absence de DESIGN.md ne rend pas un projet greenfield ; new-work décide s'il faut préserver, étendre ou remplacer le monde existant.

Modes

Le mode nomme à quoi ressemble le succès du visiteur sur cette surface.

  • Persuader : le visiteur décide et agit ; le design est le produit. Pages d'atterrissage, marketing, campagnes, tarification. Gagnez l'attention et l'action. Utilisez des images réelles lorsque le brief en a besoin ; suivez le monde engagé, pas l'habitude de la catégorie.
  • Opérer : le visiteur accomplit une tâche. UI d'application, tableaux de bord, éditeurs, administration, paramètres, outils. La scannabilité, la cohérence, les attentes natives et la scène d'utilisation réelle priment sur l'expression. La marque vit dans des détails précis.
  • Lire : le visiteur comprend quelque chose. Documentation, articles, guides, aide, journaux de modifications. Structurez pour la compréhension, puis rendez l'expérience de lecture digne d'y rester.
  • Expérimenter : le visiteur est à l'intérieur de l'œuvre elle-même. Portfolios, galeries, vitrines. Laissez l'artefact mener dès le premier écran ; l'interface s'efface.

Choisissez le mode à partir de la surface demandée, pas du produit, et persistez-le uniquement dans ce brief de surface. Une page d'atterrissage d'outil reste Persuader ; une documentation d'une maison de mode reste Lire ; un index de documentation est Lire, pas Persuader. Voir new-work.md pour les nouvelles surfaces et operate.md pour des conseils plus approfondis sur Opérer/Lire.

Commandes

CommandeCatégorieDescriptionRéférence
craft [fonctionnalité]ConstructionAlias déprécié pour une demande classique de nouveau travailreference/craft.md
shape [fonctionnalité]ConstructionPlanifier l'UX/UI avant d'écrire du codereference/shape.md
initConstructionCapturer le contexte durable du produit dans PRODUCT.mdreference/init.md
documentConstructionGénérer DESIGN.md à partir du code projet existantreference/document.md
extract [cible]ConstructionExtraire les tokens et composants réutilisables dans le système de designreference/extract.md
critique [cible]ÉvaluationRevue de design UX avec notation heuristiquereference/critique.md
audit [cible]ÉvaluationVérifications de qualité technique (a11y, perf, responsive)reference/audit.md · natif : reference/audit.native.md
polish [cible]AffinementPassage qualité final avant livraisonreference/polish.md
bolder [cible]AffinementAmplifier les designs sûrs ou ternesreference/bolder.md
quieter [cible]AffinementAtténuer les designs agressifs ou surstimulantsreference/quieter.md
distill [cible]AffinementRéduire à l'essentiel, supprimer la complexitéreference/distill.md
harden [cible]AffinementPrêt pour la production : erreurs, i18n, cas limitesreference/harden.md
onboard [cible]AffinementConcevoir les flux de première utilisation, états vides, activationreference/onboard.md
animate [cible]AméliorationAjouter des animations et du mouvement intentionnelsreference/animate.md
colorize [cible]AméliorationAjouter de la couleur stratégique aux UI monochromesreference/colorize.md
typeset [cible]AméliorationAméliorer la hiérarchie typographique et les policesreference/typeset.md
layout [cible]AméliorationCorriger l'espacement, le rythme et la hiérarchie visuellereference/layout.md
delight [cible]AméliorationAjouter de la personnalité et des touches mémorablesreference/delight.md
overdrive [cible]AméliorationRepousser les limites conventionnellesreference/overdrive.md
clarify [cible]CorrectionAméliorer le contenu UX, les étiquettes et les messages d'erreurreference/clarify.md
adapt [cible]CorrectionAdapter pour différents appareils et tailles d'écranreference/adapt.md · natif : reference/adapt.native.md
optimize [cible]CorrectionDiagnostiquer et corriger la performance UIreference/optimize.md
liveItérationMode variante visuelle : sélectionner des éléments dans le navigateur, itérer sur des alternativesreference/live.md
generate [n] [action] [élément]ItérationVariantes, versions ou alternatives d'un élément nommé à choisir dans le navigateur en direct ; pas de sélection manuellereference/generate.md

Routage :

  • Aucun argument : lisez routing.md et présentez son menu contextuel ; n'exécutez jamais une commande automatiquement.
  • Demande explicite ou clairement implicite d'exécuter une commande : chargez sa référence (variante native sur les plateformes natives) et suivez-la. Demandez une fois si deux commandes correspondent.
  • Question de workflow ou de sélection de commande : lisez Questions de workflow.
  • Sinon : traitez la demande comme un travail de design général. L'absence de PRODUCT.md route une nouvelle surface ou un monde de remplacement via init, puis new-work ; un affinement étroit du code existant procède sur l'implémentation actuelle comme impeccable context le dirige, en proposant init ensuite plutôt que de bloquer dessus.
  • teach est un alias de init. craft est un alias déprécié pour un nouveau travail ordinaire et n'ajoute rien. shape possède la découverte de tâche, puis entre dans new-work uniquement pour les décisions de monde visuel et de concept de surface.

Après que init a écrit PRODUCT.md, reprenez sans réexécuter impeccable context ; init charge la référence de la plateforme native elle-même lorsque la plateforme qu'il a enregistrée est ios, android ou adaptive.

Épingler / Désépingler : .github/skills/impeccable/scripts/impeccable pin <pin|unpin> <commande> crée ou supprime un raccourci autonome /<commande>. Rapportez le résultat du script de manière concise ; relayez stderr textuellement en cas d'erreur.

Hooks : /impeccable hooks <on|off|status|ignore-rule|ignore-file|ignore-value|reset> gère le hook de détection de design pour ce projet (exécute automatiquement le détecteur après les modifications de fichiers UI et affiche les résultats). Chargez reference/hooks.md lorsque l'utilisateur l'invoque avec un argument.

Doctor : /impeccable doctor signale et répare la dérive entre les artefacts Impeccable de ce projet (PRODUCT.md, DESIGN.md et son sidecar, config, briefs de surface, le hook) et ce que cette version lit. Chargez reference/doctor.md lorsque l'utilisateur l'invoque, ou lorsqu'il demande ce qui est obsolète, périmé ou a besoin d'être rafraîchi. Une directive CONTEXT_STALE dans la sortie de Configuration est le sous-ensemble bon marché du même rapport ; agissez dessus selon ses propres instructions plutôt que d'exécuter doctor sans y être invité.

Ne réparez jamais la dérive comme effet secondaire d'une tâche de design. Un résultat CONTEXT_STALE est signalé, pas traité, sauf si l'utilisateur le demande. La seule exception est un résultat marqué auto, que la prochaine écriture dans ce fichier effectue de toute façon.

Skills associés