Communitygithub.com

williamsnieves/landing-factory

Concevez, révisez, auditez, peaufinez, simplifiez, animez ou améliorez toute interface frontend (sites web, pages d'atterrissage, tableaux de bord, UI produit, composants, formulaires, paramètres, intégration, états vides, écrans natifs iOS/Android). Gère la revue UX, la hiérarchie, la mise en page, la typographie, la couleur, le mouvement, le contenu UX, l'accessibilité, le comportement responsive, les cas particuliers et la capture/documentation des systèmes de design (DESIGN.md, tokens).

Qu'est-ce que landing-factory ?

Cette compétence transforme un agent d'IA en un directeur de design primé pour la création et l'amélioration d'interfaces frontend. Elle offre un cadre de travail complet allant de la planification UX/UI (`shape`) à la génération de code prêt pour la production (`craft`), en passant par l'évaluation technique (`audit`), le polissage final (`polish`), et l'amplification ou l'atténuation de l'impact visuel (`bolder`, `quieter`). Elle s'applique aussi bien aux pages d'atterrissage qu'aux applications mobiles natives. Le compétence repose sur un exécutable binaire autonome (sans dépendance Node) qui charge le contexte du projet (PRODUCT.md, DESIGN.md, brief de surface) et exécute des commandes spécialisées telles que l'extraction de composants réutilisables (`extract`) ou la création de variantes visuelles interactives (`live`, `generate`). L'agent suit des principes stricts : finir le travail, adapter l'ambition au mode de la surface (Persuader, Opérer, Lire, Expérience), et vérifier les résultats en examinant le rendu final par lots, sans captures d'écran après chaque modification. En cas d'indisponibilité du lanceur, l'agent lit directement le contexte existant du projet et procède sans bloquer.

Compatible avec✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/williamsnieves/landing-factory/tree/HEAD/.claude/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 l'autorisation de créer un design qui mérite le nom de craft hors norme. Travaillez comme le ferait un directeur de design primé : code prêt pour la production, point de vue clair, compréhension profonde des besoins du client et de ses utilisateurs, et un savoir-faire exceptionnel.

Principes fondamentaux :

  • Finissez le travail. Pas de réserve, pas de raccourcis : le livrable est complet, sauf pour les ressources que l'utilisateur doit fournir.
  • Adaptez l'ambition au mode de la surface (voir Modes). Les modes Persuader et Expérience bénéficient d'un engagement total : un travail audacieux, distinctif, avec un point de vue. Sur Opérer et Lire, l'ambition se manifeste par la précision et la retenue, et les motifs que le visiteur connaît déjà gagnent leur place.
  • Vérifiez en regardant le résultat rendu aux tailles auxquelles il est livré, et regroupez les contrôles : corrigez ce qu'un seul coup d'œil révèle avant de regarder à nouveau, plutôt que de faire une capture d'écran après chaque réglage.

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, et non la racine d'un plugin deux niveaux au-dessus) ; conservez le répertoire de travail (cwd) dans le projet de l'utilisateur. Ce répertoire de base résout chaque commande .claude/skills/impeccable/scripts/impeccable <verbe> de cette compétence et de ses références, et .claude/skills/impeccable/scripts est la solution de repli uniquement lorsque l'exécution ne signale aucun répertoire de base. Sur un shell Windows sans sh, appelez .claude/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 comme --target <path>. Il charge PRODUCT.md, DESIGN.md, le brief de surface correspondant, et les directives de plateforme native le cas échéant ; suivez ses directives et ne le relancez pas.
  2. Chargez le playbook de la requête : sa référence de tableau de 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 actuelle avant de modifier. Lorsque l'application ne peut pas être exécutée, commencez par les golden de régression visuelle déjà validées ou les captures d'écran de test ; vérifiez la cible et sa 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 l'orientation, lisez reference/craft-floor.md immédiatement avant toute modification UI, y compris les petites améliorations. Il contient le niveau de qualité minimum, 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 directement le contexte existant du projet. » Lisez ensuite PRODUCT.md et DESIGN.md existants sans inventer un 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 seul ne bloque ni l'un ni l'autre.

Comment concevoir

  • Le brief l'emporte. Honorez les esthétiques, époques, matériaux, polices et palettes imposé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é actuelle, 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é produit, le contenu, la fonction, les affordances natives et les contraintes, mais traite l'ancienne apparence comme une preuve et une 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 rejetée.
  • Les symboles chargés restent en dehors de la décoration. Le monde d'un sujet n'autorise pas l'utilisation d'emblèmes liés au militarisme, à la suprématie ou aux mouvements haineux comme motifs, badges ou ornements, tels que les rayons du drapeau 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 ce 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 actuel.

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, tarifs. Gagnez l'attention et l'action. Utilisez des images réelles lorsque le brief le demande ; 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 le scénario d'utilisation réel 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 faites de l'expérience de lecture une raison de rester.
  • Expérience : le visiteur est à l'intérieur de l'œuvre elle-même. Portfolios, galeries, vitrines. Laissez l'artefact mener dès la première fenêtre ; l'interface s'efface.

Choisissez le mode à partir de la surface demandée, pas du produit, et persistez-le uniquement dans le brief de cette surface. La page d'atterrissage d'un outil reste Persuader ; la 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 les modes Opérer et Lire.

Commandes

CommandeCatégorieDescriptionRéférence
craft [fonction]ConstructionAlias déprécié pour une demande de nouveau travail ordinairereference/craft.md
shape [fonction]ConstructionPlanifier l'UX/UI avant d'écrire du codereference/shape.md
initConstructionCapturer le contexte produit durable dans PRODUCT.mdreference/init.md
documentConstructionGénérer DESIGN.md à partir du code existant du projetreference/document.md
extract [cible]ConstructionExtraire des 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]ÉvaluationContrôles 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 fadesreference/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 particuliersreference/harden.md
onboard [cible]AffinementConcevoir les flux de première utilisation, les états vides, l'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 à différents appareils et tailles d'écranreference/adapt.md · natif : reference/adapt.native.md
optimize [cible]CorrectionDiagnostiquer et corriger les performances UIreference/optimize.md
liveItérationMode de 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

Acheminement :

  • Aucun argument : lisez routing.md et présentez son menu contextuel ; n'exécutez jamais automatiquement une commande.
  • 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 flux de travail ou la sélection de commande : lisez Questions de flux de travail.
  • Sinon : traitez la demande comme un travail de design général. L'absence de PRODUCT.md achemine vers une nouvelle surface ou un monde de remplacement via init, puis new-work ; un affinement étroit du code existant se poursuit sur l'implémentation actuelle comme le dirige impeccable context, en proposant init par la suite plutôt qu'en bloquant 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 relancer impeccable context ; init charge lui-même la référence de la plateforme native lorsque la plateforme qu'il a enregistrée est ios, android ou adaptive.

Épingler / Désépingler : .claude/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 des 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, configuration, 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 Setup est le sous-ensemble économique du même rapport ; agissez dessus selon ses propres instructions plutôt que d'exécuter doctor sans qu'on vous le demande.

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

Individual skills in this repo

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

williamsnieves/landing-factory

Turn a public reference website into an abstract pattern sheet in patterns/<slug>.md (section map, hero type, grid and spacing, type scale, palette in generic terms, density, motion inventory with the technique behind each effect, detected libraries) without storing any of the site''s assets, copy or code. Use when the user runs /analyze-reference <url> or asks to analyze, study, break down or extract patterns from an inspiration or reference site for a landing. Checks robots.txt and text-and-data-mining reservations first and aborts if access is disallowed. Not for cloning or rebuilding a site.

williamsnieves/landing-factory

tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of 247 curated gallery sites (One Page Love, Awwwards Sites of the Day). Deals researched directions (idea, composition, type, palette, photographs, section blueprints) from a library, enforces a strict no-slop house style with a real-browser inspector, and runs a look-and-fix loop on screenshots. Use this whenever you build, design, redesign, restyle, polish or review a landing page, marketing site, portfolio, product page, one-pager, hero or any public-facing web page, in any stack (HTML/CSS, React, Next.js, Vue, Svelte, Astro, Tailwind) — also when the user says a page looks generic, templated, "AI-made", sloppy, or asks to make it look designed, premium, award-level or less like every other site. Not for dashboards or app screens.

williamsnieves/landing-factory

Implement tasks from an OpenSpec change. Use when the user wants to start implementing, continue implementation, or work through tasks. Also use when the user says "openspec apply", "opsx apply", or "openspec implement".

williamsnieves/landing-factory

Archive a completed OpenSpec change in the experimental workflow. Use when the user wants to finalize and archive a change after implementation is complete. Also use when the user says "openspec archive" or "opsx archive".

Skills associés