Skill Spectra pour Claude Code : automatiser WordPress

Spectra est utilisé par 700 000 sites WordPress. Le plugin embarque 49 blocs Gutenberg avancés. Et pour une raison qui m’échappe, aucun outil IA n’est foutu de composer correctement une page Spectra. Pas Astra MCP qui ne parle que du thème. Pas les custom GPT qui hallucinent les attributs uagb/*. Pas Claude.ai sans contexte. Personne…

J’ai passé six jours en mai 2026 à construire la base de connaissance manquante. Repo MIT public sur GitHub. Voilà ce que ça change concrètement, et comment tu t’en sers ce soir sur ton site…

Ce que ce skill Spectra te fait gagner !

• Une page de landing complète en 2 minutes, pas en 6 à 8 heures de dev. Vous décrivez en français, le skill génère le markup Gutenberg propre du premier coup.
• Zéro hallucination sur les attributs Spectra. La knowledge base sert la doc exacte des 49 blocs à Claude Code, donc plus de headingFontSize:80 ignoré ou de description à la place de answer.
• 25 pièges Spectra déjà débuggués pour vous. Symptôme, Cause, Fix, Détection. C’est six jours de tâtonnement que vous sautez.
• CSS qui survit aux éditions Gutenberg via la trouvaille _uag_custom_page_level_css tag-aware. Plus de styles strippés silencieusement après une sauvegarde admin.
• Compatibilité n’importe quel thème WordPress. Astra default, palette saturée, Twenty Twenty-Five FSE, Frost, Ollie, Kadence. Le skill route automatiquement vers Spectra ou core.
• Open source MIT. Forkable, gratuit, sans télémétrie, sans dépendance SaaS qui meurt l’année prochaine.
• Refonte d’une page existante par snapshot puis reconstruction en clone (jamais sur l’URL prod sans validation).
• Mode --strict pour CI : refus de claim WOW sans screenshot, sortie en draft minimal, parfait pour les batch jobs et les agents headless.

3 killer features

1. Génération depuis un brief

Tu décris ce que tu veux. Le skill route chaque intention vers le bon bloc (Spectra prioritaire pour les compositions visuelles, core pour les blocs atomiques), assemble un markup Gutenberg propre, valide le roundtrip parse/serialize, génère un CSS overrides tag-aware, POST sur ton site en draft, force la régénération Spectra, valide visuellement par screenshot.

2. Refonte intelligente

Tu donnes une URL existante. Le skill snapshot le contenu via REST API, analyse la structure, mappe chaque section vers un pattern Spectra moderne, reconstruit en respectant chaque mot du contenu original. Le draft est créé en clone (jamais sur l’URL prod sans validation).

3. Templates blueprints

8 templates documentés au format composition de patterns. Page accueil, page tarifs, page contact, page à propos, blog editorial, e-commerce produit, landing SaaS, page agence. Chacun avec variables d’entrée, schema SEO (Service / Product / Organization / HowTo / Review), configuration Astra par type de page, variantes par secteur, workflow d’application.

Démo concrète

Vous lancez Claude Code dans le projet WordPress, vous invoquez le skill Spectra, vous décrivez en français…

/astra-spectra build "landing pour ma boutique de café avec hero + 3 piliers
+ stats + about-story + 3 testimonials + FAQ + CTA final"

Le skill enchaîne 10 étapes en moins de deux minutes :

1. Lecture de la knowledge base critique (25 pièges, règles i18n, technique CSS persistante)
2. Détection environnement : Spectra version, Astra version, palette active, hébergeur
3. Routing intent vers patterns : hero-image-overlay, features-numbered, stats-bar-editorial, about-story-split, testimonials-cards, faq-accordion, cta-banner-fullwidth
4. Demande des variables (titre, sous-titre, images, ratios attendus)
5. Génération markup Gutenberg avec block_id uniques + entities FR + tokens Astra
6. Génération CSS overrides ciblé sur les classes du slug, encapsulé entre balises /* === skill-generated v1.0 START/END === */
7. Validation roundtrip parse/serialize (anti-crash Gutenberg)
8. POST page en draft + meta _uag_custom_page_level_css (tag-aware, préserve ton CSS user)
9. Force regen Spectra (4 stratégies cascadées : mu-plugin, endpoint native, temp-publish trick, manuel)
10. Validation visuelle par screenshot, retry max 3 si défaut détecté

Tu reçois une URL d’édition Gutenberg, des screenshots des sections, l’URL frontend. Tu vérifies, tu modifies dans l’admin (le CSS persiste car dans le meta natif Spectra, pas inline), tu publies quand bon te semble.

Anatomie en 6 chiffres

• 17 références dans references/ : pièges Spectra, règles i18n FR, design baselines, visual pitfalls, table de routing intent → bloc, etc.
• 35 patterns au format "comment construire" : Hero, Stats, Features, Testimonials, FAQ, CTA, plus 14 patterns Spectra fonctionnels (Maps, modal, popup, post-grid, marketing buttons, etc.)
• 8 templates blueprints : page formation, page tarifs, page contact, page à propos, blog éditorial, e-commerce produit, landing SaaS, page agence
• 14 scripts PHP utilitaires : pre-flight check bloqueur, post-render check, regen Spectra 4 stratégies, validate roundtrip, mu-plugin compagnon
• 5 workflows validés : génération from brief, refonte page legacy, déploiement template, audit visuel, screenshot options
• 6 règles anti-désastre non-négociables en haut du SKILL.md : pas de claim WOW sans screenshot, max 3 sections par itération, baseline référencée jamais inventée

6 astuces pour bien l’utiliser

1. Itère par section, pas par page entière. Le skill peut générer 8 sections d’un coup, mais la qualité visuelle s’effondre au-delà de 3. Génère hero+stats+features, valide, puis enchaîne.
2. Donne du contexte précis dans le brief. Pas "page de vente formation", mais "page de vente formation WordPress avancée, cible débutants reconvertis 35-50 ans, prix 1900 EUR HT OPCO, 4 témoignages avec photos, FAQ 6 questions". Plus le brief est dense, mieux c’est.
3. Toujours valider le screenshot avant publish. Le pre-flight check valide la technique. Le post-render check valide le rendu. Mais c’est ton oeil qui valide la qualité visuelle. Aucune exception.
4. Mode --strict en CI ou batch. Si tu lances le skill dans une instance Claude sans tooling de capture (GitHub Actions, cron, agent headless), passe le drapeau --strict. Le skill refuse alors les effets WOW et sort un draft minimal vérifiable.
5. Jamais POST sur l’URL prod sans clone. Pour la refonte d’une page existante, le skill crée un clone à /page-refonte/. Tu valides, puis tu décides de la migration. C’est non-négociable, et c’est dans le SKILL.md.
6. Combine avec /impeccable pour audit visuel. Si tu as le skill /impeccable installé, il complète le post-render check par un audit a11y, hiérarchie typo et alignements. Compter 30 secondes de plus, plusieurs heures de bug visuel évitées.

La trouvaille technique : CSS persistant tag-aware

Spectra a un meta natif _uag_custom_page_level_css que le plugin concatène à son stylesheet à chaque rendu. Le skill exploite ce meta avec une logique tag-aware :

/* === skill-generated v1.0 START === */
.uagb-block-accueil-stat-1 .uagb-ifb-title {
  font-size: 80px !important;
  color: var(--ast-global-color-0) !important;
  font-weight: 800 !important;
}
/* … autres overrides skill-managed … */
/* === skill-generated v1.0 END === */

/* CSS user post-skill ajouté manuellement dans Spectra UI : préservé */
.my-custom-class { ... }

Quand le skill régénère le CSS, il remplace SEULEMENT la section entre balises. Le CSS que tu as ajouté à la main dans l’admin Spectra ("Page Level CSS" dans la sidebar Gutenberg) est préservé. Pas de surprise au prochain rendu.

Personne d’autre n’a documenté cette mécanique publiquement… C’est ce qui rend le skill exploitable en production sur des sites client réels.

La leçon d’humilité

v1.0-rc4 : 3 pages contact générées sur un site interne. Pre-flight check vert, roundtrip diff zéro, mu-plugin déployé. Tout est techniquement nickel. Sauf qu’à l’oeil… c’est moche. Niveau "débutant qui découvre WordPress un dimanche pluvieux". Le reviewer me l’a dit en deux phrases sans agressivité, et il avait raison sur les trois pages.

La leçon : un skill techniquement valide ne suffit pas. Sans baseline visuelle référencée, sans gate bloquant sur screenshot, sans plafond du nombre de sections par itération, la session Claude qui invoque le skill peut produire un markup propre et un visuel calamiteux. Six règles anti-désastre ajoutées en v1.0-rc5, treize moves design qui sonnent créatifs mais foirent en pratique documentés dans visual-pitfalls.md. Le mantra inscrit en haut du SKILL.md, qui résume tout…

Démarrage rapide en 3 commandes

# 1. Cloner le skill
cd ~/.claude/skills/
git clone https://github.com/wpformation/claude-skill-astra-spectra astra-spectra

# 2. Sur ton site WordPress : activer Spectra + créer un Application Password
wp plugin install ultimate-addons-for-gutenberg --activate
# Puis WP admin > Profil > Application Passwords > nouveau "claude-skill-astra-spectra"

# 3. Dans Claude Code
> /astra-spectra
> Détecte mon site https://monsite.com avec ce password : abcd 1234 efgh 5678

Status v1.0-rc6 et roadmap

Livré et stable : 25 pièges Spectra documentés (Symptôme, Cause, Fix, Détection chacun), 35 patterns testés en production, 8 templates blueprints, 14 scripts PHP utilitaires, mu-plugin compagnon avec 6 endpoints REST custom, baselines visuelles validées sur 3 stacks distincts (Astra default, Astra palette saturée chaude, Twenty Twenty-Five FSE), guardrails anti-désastre cross-instance Claude.

À venir pour la 1.0 stable : 8 examples committés avec screenshots dans examples/, tests sur Frost et Ollie, tag explicite par registre design (editorial, bold, SaaS-corporate, luxe, playful), workflow GitHub Actions de régression visuelle automatisée avec diff de pixels par pattern.

Architecture du Skill Spectra WordPress

SKILL.md                            ← Entry point (workflow + qui lit quoi quand)

references/                         ← Knowledge base critique (LIRE EN PREMIER)
├── spectra-attributes-quirks.md    ← 24 pièges Spectra documentés (OBLIGATOIRE)
├── i18n-rules.md                   ← FR : entities + nbsp typo + apostrophes typo vs ASCII
├── persistent-css-overrides.md     ← _uag_custom_page_level_css + workaround Quirk #23
├── design-baselines.md             ← ⭐ NOUVEAU v1.0-rc5 — rulers typo/spacing par section (anti-improvisation)
├── visual-pitfalls.md              ← ⭐ NOUVEAU v1.0-rc5 — 13 moves design qui sonnent créatifs mais foirent
├── impeccable-bridge.md            ← ⭐ NOUVEAU v1.0-rc5 — mapping principes /impeccable → patterns Spectra + tags par registre
├── spectra-icons-list.md           ← whitelist icônes validées
├── gutenberg-core-blocks.md        ← 30+ blocs core/* curés
├── astra-page-template-rules.md    ← anti double-H1, configurations Astra (thèmes classiques)
├── block-theme-fse-rules.md        ← Twenty Twenty-Five, Frost, Ollie, etc.
├── apache-mutu-pitfalls.md         ← o2switch / OVH / Hostinger : auth strip, LiteSpeed
├── images-ratios.md                ← ratio attendu par pattern
├── spectra-blocks-catalog.md       ← 49 blocs uagb avec attributs
├── intent-to-block-routing.md      ← table de décision intent → bloc
├── section-rhythm.md               ← convention alternance bg
├── semantic-color-roles.md         ← slots GARANTIS vs VARIABLES
├── design-system-tokens.md         ← convention tokens
├── block-markup-syntax.md          ← syntaxe Gutenberg comments
├── mu-plugin-companion.md          ← installer le mu-plugin compagnon
└── spectra-demo-reference.md       ← analyse design Spectra Natures

patterns/                           ← Comment construire (PAS du copier-coller) — 35+ patterns
│
│   Compositions visuelles (sections de landing)
├── hero-image-overlay.md            hero-cta-split.md
├── stats-bar-editorial.md           stats-counters.md
├── features-numbered.md             features-3-cols.md
├── about-story-split.md             team-grid.md
├── testimonials-cards.md            testimonials-grid.md
├── pricing-3-tiers.md               faq-accordion.md
├── cta-banner-fullwidth.md          how-to-steps.md
├── countdown-launch.md              article-content-rich.md
├── review-product.md                landing-formation-complete.md
│
│   Blocs Spectra fonctionnels (UI/interaction/data)
├── tabs-section.md                  slider-carousel.md
├── timeline-vertical.md             post-display.md (grid/masonry/carousel/timeline)
├── google-maps.md                   modal.md
├── marketing-buttons.md             popup-builder.md
├── table-of-contents.md             forms.md (uagb/forms + cf7-designer + gf-designer)
├── image-gallery.md                 icon-list.md
├── inline-notice.md                 social-share.md
├── price-list.md                    star-rating.md
└── lottie.md

templates/                          ← Blueprints (composition de patterns) — 8 templates
├── page-accueil.md                  page-tarifs.md
├── page-contact.md                  page-a-propos.md
├── blog-editorial.md                e-commerce-produit.md
├── landing-saas.md                  page-agence.md
└── README.md

workflows/                          ← Pipelines validés
├── new-page-from-brief.md          ← 10 étapes from brief (pre-flight check OBLIGATOIRE avant POST)
├── refonte-page-existante.md       ← snapshot → analyse → reconstruction
├── visual-validation-loop.md       ← 🔴 GATE BLOQUANT — screenshot + audit + retry max 3 (renforcé v1.0-rc5)
├── screenshot-options.md           ← ⭐ NOUVEAU v1.0-rc5 — 5 options concrètes pour capturer un visuel
└── deploy-template.md              ← workflow déploiement template

scripts/                            ← 15 scripts PHP utilitaires
├── pre-flight-check.php            ← VALIDATEUR PRE-POST BLOQUEUR (24 quirks + i18n + conventions)
├── post-render-check.php           ← ⭐ NOUVEAU v1.0-rc4 — validateur POST-render (fetch URL, check Quirks #23/#24)
├── post-page-via-rest.php          ← POST + temp-publish trick
├── update-page-meta-css.php        ← TAG-AWARE update CSS (préserve user)
├── regen-spectra.php               ← 4 stratégies cascadées
├── validate-block-markup.php       ← roundtrip parse/serialize
├── visual-audit.php                ← 10 checks (WCAG walker, hardcoded color, etc.)
├── resolve-palette.php             ← resolve var(--ast-global-color-X)
├── apply-design-tokens.php         ← appliquer tokens design system
├── snapshot-page.php               ← dump page pour refonte
├── astra-customizer.php            ← export/apply Astra Customizer
├── auto-fix-markup.php             ← auto-fix erreurs courantes
├── detect-environment.php          ← profil site cible (check uag_enable_on_page_css_button)
├── cleanup-test-pages.php          ← cleanup pages test
└── mu-plugin-skill-test.php        ← mu-plugin compagnon (6 endpoints REST)

modules/                            ← Modules domaine
├── astra/                          ← Customizer, palette, header/footer
└── spectra/                        ← Container WOW recipes (12 recettes)

evals/                              ← 10+ prompts test pour mesurer qualité
screenshots/                        ← Baselines visuelles validées
examples/                           ← Pages de référence concrètes (PAS le skill)

FAQ

Faut-il payer Anthropic pour utiliser ce skill ?

Oui, plan Anthropic Pro ou Max requis pour Claude Code. Le skill est gratuit. Compter 0,30 à 0,80 USD de tokens par page complète, ou inclus dans le plan.

Le skill marche-t-il sans Astra ?

Oui. N’importe quel thème WordPress fonctionne (Twenty Twenty-Five, Kadence, GeneratePress, Hello Elementor, Frost, Ollie). Si Astra est détecté, un module bonus pilote la palette et la typographie via le Customizer.

Faut-il Spectra Pro ?

Spectra free 2.10 et plus couvre 95 % des patterns. Quelques blocs avancés comme le popup-builder demandent Spectra Pro, avec un fallback core proposé automatiquement.

Le skill peut-il refondre une page existante ?

Oui, c’est la deuxième killer feature. Tu donnes l’URL, le skill snapshotte, analyse, mappe vers patterns Spectra modernes, reconstruit en clone à /page-refonte/. Validation manuelle avant migration.

Y a-t-il un risque de casser ma prod ?

Très limité. Pages POSTées en draft par défaut, pre-flight check (25 quirks) plus post-render check (rendu visuel) avant tout claim succès. Aucune publication automatique.

Comment former mon équipe à l’utiliser ?

WPFormation propose des formations sur-mesure WordPress + IA, organisme certifié Qualiopi, financement OPCO possible. Lien CTA en fin d’article.

Pour aller plus loin

Le repo du skill est ouvert : github.com/wpformation/claude-skill-astra-spectra. License MIT, fork autorisé, contributions bienvenues. Pour comprendre comment Claude Code s’articule avec WordPress en général, lis Claude Code et WordPress en 2026, et pour la connexion via MCP, WordPress MCP, connecter Claude à votre site.

Si tu veux industrialiser Claude Code dans ton workflow agence (skills, MCP, routines cloud, automatisations), je forme depuis 2012 sur-mesure. Sur 20 à 60 heures, financement OPCO accepté, distanciel ou présentiel. Voir la formation WordPress + IA