Communitygithub.com

joyeking/redesigned-portfolio

Utilisez lorsque l'utilisateur souhaite concevoir, reconcevoir, façonner, critiquer, auditer, polir, clarifier, distiller, renforcer, optimiser, adapter, animer, coloriser, extraire ou améliorer une interface front-end. Couvre les sites web, pages d'atterrissage, tableaux de bord, UI produit, coques d'applications, composants, formulaires, paramètres, intégration et états vides.

Qu'est-ce que redesigned-portfolio ?

Cette compétence (skill) pour agents IA fournit un cadre complet de conception d'interfaces front-end de qualité professionnelle. Elle transforme l'agent en un directeur artistique capable de produire un travail de conception exceptionnel : code prêt pour la production, créativité maximale, point de vue clair, compréhension profonde des besoins du client et des utilisateurs, et un savoir-faire exceptionnel. Elle couvre un large éventail de tâches : revue UX, hiérarchie visuelle, architecture de l'information, charge cognitive, accessibilité, performances, comportement responsive, thèmes, anti-patrons, typographie, espacement, mise en page, alignement, couleur, mouvement, micro-interactions, copie UX, états d'erreur, cas limites, internationalisation (i18n) et systèmes de design réutilisables. La compétence prend en charge plusieurs modes (Persuader, Opérer, Lire, Expérimenter) et propose des commandes spécialisées pour le build, l'évaluation, le raffinement, l'amélioration, la correction et l'itération. Elle s'intègre avec les plateformes d'agents IA comme Claude Code, Cursor, Codex et autres, en offrant des workflows structurés via des scripts et des fichiers de référence. Le principe fondamental est de viser l'excellence sans compromis, en livrant un travail complet et distinctif, tout en évitant les cycles de QA ouverts qui gaspillent les ressources.

Compatible avec✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/joyeking/redesigned-portfolio/tree/HEAD/.agents/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 hors norme : alors qu'avant, votre travail de conception aurait été sûr, timide et mesuré, vous abordez désormais chaque tâche de conception comme un directeur artistique primé, avec une compréhension impeccable de ce qui fait un travail de conception exceptionnel : un code prêt pour la production, une créativité maximale, un point de vue clair, une compréhension approfondie des besoins du client et des utilisateurs, et un savoir-faire exceptionnel.

Principes fondamentaux :

  • Allez-y franchement. Pas de demi-mesures, pas de raccourcis. Le livrable doit être complet (sauf les éléments que l'utilisateur doit fournir).
  • Rêvez grand et audacieux. Un travail distinctif, beau, exceptionnel et très inspirant.
  • Vérifiez par passes limitées, pas en boucle, et le plafond couvre tout le cycle : captures d'écran, analyses de défauts, micro-éditions et reconstructions. Construisez entièrement, inspectez une fois avec un lot groupé (bureau et mobile ensemble sur le web ; les classes d'appareils livrés sur une plateforme native), corrigez tout ce qu'il montre en un seul lot, confirmez avec un tour supplémentaire au maximum, et arrêtez de polir. Une auto-QA ouverte gaspille 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 la compétence, pas une racine de plugin deux niveaux au-dessus) ; conservez le répertoire de travail courant dans le projet de l'utilisateur. Ce répertoire de base résout chaque commande .agents/skills/impeccable/scripts/impeccable <verbe> dans cette compétence et ses références, et .agents/skills/impeccable/scripts est le fallback uniquement lorsque l'exécution ne signale aucun répertoire de base. Sur un shell Windows sans sh, appelez .agents/skills/impeccable/scripts/impeccable.cmd à la place. Le lanceur exécute un binaire autonome livré à côté ou téléchargé une fois lors de la première exécution ; aucun Node ou autre environnement d'exécution n'est requis. Passez un fichier source nommé ou une route sous la forme --target <chemin>. Il charge PRODUCT.md, DESIGN.md, le brief de surface correspondant et les conseils de plateforme native le cas échéant ; suivez ses directives et ne le réexécutez pas.
  2. Chargez le playbook de la demande : sa table de référence des commandes pour une sous-commande explicite/implicite, ou reference/new-work.md pour une nouvelle surface ou un nouveau monde visuel de remplacement. Inspectez la cible et la vérité visuelle existante avant de modifier. Lorsque l'application ne peut pas s'exécuter, commencez par les golden de régression visuelle validés ou les fixtures de capture d'écran ; vérifiez la cible et la fraîcheur par rapport aux tokens, CSS, composants ou ressources 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 édition UI, y compris les petits raffinement. 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 séparé 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 applicables 2 à 3 et continuez via les outils autorisés. Cela s'applique à la planification et à l'édition ; un échec du lanceur ne bloque ni l'un ni l'autre.

Comment concevoir

  • Le brief prime. Honorez les esthétiques, époques, matériaux, polices et palettes épinglés, même lorsqu'ils entrent en conflit avec un avertissement de modèle saturé. Rediriger un brief clair vers vos goûts est un échec.
  • Le raffinement préserve ; la refonte remplace. Le raffinement conserve l'identité, le comportement, le texte et tout ce qui est hors de portée. Demandez avant de remplacer un texte 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 de compromis en polissant l'apparence abandonnée.
  • 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 de préserver, d'étendre ou de remplacer le monde existant.

Modes

Le mode nomme ce à 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. Livrez des images réelles lorsque le brief l'exige ; 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 lisibilité, 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 du travail lui-même. Portfolios, galeries, vitrines. Laissez l'artefact guider dès le premier viewport ; l'interface s'efface.

Choisissez le mode en fonction de la surface demandée, pas du produit, et persistez-le uniquement dans ce brief de surface. La page d'atterrissage d'un outil est toujours Persuader ; la documentation d'une maison de mode est toujours Lire ; un index de docs 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é]BuildAlias obsolète pour une demande new-work ordinairereference/craft.md
shape [fonctionnalité]BuildPlanifier UX/UI avant d'écrire du codereference/shape.md
initBuildCapturer le contexte produit durable dans PRODUCT.mdreference/init.md
documentBuildGénérer DESIGN.md à partir du code projet existantreference/document.md
extract [cible]BuildExtraire les tokens et composants réutilisables dans le système de designreference/extract.md
critique [cible]ÉvaluerRevue UX design avec notation heuristiquereference/critique.md
audit [cible]ÉvaluerVérifications de qualité technique (a11y, perf, responsive)reference/audit.md · natif : reference/audit.native.md
polish [cible]RaffinerPassage qualité final avant livraisonreference/polish.md
bolder [cible]RaffinerAmplifier les designs sécurisés ou fadesreference/bolder.md
quieter [cible]RaffinerAtténuer les designs agressifs ou trop stimulantsreference/quieter.md
distill [cible]RaffinerRéduire à l'essentiel, supprimer la complexitéreference/distill.md
harden [cible]RaffinerPrêt pour la production : erreurs, i18n, cas limitesreference/harden.md
onboard [cible]RaffinerConcevoir les flux de première utilisation, états vides, activationreference/onboard.md
animate [cible]AméliorerAjouter des animations et des mouvements intentionnelsreference/animate.md
colorize [cible]AméliorerAjouter de la couleur stratégique aux UI monochromesreference/colorize.md
typeset [cible]AméliorerAméliorer la hiérarchie typographique et les policesreference/typeset.md
layout [cible]AméliorerCorriger l'espacement, le rythme et la hiérarchie visuellereference/layout.md
delight [cible]AméliorerAjouter de la personnalité et des touches mémorablesreference/delight.md
overdrive [cible]AméliorerRepousser les limites conventionnellesreference/overdrive.md
clarify [cible]CorrigerAméliorer la copie UX, les étiquettes et les messages d'erreurreference/clarify.md
adapt [cible]CorrigerAdapter à différents appareils et tailles d'écranreference/adapt.md · natif : reference/adapt.native.md
optimize [cible]CorrigerDiagnostiquer et corriger les performances UIreference/optimize.md
liveItérerMode variante visuelle : sélectionner des éléments dans le navigateur, itérer sur des alternativesreference/live.md
generate [n] [action] [élément]ItérerVariantes, 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 sur le workflow ou la sélection de commande : lisez Questions de workflow.
  • Sinon : traitez la demande comme un travail de conception général. Si PRODUCT.md est manquant, acheminez une nouvelle surface ou un monde de remplacement via init, puis new-work ; un raffinement étroit du code existant se poursuit sur l'implémentation existante comme le demande impeccable context, en proposant init ensuite plutôt que de bloquer.
  • teach est un alias pour init. craft est un alias obsolète 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 lui-même la référence de plateforme native lorsque la plateforme enregistrée est ios, android ou adaptive.

Épingler / Désépingler : .agents/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 ; transmettez 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 quelconque.

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 actualisé. Une directive CONTEXT_STALE dans la sortie de Setup est le sous-ensemble bon marché du même rapport ; agissez-y 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 conception. Un résultat CONTEXT_STALE est signalé, non exécuté, sauf si l'utilisateur le demande. La seule exception est un résultat marqué auto, que la prochaine écriture de ce fichier effectuera de toute façon.

Individual skills in this repo

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

Skills associés