Tout ce qu'on a sous le capot, et à quoi ça sert.

Chef d'orchestre de l'audit avant livraison d'un site/CRM : lance en parallèle controle-technique (bugs), directeur-artistique (esthétique), optimiseur-perf (vitesse), expert-seo (référencement),

Chasseur de bugs : teste un site ou une app en ligne dans un vrai navigateur et rend un rapport exhaustif de ce qui est CASSÉ (erreurs console, liens morts, formulaires, requêtes en échec, incohérences de données).

Juge l'esthétique d'un site en ligne : beauté, lisibilité, hiérarchie visuelle, harmonie, espacements, élégance responsive sur toutes les tailles d'écran. Il pilote un vrai navigateur, note chaque page et rend des recommandations design.

Architecte du CMS Payload v3, colonne vertébrale des sites, CRM et apps d'Andrea : conçoit et construit collections, champs, relations, accès par rôle, hooks, séparation multi-tenant, et relie le front Astro à l'API Payload. Connaît le VPS Hetzner partagé.

Audit SEO complet + corrections sûres d'un site : lit les VRAIES données Search Console (service account d'Andrea), crawle le site, inspecte le code Astro, corrige directement ce qui est sans risque (titles, meta, Open Graph, JSON-LD, alt, sitemap, canonical,

Transforme un nouveau projet client (notes en vrac, appel, ancien site à refondre, doc, parfois juste un nom + secteur) en BRIEF carré et vérifiable, sauvé dans ~/CC/projets/<client>/00-BRIEF.md.

Le chasseur d'inspiration de la brigade site : avant de dessiner, il scanne les galeries (Awwwards, SiteInspire, Godly, Httpster…), repère les tendances du moment, décortique 3-5 sites de référence (secteur + esthétique),

Propriétaire de la performance d'un site : mesure (Lighthouse, Core Web Vitals, poids des pages, images lourdes, render-blocking, polices, vidéos) puis OPTIMISE concrètement (WebP/AVIF + resize via sharp, lazy-load, preload polices,

Conçoit la Direction Artistique d'un site APRÈS le brief : extrait 3 angles émotionnels incompatibles et produit 3 directions VRAIMENT distinctes — palette accessible (WCAG), duo de polices, échelle typo / espacements, tokens, traitement photo

L'« employé web développeur » d'Andrea : construit un site, CRM ou app de A à Z à partir d'un brief + une direction artistique — design system, architecture, pages et composants Astro, modèle de données Payload (via expert-payload),

Le chef d'orchestre de la création visuelle, l'« employé graphiste » d'Andrea : un seul agent à lancer, il dirige toute l'équipe visuelle. Il lit ~/CC/clients/<client>/création visuelle/ (brief, charte, logo), cadre, propose plusieurs concepts,

Le contrôle qualité d'un visuel fini (affiche, flyer, post) avant livraison : lisibilité, contraste texte/fond (WCAG), respect de la charte client (couleurs, polices, logo), fautes, exactitude des infos vs le brief (rien d'inventé), dimensions/format,

Génère les images IA de l'agence par LOTS DE 3, dans le bon ratio, rangées dans le dossier client. Moteur PAR DÉFAUT : Higgsfield (CLI higgsfield, modèle nano_banana_pro — meilleure qualité, visages réels préservés par multi-référence).

Le cœur de la création visuelle, l'anti-Canva : compose le visuel final (affiche, flyer, post) en vrai HTML/CSS — texte + image générée + logo — avec la charte client, la hiérarchie typographique et les règles print,

Le sous-titreur de l'agence : reprend un SRT automatique (DaVinci Resolve) et le rend PROPRE — corrige les fautes de transcription (noms propres, marques, chiffres), repose la ponctuation, et REDÉCOUPE les apparitions au sens et à la respiration,

« Mon employé publicitaire » : l'agent CHEF qui orchestre TOUTES les publicités d'Andrea (tous clients, toutes plateformes). Il cadre la demande, route vers la brigade de la bonne plateforme (aujourd'hui Meta : meta-regisseur, gardien-meta,

Le gardien des publicités Meta : surveille la santé du dispositif Meta Ads (pixels + CAPI + Event Match Quality, livraison des campagnes, dépense, campagnes rejetées, budget qui file) sur le compte pub RL, extensible aux autres clients.

Le régisseur des campagnes Meta (Facebook/Instagram) : expert de la structure Campagne → Ad Set → Ad, placements et Advantage+, objectifs, ciblage (custom / lookalike / retargeting pixel), budgets CBO vs ABO, pixel + CAPI, formats créa.

Le modérateur des commentaires sous les publicités Facebook et Instagram des clients : LIT chaque commentaire, le COMPREND, et décide — supprimer ce qui nuit (hostilité, moquerie, menace, hors-sujet),

L'optimiseur des publicités Meta : LIT les insights (dépense, CPL, CTR, CPM, fréquence, conversions, ROAS) par compte / campagne / adset / ad, DIAGNOSTIQUE (CPL qui monte, CTR qui chute, audience saturée,

Le gardien du tunnel de leads RL Immobilier : vérifie que tout roule (landing pages, CMS, formulaires), RATTRAPE les leads en échec restés en KV (zéro perte) et RÉPARE lui-même ce qui a calé ; n'alerte Andrea par mail pro QUE si une intervention humaine est…

Le sysadmin / veilleur technique de l'agence, en routine horaire (LaunchAgent com.guddelmoni.informaticien) : vérifie que TOUT ROULE — productions autonomes en cours (flyers de nuit, boucles /loop, crons), services (VPS Hetzner, sites Cloudflare,

L'informaticien MÉTIER du CRM de l'agence (crm.agenceguddelmoni.com), propriétaire de sa santé : app Next.js/Prisma sur le VPS, base de données, ~14 agents internes (synchro Meta, fraîcheur du feed, quotas, santé données…), intégration Meta Business,

Le spécialiste base de données de la brigade ops : veille sur les bases du CRM (SQLite prod /opt/crm-data/prod.db, dev, future bascule PostgreSQL) — intégrité, sauvegardes, croissance, requêtes de contrôle, migrations Prisma SÛRES avec backup préalable.

Le spécialiste déploiement de la brigade ops : pousse une mise à jour du CRM sur le VPS Hetzner proprement — sync du code, deps, migration Prisma (backup via ops-base-de-donnees avant), build, redémarrage du service,

L'éclaireur de la brigade ops, en LECTURE SEULE : tour de ronde complet de l'infra (VPS Hetzner, sites Cloudflare/Pages, monitors UptimeRobot, agents internes du CRM, disque, derniers logs) et BILAN 🟢/🟠/🔴 avec cause racine probable et action à faire.

Le bras armé self-heal de la brigade ops : RÉPARE / RELANCE ce qui a calé — service systemd mort, agent CRM gelé, cron arrêté, synchro Meta en échec, Chrome zombie + SingletonLock orphelin, verrou flock bloqué, disque qui se remplit.

L'agent de sécurité qui AUDITE un skill, plugin, package, MCP ou dépendance AVANT installation : lit le code source, vérifie la provenance (auteur, dépôt, popularité, historique), traque les comportements à risque (appels réseau injustifiés, exfiltration,

Trie et comprend la boîte mail pro contact@agenceguddelmoni.com : classement par libellé, ajout ou correction d'un client, explication d'un mail mal classé, état du tri. Visage conversationnel du programme agent-mail.py qui tourne 24h/24.

Le conseiller bancaire US de GAM Communication LLC (LLC Wyoming d'Andrea) : compare les options réelles pour non-résident (Mercury, Wise Business, Relay, Brex…), recommande, prépare le dossier d'ouverture (KYC, documents),

L'expert comptable, social, paie/DSN et fiscal de la SASU Agence Guddelmoni : paie et DSN (URSSAF, net-entreprises), compta (TVA, IS, liasse, écritures, factures/devis), fiscalité (régimes, échéances, obligations), droit social (contrats, apprentissage,

L'expert-comptable de GAM Communication LLC (LLC Wyoming d'Andrea) : tient les livres en dollars dans 05_Comptabilite/ — registre recettes/dépenses, factures émises par la LLC (format US), rapprochement bancaire, Capital Account du membre,

Le conseiller fiscal international de GAM Communication LLC (LLC Wyoming, Andrea résident fiscal français). Deux horloges — US : Form 5472 + pro forma 1120 (pénalité 25 000 $), disregarded entity, ECI, FinCEN BOI, annual report Wyoming ; France : 155 A,

Le secrétaire juridique (corporate) de GAM Communication LLC (LLC Wyoming d'Andrea) : documents constitutifs (Articles of Organization, Operating Agreement, Certificate of Incumbency), résolutions écrites quand une décision formelle est requise,

Stratège créatif : prend une idée brute (SaaS, site, app, business, projet client) et la décline en variations argumentées sur tous les axes — naming, branding, DA, design system, stack, business model, pricing, copywriting, growth, UX, roadmap MVP

Le « répondeur » d'Andrea : tranche À SA PLACE une décision secondaire et non irréversible quand il est absent ou n'a pas répondu depuis ~5 min, d'après ses préférences connues (CLAUDE.md global, mémoire, contexte projet).

Couteau suisse du code, optimisé pour modifier vite (1 à 3 fichiers).

Exécute une action de code uniquement si une vérification préalable est OK (refactor conditionnel sûr).

Le rédacteur Notion de l'agence : écrit et met en forme les documents de travail d'Andrea dans Notion (scripts de tournage, plans d'idées, dossiers de shooting, pages clients) selon la charte ~/CC/ressources/skills-brief/charte-notion-andrea.md (titres 📸,

Refactor de propreté : applique les bonnes pratiques sur le code récemment modifié.

Le coach d'appel de vente d'offres chères (« high ticket ») : lit une transcription (fichier, texte collé ou Fathom), note l'appel en 8 étapes (cadre, découverte, qualification, présentation, objections, prix, closing,

Conçoit le plan d'implémentation d'une feature (fichiers, composants, étapes) sans coder.

Inspecteur qualité : relit le code pour repérer bugs, style et problèmes avant commit/PR.

Allège et clarifie le code récemment écrit, sans changer ce qu'il fait.

Le cobaye. Il DÉROULE EN ENTIER une chaîne de commande fraîchement écrite sur un cas inventé, en jouant les deux rôles — celui qui mène, et la personne qui répond mal, à côté, et change d'avis tard. Il ne corrige rien : il note ce qui casse et continue.

Le débutant. Il prend un produit fini et essaie de s'en servir SANS RIEN Y CONNAÎTRE : il suit la notice à la lettre et s'arrête à la première phrase incompréhensible ou instruction impossible à suivre, en disant où il aurait abandonné.

L'espion. Il lit un produit fini pour deviner QUI l'a écrit, avec quels outils, pour quels clients, depuis quelle machine : il traque les fuites douces (nom de livrable dans une autre langue, exemples toujours du même métier, anecdote trop précise,

L'inventoriste. Il liste ce qui est DÉJÀ installé sur la machine (commandes, agents, savoir-faire, outils) et dit ce qu'il ne faut pas recréer, classé en « fait déjà le travail » / « en fait la moitié » / « n'existe nulle part ».

Le mécanicien. Il ne lit pas le produit, il le VÉRIFIE : comptes annoncés contre fichiers réels, chaque renvoi « à l'étape N », chaque agent livré contre chaque agent appelé, chaque chemin cité contre ce qui existe. Des faits chiffrés, jamais une opinion.

Le constructeur du système CRM : transforme un cahier des charges validé en CRM qui fonctionne (fiches, liste, saisie, statuts, filtres, accès par rôle, puis automatismes). Étapes 10 et 12 de la commande /crm.

Le contrôleur du système CRM : l'essaie comme le client, rejoue les parcours du quotidien, vérifie le cahier des charges promesse par promesse, essaie de casser (champs vides, textes longs, double clic),

Le déménageur du système CRM : fait entrer les vraies données du client dans le nouveau CRM sans rien perdre. Il lit l'existant (Excel, exports, ancien logiciel), repère les doublons sans les fusionner seul, remet d'aplomb le mécanique (dates, téléphones,

L'éclaireur du système CRM : rapporte de la matière, jamais une opinion en l'air. Deux missions — fouiller l'existant du client (ancien outil, fichiers, exports,

Le gardien du système CRM en service : vérifie qu'il répond, que les données arrivent, que les sauvegardes existent ET ne sont pas vides, que les envois automatiques partent. RÉPARE seul ce qui se répare seul et n'écrit à un humain QUE si nécessaire.

Recherche web ultra-rapide via Exa uniquement, réponse courte : un fait, une info à jour, le contenu d'une URL. S'arrête dès que la réponse est trouvée.

Cartographie le code du projet pour préparer une feature (fichiers, architecture).

Va chercher la doc technique à jour d'une librairie (via Context7).

Éclaireur express : trouve vite une info dans le code, la doc ou le web.

Le gardien d'un site livré : vérifie qu'il répond, que les pages importantes se chargent vraiment, que le certificat HTTPS n'expire pas, que les formulaires arrivent à destination, que les sauvegardes existent ET ne sont pas vides.

Développeur exécutant : implémente une tâche précise dans son périmètre.

Fait passer un site de « ça marche sur mon ordinateur » à « une adresse qui répond » : s'adapte à l'hébergeur (ou en propose un gratuit), met en ligne, branche le domaine et les DNS, obtient le HTTPS, pose les redirections de l'ancien site,

Le monteur de la brigade visuelle : produit les livrables ANIMÉS — stories animées, reels, créas vidéo pour campagnes Meta, vidéos de présentation d'un site livré, title cards, overlays transparents.

Le rédacteur du site : écrit tous les textes des pages (accroche, promesse, preuves, réponses aux objections, appels à l'action) à partir de faits FOURNIS, dans le ton du client.

Le caissier du système SaaS : installe la caisse — abonnements, période d'essai, paiement, changement de formule, résiliation, espace client (carte, factures) et webhooks du prestataire (paiement passé / échoué).

Le découpeur du système SaaS : transforme le document produit et l'architecture en tâches exécutables — une par fichier, dans l'ordre, une à trois heures chacune, avec ce qu'elle livre, comment on sait qu'elle est finie et ce qu'elle attend des autres.

L'éclaireur du système SaaS : rapporte des faits vérifiés, sourcés et datés — concurrents réels et leurs prix, noms de domaine libres, tarifs du secteur, endroits où se faire connaître. Étapes 2, 4, 7 et 15 de /saas.

Le juriste du système SaaS : rédige les documents obligatoires d'un produit par abonnement — CGU, CGV, politique de confidentialité, mentions légales, détail des traceurs — à partir de faits fournis, jamais inventés, en laissant visible ce qui manque.

Le setter d'Andrea : prépare la prise de rendez-vous par message privé (Instagram, LinkedIn, TikTok) à partir d'un prospect ou d'une conversation collée.

Tient l'entonnoir de vente high ticket de Scale With AI semaine par semaine : conversations, rendez-vous pris et tenus, ventes, signé (contracté), encaissé (collecté), commissions.

Valide qu'une feature marche vraiment en lançant l'app et en la testant dans le navigateur, contre la demande initiale de l'utilisateur. Utilisé par APEX -v.

Recherche internet simple et rapide.

Agent polyvalent à tout faire, pour déléguer en parallèle une tâche non triviale : exploration de code, questions-réponses, recherche, analyse.

Complete SaaS ideation to implementation workflow - from idea discovery to task breakdown

Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems.

Perform formal WCAG 2.2 A/AA conformance audits and assign Pass/Fail/NT/NA to every success criterion with evidence. Use reviewing-a11y instead for issue discovery and improvement feedback.

Bannières pour réseaux, pubs, héros de site et print : plusieurs directions artistiques avec visuels générés par IA.

Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.

Skill design tout-en-un : identité de marque, tokens, logos (55 styles), programme d'identité complet, présentations HTML, bannières, icônes.

Architecture de tokens en 3 couches (primitifs → sémantiques → composants), variables CSS, échelles d'espacement et de typo, specs de composants.

Présentations HTML stratégiques : graphiques Chart.js, tokens de design, mises en page responsives, formules de copywriting.

Interfaces belles et accessibles : composants shadcn/ui (Radix + Tailwind), styles utilitaires Tailwind.

Write or edit website copy, blog content, and editorial pieces with attention to voice, structure, and goal. Use this skill whenever the user wants to write an article, draft website copy,

Move content between platforms, domains, or URL structures while preserving SEO equity, user bookmarks, and integrations. Use this skill when planning a CMS migration, replatforming, consolidating sites, changing URL structures,

Dessiner un outil de travail qu'on ouvre tous les jours — CRM, back-office, tableau de bord, outil interne. Hiérarchie de l'information, densité, couleurs de statuts, mode sombre, ce qu'on voit dans la première seconde.

Vérifier un outil métier avant de le livrer — la grille de contrôle qui trouve les défauts avant le client. Couvre les promesses du cahier des charges, la vitesse au volume réel, le téléphone, l'étanchéité des accès par rôle,

Concevoir la saisie d'un outil métier — formulaires, création et modification de fiches, messages d'erreur, sauvegarde. Un CRM qu'on remplit à contrecœur n'est pas rempli, et un CRM à moitié rempli ne sert à rien.

Construire la liste de données d'un outil métier — l'écran où l'utilisateur passe 90 % de son temps. Colonnes, tri, filtres, recherche, actions groupées, pagination, et rester lisible et rapide à des milliers de lignes.

Concevoir des visualisations de données claires.

Use this skill whenever the user wants to create, read, edit, or manipulate Word documents (.docx files) or Word templates (.dotx files).

Plan, manage, and optimize a domain portfolio. Use this skill for DNS architecture decisions, redirect strategies, registrar choice, parking unused domains, multi-site setups, and domain consolidation or split planning.

Pre-publish QA framework for content. Brief adherence, voice consistency, fact accuracy, structure and clarity, AI-content audit, SEO and AEO compliance, internal linking and schema validation, QA at scale via sampling,

Step through a task as a first-time user and identify where intent, discoverability, feedback, or interpretation will break down.

Build a conceptual model for a prototype or feature: actors, objects, actions, states, rules, and transitions.

Audit a prototype for cross-screen consistency in navigation, actions, states, patterns, and interaction rules.

Audit all failure paths, edge cases, and non-happy-path states -- empty states, validation errors, permission failures, loading, undo, and recovery.

Méthode HCI « mental-model-checker » (pack 45ck/hci-review-skill, audité le 2026-09-10) — vérifier la logique d'un écran ou d'un parcours : objets, états, vocabulaire,

Define the state machines and lifecycles for all key entities in the system -- states, transitions, invalid transitions, and user-visible cues per state.

> Mandatory entry point: read this first for any request to make, create, edit, animate, or render a video, animation, or motion graphic, including a promo, explainer, captioned clip, title card, overlay,

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js,

> Use when audio already placed in a HyperFrames composition needs to be mixed: fade-in/fade-out, crossfade, track gain or volume, volume automation, ducking, a music bed that fights a voiceover (voiceover carve),

> Use the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, cloudrun, feedback, lambda,

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data-* timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback,

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns,

> Use when a HyperFrames composition needs a punch-in, punch-out, zoom, reframe, Ken Burns treatment, camera move, visual match/whip handoff, or other seek-safe 2D/3D keyframes; also for GSAP, CSS keyframes, Anime.js, WAAPI,

Install, discover, and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add or hyperframes catalog, installing one item or every block matching a tag,

Générer des idées de vidéos pour Andrea Guddelmoni (réseaux et YouTube, IA + entrepreneuriat) qui lui ressemblent du premier coup — hook clair, titre naturel et puissant, appel à l'action, preuve réelle, angle de tournage.

Génère des références visuelles haut de gamme pour la direction artistique d'un site — une image horizontale par section.

Plan and run a multi-language or multi-region site. Use this skill when adding new locales, choosing URL structure for languages (subfolders vs subdomains vs ccTLDs), implementing hreflang, planning translation workflow,

Write landing page copy with attention to the hero, value proposition, social proof, objection handling, and conversion-focused CTAs.

Agent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + ledger record (one verb,

Spécifier une micro-interaction dans le détail.

Design and run a monitoring system for a website or web app. Use this skill when setting up uptime checks, defining SLOs, configuring error tracking, choosing what to alert on, designing on-call rotations,

Cocher d'un point vert dans le Finder les photos d'un client déjà parues sur son compte Instagram, pour voir d'un coup d'œil ce qui reste disponible. Fonctionne pour N'IMPORTE QUEL client de l'agence, dans n'importe quel projet.

Va chercher de l'inspiration sur Pinterest en direct (images + lien de l'épingle + texte) et livre une planche HTML dans le dossier du client — sans compte, sans navigateur, via pinterest-dl.

Assess organizational accessibility maturity and create a long-term improvement plan with a roadmap, KPIs, and stakeholder materials. Use planning-wcag-audit for the execution plan of a specific site's WCAG audit.

Plan WCAG audits for a specific site using WAIC test guidelines, including scope, page selection, environment, and execution plan. Use planning-a11y-improvement for organization-wide, long-term improvement planning.

Use this skill any time a .pptx or .potx file is involved in any way — as input, output, or both. This includes: creating slide decks, pitch decks, or presentations; reading, parsing,

Choisir le bon niveau de prototype selon la question posée.

React Three Fiber (R3F) and Poimandres ecosystem best practices. Use when writing, reviewing, or optimizing R3F code. Triggers on tasks involving @react-three/fiber, @react-three/drei, zustand, @react-three/postprocessing,

File de tâches pour agent autonome (« Ralph ») : ajouter, lister, retirer des tâches à exécuter en continu.

Review accessibility of web pages, code implementations, design mockups, and specifications, then report severity-ranked issues and fixes. Use auditing-wcag instead for formal conformance decisions across all success criteria.

Remove AI writing patterns from prose. Use when drafting, editing, or reviewing text to eliminate predictable AI tells.

Three.js performance optimization and best practices guidelines. Use when writing, reviewing, or optimizing Three.js code. Triggers on tasks involving 3D scenes, WebGL/WebGPU rendering, geometries, materials, textures, lighting,

Three.js animation - keyframe animation, skeletal animation, morph targets, animation mixing. Use when animating objects, playing GLTF animations, creating procedural motion, or blending animations.

Three.js scene setup, cameras, renderer, Object3D hierarchy, coordinate systems. Use when setting up 3D scenes, creating cameras, configuring renderers, managing object hierarchies, or working with transforms.

Three.js geometry creation - built-in shapes, BufferGeometry, custom geometry, instancing. Use when creating 3D shapes, working with vertices, building custom meshes, or optimizing with instanced rendering.

Three.js interaction - raycasting, controls, mouse/touch input, object selection. Use when handling user input, implementing click detection, adding camera controls, or creating interactive 3D experiences.

Three.js lighting - light types, shadows, environment lighting. Use when adding lights, configuring shadows, setting up IBL, or optimizing lighting performance.

Three.js asset loading - GLTF, textures, images, models, async patterns. Use when loading 3D models, textures, HDR environments, or managing loading progress.

Three.js materials - PBR, basic, phong, shader materials, material properties. Use when styling meshes, working with textures, creating custom shaders, or optimizing material performance.

Three.js post-processing - EffectComposer, bloom, DOF, screen effects. Use when adding visual effects, color grading, blur, glow, or creating custom screen-space shaders.

Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.

Three.js textures - texture types, UV mapping, environment maps, texture settings. Use when working with images, UV coordinates, cubemaps, HDR environments, or texture optimization.

Produire une voix off IA en français (ou autre langue) avec ElevenLabs — narration de VSL, story, reel, publicité, vidéo de présentation, doublage. Livre un MP3 + l'alignement mot à mot (donc des sous-titres déjà calés).

3D sur un site web — décider s'il en faut, et la produire proprement si oui. Couvre l'arbitrage (image/vidéo qui simule la 3D vs scène Three.js vs export no-code Spline), la scène Three.js minimale en JS natif (compatible Astro,

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

Écrire des règles « hookify » : la syntaxe et les patterns pour créer des garde-fous automatiques.

Use this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .xltx, .csv, or .tsv file (e.g., adding columns,

Audit d'accessibilité complet avec niveaux de gravité et corrections.

Plan de test d'accessibilité, y compris avec les technologies d'assistance.

Le principe selon lequel une interface soignée est perçue comme plus facile à utiliser — même à fonctionnement égal.

Les principes d'animation appliqués à une interface, pour que le mouvement ait un sens.

Réécrit les textes d'interface flous : messages d'erreur, libellés, instructions.

Construire une palette complète : couleurs de base, rôles sémantiques, contrastes accessibles.

Spécifier un composant : propriétés, états, variantes, accessibilité.

Critique les affordances d'un écran : ce qui a l'air cliquable, la visibilité des états, la clarté des boutons d'action.

Vérifie la cohérence de marque d'un écran par rapport aux fichiers de référence (ambiance, voix, tokens).

Critique l'usage des couleurs d'un écran : contrastes, cohérence de palette, sens des couleurs, accessibilité.

Critique la composition d'un écran : équilibre, respirations, rythme, principes de Gestalt.

Critique la densité d'information : charge cognitive, priorisation du contenu, sens de lecture, divulgation progressive.

Critique la typographie d'un écran : échelle, lisibilité, cohérence, respect des tokens.

Critique la hiérarchie visuelle : point d'entrée, parcours de l'œil, répartition des poids, mises en avant.

Concevoir un mode sombre correct : ce n'est pas juste inverser les couleurs.

Ajoute les moments de joie et de personnalité qui rendent une interface mémorable.

Rédiger un brief de design complet : problème, contraintes, public, critères de réussite.

Animer une critique de design structurée.

Recenser et hiérarchiser les incohérences accumulées dans un produit.

Expliquer la contribution du design en termes que les décideurs comprennent.

Défendre la qualité, le périmètre et le temps de design face aux autres métiers.

Définir les principes qui trancheront les arbitrages futurs.

La liste de contrôle pour vérifier qu'un design a bien été implémenté.

Écrire la justification d'un choix de design, reliée aux besoins réels.

Mettre en place les étapes de validation d'un design.

Planifier et animer un sprint de design.

Faire adopter un design système par les équipes.

Comment un design système évolue : contributions, versions, dépréciations.

Anti-générique pour les pages d'accueil et portfolios : lit le brief, déduit la bonne direction, et produit une interface qui ne ressemble pas à un modèle.

Les jetons de design : les valeurs nommées (couleurs, espacements) qui rendent un design système exécutable.

Vérifier que les jetons de design sont bien utilisés partout.

Prévenir, détecter et rattraper les erreurs côté utilisateur.

Les retours système : confirmations, statuts, notifications.

Concevoir des formulaires qui n'énervent personne et qui vont au bout.

Interfaces distinctives, faites pour sortir du lot.

Les gestes tactiles.

Le document de passation du design vers le développement.

Construire un jeu d'icônes cohérent.

Définir un style d'illustration.

L'organisation de l'information : ce qui va où, et pourquoi.

La lentille émotionnelle : est-ce que cet écran a été pensé par un humain ? Pour les interfaces techniquement justes mais plates.

La grille de mise en page.

Les états de chargement.

Concevoir pour plusieurs langues.

Les micro-détails d'exécution avec des valeurs exactes : rayons concentriques, chiffres alignés, échelle au clic, cibles tactiles de 44 px. Ce qui sépare le correct de l'excellent.

> Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI.

> A short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup, lower-third / callout / social overlay, animated map (highlight regions,

Le système d'animation d'un produit : durées, courbes, cohérence.

Les schémas de navigation.

La première expérience d'un nouvel utilisateur.

La bibliothèque de motifs réutilisables.

Cartes de visite, flyers, invitations, packaging, affiches — tout ce qui est physique.

La longueur de ligne idéale pour que le texte se lise sans fatigue.

Adapter proprement une interface à toutes les tailles d'écran.

L'expérience de recherche dans un produit.

L'échelle d'espacement qui donne son rythme à une page.

Modéliser les états d'un composant ou d'un parcours.

Le système de thèmes (clair, sombre, marques multiples).

Construire une échelle de tailles de texte cohérente.

L'écriture des textes d'interface.

Organiser ce que l'œil voit en premier, deuxième, troisième.

Spécifier une maquette fil de fer.

Optimiser pour être cité par les IA (ChatGPT, Perplexity, aperçus Google). Le référencement de la décennie qui vient — directement pertinent pour le Projet A.

Boîte à outils de référencement. Passe par l'agent expert-seo plutôt que par les skills en direct.

Audit de référencement complet d'un site, jusqu'à 500 pages, avec délégation à des spécialistes.

Analyse du profil de backlinks : domaines référents, textes d'ancre, liens toxiques, écarts avec les concurrents.

Regroupe les mots-clés en grappes de contenus d'après les vraies pages de résultats Google (pas la simple ressemblance des mots), et dessine l'architecture du site.

Génère des pages comparatives optimisées SEO : « X vs Y », « alternatives à X », tableaux de fonctionnalités, schema.

Analyse la qualité du contenu et les signaux E-E-A-T, avec la préparation aux citations par les IA.

> Live SEO data via DataForSEO MCP server. SERP analysis (Google, Bing, Yahoo, YouTube, Google Images), keyword research (volume, difficulty, intent, trends), backlink profiles, on-page analysis (Lighthouse, content parsing),

Surveille la dérive SEO : prend une photo de référence des éléments critiques, détecte les changements et les régressions dans le temps.

SEO e-commerce : visibilité Google Shopping, veille Amazon, schema produit, prix des concurrents, mots-clés marketplace.

Méthode FLOW : un SEO guidé par les preuves, en boucle Trouver → Exploiter → Optimiser → Gagner (41 prompts prêts).

Optimise le contenu pour les réponses des IA (AI Overviews de Google, ChatGPT, Perplexity) — le « SEO des moteurs génératifs ».

Branche les API officielles Google : Search Console, PageSpeed, données de terrain CrUX, API d'indexation, trafic organique GA4.

Audit et génération des balises hreflang (sites multilingues) : détecte les erreurs classiques, valide les codes langue/région.

AI image generation for SEO assets: OG/social preview images, blog hero images, schema images, product photography, infographics. Powered by Gemini via nanobanana-mcp. Requires banana extension installed.

Optimisation des images pour le SEO et la vitesse : textes alt, poids, formats, responsive, lazy loading.

SEO local : fiche Google Business, cohérence nom-adresse-téléphone, citations, avis, schema local, pages par établissement.

Intelligence cartographique pour le SEO local : positions en grille géographique, audit de fiche Google Business, avis Google/Tripadvisor/Trustpilot.

Analyse approfondie du référencement d'une seule page.

Plan SEO stratégique pour un site neuf ou existant : modèles par secteur, analyse concurrentielle, stratégie de contenu, feuille de route.

SEO programmatique : des pages générées en masse depuis des données (gabarits, URLs, maillage interne automatisé, garde-fous contre le contenu pauvre).

Détecte, valide et génère les données structurées Schema.org (JSON-LD) pour viser les résultats enrichis de Google.

Analyser ou générer le plan de site XML.

Lit les pages de résultats Google « à l'envers » pour détecter les décalages d'intention et noter les pages selon plusieurs profils d'utilisateurs.

Audit SEO technique en 9 catégories : crawl, indexation, sécurité, structure d'URL, mobile, Core Web Vitals, données structurées, rendu JavaScript.

Créer un agent : description, déclencheurs, outils, prompt système.

Ajouter une interface interactive à un serveur MCP.

Construire un serveur MCP de zéro.

Empaqueter un serveur MCP pour le distribuer.

Analyse un projet et recommande les automatisations à mettre en place.

Auditer et améliorer les fichiers CLAUDE.md existants.

Créer et optimiser les fichiers de mémoire CLAUDE.md.

Configure les environnements locaux de l'app Codex (worktrees, scripts d'installation et de nettoyage). Hors stack habituelle.

Créer une commande slash.

Exemple de commande fourni avec Claude Code — sert de modèle, aucune utilité directe.

Exemple de skill fourni comme modèle pour en créer de nouveaux — aucune utilité directe.

Trouver et installer un skill qui existe déjà.

Créer un hook : du code qui se déclenche tout seul à un moment précis. C'est ce qui rend un système autonome.

Brancher un serveur MCP.

Les réglages d'un plugin.

La structure d'un plugin Claude Code.

Concevoir des prompts efficaces.

Créer un skill. C'est littéralement une des choses qu'on va vendre.

Les bonnes pratiques de développement de skills.

Crée des skills à étapes (comme APEX) : chargement progressif, gestion d'état, décisions interactives.

Créer un sous-agent.

Organiser le travail en équipe.

Méthode d'implémentation structurée en 4 temps : analyser, planifier, exécuter, vérifier. Avec agents en parallèle et auto-contrôle. Pour les fonctionnalités sérieuses.

Boucle autonome jusqu'à ce que l'intégration continue repasse au vert.

Passe de propreté sur le code récemment écrit, selon les bonnes pratiques.

Crée un commit git avec un message propre.

Commit + push, puis surveille le déploiement (Vercel/GitHub Actions) jusqu'au vert — corrige et réessaie tout seul si ça casse.

Relecture par consensus : 3 agents examinent en parallèle avec des angles différents, et on ne corrige que là où au moins 2 sont d'accord. Évite les fausses alertes.

Crée et pousse une pull request avec titre et description générés.

Débogage systématique en 5 étapes : analyser, localiser, proposer, corriger, vérifier.

Exploration rapide du code, de la documentation et du web pour se faire une idée avant d'agir.

Corrige d'un coup toutes les erreurs de typage et de style, en parallèle.

Corrige l'orthographe et la grammaire d'un ou plusieurs fichiers, sans toucher à la mise en forme.

Récupère les commentaires de relecture d'une pull request et applique les corrections demandées.

Résolution de problèmes de mathématiques de haut niveau.

Fusionne une branche.

L'inverse d'APEX : implémentation ultra-rapide, sans plan intermédiaire. Explorer, coder, tester.

Bac à sable pour tester une idée de code.

Refonte de code à travers plusieurs fichiers, en parallèle.

Relecture de code avant livraison.

Écrire les scénarios de test.

Mode réflexion longue. À sortir pour les décisions structurantes.

Définit la stratégie de branches et de versions d'un projet.

Regrouper des données qualitatives en thèmes pour en tirer des enseignements.

Analyser un tri par cartes pour construire l'arborescence.

Test de premier clic, pour évaluer une navigation.

Analyse comparative des concurrents.

Étude par journal de bord, pour observer un usage dans la durée.

Carte d'empathie en 4 cases : dit, pense, fait, ressent.

La carte globale de tous les points de contact.

Écrire un guide d'entretien utilisateur.

La méthode « quel travail l'utilisateur cherche-t-il à faire ? » — souvent plus juste qu'un persona.

La carte du parcours client, étape par étape, avec les émotions.

Cadre pour hiérarchiser les opportunités.

Organiser et retrouver les enseignements de recherche.

Le plan de service : ce que voit le client, et tout ce qui se passe derrière.

Synthétiser un entretien.

Concevoir un questionnaire qui ne biaise pas les réponses.

Plan de test d'utilisabilité.

Le schéma du parcours utilisateur.

Construire un portrait type d'utilisateur.

Recherche approfondie en 4 phases : ouvrir large, challenger, synthétiser, converger. Pour prendre une décision solide plutôt qu'une intuition.

Penser et parler design dans un contexte business : lire des chiffres, défendre une décision en langage de valeur.

Rédiger une étude de cas de projet, prête pour un portfolio.

Modèles de documentation pour un design système.

Va chercher la documentation officielle et à jour d'une bibliothèque. À préférer à une recherche web.

Convertir une page web en PDF.

Définir les indicateurs qui comptent vraiment.

Les conventions de nommage.

Définir l'objectif directeur d'un produit.

Manipulation de fichiers PDF.

Construire une présentation.

Enregistre une documentation pour la retrouver plus tard.

Aligner les parties prenantes.

Transformer une vidéo en site web.

Méthode anti-tâtonnement pour les bugs visuels : reproduire avec des preuves réelles (capture, styles calculés), vérifier la cascade CSS, choisir le bon périmètre de correction, et changer d'approche après 2 essais ratés au lieu d'insister.

Accès complet et permanent à Gmail, Agenda, Drive, Sheets, Docs et Contacts. Aucune reconnexion, aucun code à deux facteurs.

Le questionnaire de cadrage. Te cuisine une question à la fois, toujours avec ma réponse recommandée, pour verrouiller un projet avant de produire quoi que ce soit. C'est lui qui produit le cahier des charges.

Génération d'images via l'API Gemini, rangées automatiquement dans le bon dossier client ou projet.

Le garde-fou anti-« design d'IA ». 60 règles mesurables qui détectent les tics visuels qui trahissent une interface générée (polices sur-utilisées, dégradés violets, bordures colorées, gris non teinté). Tourne automatiquement à chaque fichier front modifié. 23 sous-commandes pour diriger le rendu au lieu de dire « fais plus joli ».

Opérations d'infrastructure : serveurs, déploiements, services.

Met en place l'arborescence et les fichiers de départ d'un nouveau projet client.

Produit un compte rendu de séance de travail.

Configure le terminal multi-fenêtres.

Audit de sécurité autorisé d'un site que tu possèdes : trouve les failles réelles, les prouve, et rédige un rapport en français. Non destructif.

Seuil de Doherty : en dessous de 400 ms de réponse, l'utilisateur reste dans le flux. Au-dessus, il décroche.

Loi de Fitts : plus une cible est grosse et proche, plus elle est rapide à atteindre. Dicte la taille des boutons.

Évaluation d'une interface selon les grandes heuristiques d'ergonomie.

Loi de Hick : plus il y a de choix, plus la décision est lente. Justifie de réduire les options.

Loi de région commune : une bordure ou un fond partagé crée un groupe, même à distance.

Loi de proximité : ce qui est proche est perçu comme lié. L'espacement fait le sens.

Loi de Miller : on retient environ 7 éléments à la fois. Dicte le découpage de l'information.

Effet Von Restorff : l'élément qui diffère est celui dont on se souvient. La base d'un bon appel à l'action.

Le cœur de GSAP, la bibliothèque d'animation web.

GSAP avec les différents frameworks.

Rendre les animations GSAP fluides.

Les modules complémentaires GSAP.

GSAP avec React.

Les animations liées au défilement : parallaxe, sections épinglées.

Les séquences d'animation GSAP.

Les utilitaires GSAP.

Concevoir un test A/B rigoureux : hypothèse, variantes, indicateurs, taille d'échantillon.

Quel contenu un produit a besoin, comment le structurer, qui le porte.

Les formules de titres qui accrochent.

Plan and execute a launch runbook covering pre-launch verification, go-live procedures, DNS cutover, post-launch monitoring, and rollback procedures.

Donne accès à un dossier supplémentaire dans la conversation en cours.

Liste les pages web publiées (o pour ouvrir, c pour copier le lien).

Question en aparté pendant que Claude travaille : réponse immédiate, le travail principal continue sans être interrompu ni dévié.

Repart de zéro. L'ancienne session reste sur le disque, récupérable avec /resume.

Libère de la place en résumant la conversation — quand une session devient très longue et lente.

Ouvre les réglages de Claude Code.

Montre ce qui remplit la mémoire de travail de la session, en grille colorée.

Copie la dernière réponse de Claude dans le presse-papiers (/copy 2 pour l'avant-dernière).

Diagnostique l'installation de Claude Code.

Règle la profondeur de réflexion du modèle (low → max).

Quitte Claude Code proprement.

Exporte toute la conversation vers un fichier ou le presse-papiers.

Active ou coupe le mode rapide (Opus accéléré).

L'aide et la liste complète des commandes.

Voir les automatismes branchés sur les événements (ex : le bip de fin de tour).

Crée le CLAUDE.md d'un projet. À faire une fois par nouveau repo.

Gère les serveurs MCP (Canva, Drive…) — utile quand l'un demande une ré-authentification.

Édite les fichiers CLAUDE.md — la mémoire permanente.

Change de modèle (Fable, Opus, Sonnet, Haiku) pour la session en cours.

Gère ce que Claude a le droit de faire sans demander.

Mode plan : Claude réfléchit et propose un plan SANS toucher à rien. Idéal avant un gros chantier (aussi accessible via Maj+Tab).

Rouvre une conversation précédente, avec tout son contexte.

Revient à un point antérieur de la conversation (équivalent d'Échap ×2).

Liste les skills disponibles.

État complet : version, modèle, compte, connectivité.

Configure le terminal (ex : Maj+Entrée pour aller à la ligne).

Bascule le thème clair/sombre de l'interface.

Affiche la liste de tâches en cours de la session.

Où en est la consommation du forfait.

Le contrôle avant vente — 100 % des boutons testés, 100 % du parcours passé au crible de la logique. Un seul verdict 🟢/🟠/🔴 — est-ce qu'on peut mettre ça devant un client ?

Lance le studio pour une affiche / story / post client (processus verrouillé du 09/08)

Lance l'agent Notion — écrit un doc Notion (script, plan d'idées, dossier) avec la structure et la voix d'Andrea

Fabrique une commande sur mesure de bout en bout — écouter le besoin, décider si ça mérite une commande, découper, écrire les fiches, tester en la déroulant pour de vrai, publier.

Quel compte Claude est connecté où (A/B/C) et où en est chaque quota — la vérité du trousseau, pas celle du fichier

Lance le contrôle qualité d'un visuel (affiche, flyer, post) avant livraison — verdict 🟢/🟠/🔴 + corrections

Crée un CRM sur mesure de bout en bout — comprendre le besoin, cadrer, chiffrer, construire, reprendre les données, contrôler, livrer. Reprend là où on s'est arrêté.

Initialise un repo Git dans le dossier courant, le publie sur GitHub et y pousse les fichiers.

Crée une app Vite.js avec Tailwind CSS v4 et shadcn/ui dans le dossier courant. (Hors stack Astro habituelle.)

Installe Prisma (base PostgreSQL) dans un projet Next.js : schéma, migrations, données de départ.

Met en place l'authentification Better Auth (code par email) avec shadcn/ui dans un projet Next.js.

Monte un projet Next.js complet : TypeScript, Tailwind, shadcn/ui, TanStack Query, thème clair/sombre.

—

Met une idée de business à l'épreuve : recherche concurrentielle et analyse de marché sans complaisance.

Conçoit l'architecture technique d'un SaaS Next.js à partir du cahier des charges (PRD).

Génère des titres d'accroche percutants pour une page d'atterrissage.

Rédige les textes d'une landing page orientée conversion, à partir du PRD et du contexte marketing.

Génère une politique de confidentialité et des CGU conformes RGPD, selon le produit et les données traitées.

Génère 20 variantes de logos SVG abstraits, avec brainstorming et planche de présentation HTML.

Construit un cahier des charges produit (PRD) resserré, par conversation de découverte interactive.

Découpe le PRD et l'architecture en fichiers de tâches d'implémentation.

Construit une stratégie de prix SaaS fondée sur les données : recherche concurrents et prix par la valeur.

Génère et vérifie des noms de domaine disponibles, pour la marque et les domaines utilitaires.

Build a production-ready landing page from the approved copy, in the project's own stack

Plan the launch and the first hundred visitors — where to be listed, what to publish, whom to write to, and what to do on the day

Listen to the idea first — let the person tell it in full, in their own words, and write it down without judging any of it

Set up the cash register — subscriptions, trial, customer portal, provider events — in test mode, plus the four numbers that tell you whether the business works

—

Document de référence : tous les outils et bibliothèques recommandés pour le développement AIBlueprint.

Passage de relais entre les comptes Claude — écrit un point de reprise court avant de changer de compte

Lance la chaîne SaaS complète (15 étapes) — de l'idée écoutée puis challengée jusqu'au lancement, en passant par la page de vente, la caisse et les documents légaux, dans l'ordre,

Crée un site internet de bout en bout — écouter, cadrer, dessiner, écrire, construire, contrôler, publier, transmettre. Du site le plus simple au plus ambitieux.

L'état des machines de l'agence d'un coup d'œil (serveurs, Macs, tâches, alertes, coûts), et les gestes courants — relancer une tâche, lire son journal, retrouver ses accès

—

—

—

—

—

—

—

—

—

—

—

—

—

—

—

—

—

—

—

—

—

—

—

—

Documentation officielle et à JOUR de n'importe quelle bibliothèque (Astro, Payload, Tailwind, SDK Anthropic…). À préférer systématiquement à une recherche web : mes connaissances peuvent être périmées, pas celle-ci.

—

—

—

—

Lecture et envoi de messages Discord.

—

—

—

—

Génération de fausses conversations pour des visuels ou des démonstrations.

—

Aspirateur de sites : lit une page, cartographie un site entier, extrait des données structurées, fait des recherches. C'est lui qui sert à décortiquer un ancien site ou un concurrent.

—

—

—

—

—

—

—

—

—

—

—

—

—

Lecture et envoi de messages iMessage.

—

—

—

—

—

—

Génération de composants d'interface inspirés des bibliothèques modernes (21st.dev). Utile en prototypage rapide.

—

—

—

—

Génération et retouche d'images via Gemini. L'un des moteurs images de la maison.

—

—

—

—

—

—

—

Manipulation de fichiers PDF.

—

—

—

—

—

—

—

—

—

—

—

—

—

Lecture et envoi de messages Telegram.

—

—

Données SEO réelles : mots-clés, volumes, concurrents, backlinks, audit de site. C'est la source chiffrée de l'agent expert-seo.

Extrait le design system d'un site en ligne : couleurs, typographies, tokens. Pratique pour décortiquer une référence.

—

—

—

—

—

—

—

—

—

—

—

—

—

—

Génération d'IMAGES et de VIDÉOS par IA, en ligne de commande. Installé le 7 août 2026. Andrea : « il est très bon, il peut faire plein de choses ». Répartition actuelle — NON FIGÉE, en cours de mise en place : Higgsfield pour la génération, le moteur LOCAL (genai/mflux) pour les affiches clients, et `chef-de-studio` compose ensuite le visuel final.

—

—

—

—