subhannaeem/wp-build-complete-website

Construire un site WordPress complet

Une description en entrée, un thème à blocs terminé en sortie. Cette compétence exécute les autres compétences wp-* dans l'ordre. Chaque étape doit être terminée avant que la suivante ne commence.

Étape 0 : Brief (arrêt obligatoire)

À partir de la description de l'utilisateur, rédigez SITE_BRIEF.md avec :

• Objectif et public cible, ton de la marque, couleurs et polices (proposez des valeurs par défaut si aucune n'est fournie).
• Liste des pages (par défaut : Accueil, À propos, Services ou Produits, Blog, Contact).
• Fonctionnalités (formulaire de contact, blog, galerie, boutique). Uniquement ce que l'utilisateur a demandé.
• Hypothèses, numérotées, chacune avec sa valeur par défaut.

Affichez-le et demandez à l'utilisateur d'accepter, rejeter ou conseiller. Arrêtez-vous et attendez.

Étape 1 : Configuration du projet

1. Travaillez dans un nouveau dossier (le nom choisi par l'utilisateur). Ne touchez jamais aux fichiers d'un site existant.
2. Créez un thème à blocs : style.css, theme.json, templates/, parts/ (header, footer), patterns/, assets/, functions.php.
3. Utilisez les blocs et motifs natifs de WordPress. Pas de constructeur de page, pas de framework CSS.
4. Test local facultatif : WordPress Playground ou wp-env si disponible.

Étape 2 : Système de design (wp-responsive-fluid-design)

Définissez les couleurs, l'échelle typographique fluide et les tokens d'espacement dans theme.json. Construisez l'en-tête, le pied de page, la navigation et un menu mobile. Toutes les valeurs proviennent des tokens.

Étape 3 : Pages et contenu

Créez des modèles et des motifs pour chaque page du brief. Utilisez un texte de substitution clair (pas de lorem ipsum quand le but est connu) et des images avec du texte alt. Utilisez du HTML sémantique : un h1 par page.

Étape 4 : Animations (wp-animated-block-theme)

Ajoutez des effets de révélation au défilement, de survol et de transition de page d'abord avec CSS, puis avec l'API Interactivity. Tout respecte prefers-reduced-motion ; le contenu reste visible sans JS. Utilisez wp-gsap-lottie-integration uniquement si un effet demandé en a besoin.

Étape 5 : Vérifications

1. wp-motion-performance-audit : corrigez les éléments Hauts (animation déclenchant une mise en page, décalage de mise en page, scripts lourds).
2. wp-accessible-ui-review : corrigez les éléments Hauts (focus, contraste, étiquettes, titres).
3. Vérifiez à 360, 768, 1024 et 1440 px : pas de défilement horizontal.
4. Validez : php -l sur les fichiers PHP, validité JSON sur theme.json.

Étape 6 : Remise

Rédigez un court README.md dans le dossier du thème : comment installer (zipper et téléverser), comment modifier les pages, et ce qui n'a pas été vérifié (Lighthouse en direct, appareils réels, lecteur d'écran, hébergement). Ne prétendez pas plus que ce qui a été exécuté. Ne déployez, ne poussez ni ne validez sauf si l'utilisateur le demande.

Règles

• Aucun secret, clé API ou chemin local absolu dans aucun fichier.
• N'ajoutez que les plugins approuvés par l'utilisateur ; préférez n'en ajouter aucun.
• Utilisez un contenu de substitution générique ; jamais de données personnelles ou clients réelles.
• Chaque modification doit être traçable par rapport au brief.