Communitygithub.com

AdityaPratamaS18/website-skill

Créez un site web Next.js complet optimisé pour le référencement (SEO) pour un client ou une entreprise, à partir d'un brief jusqu'à un prêt à lancer. Utilisez-le chaque fois que l'utilisateur souhaite un nouveau site ou une reconstruction complète à partir de documents source.

Qu'est-ce que website-skill ?

Cette compétence d'agent (skill) automatise la création d'un site web Next.js de qualité professionnelle, optimisé pour le référencement (SEO), pour un client ou une entreprise. Elle guide l'agent à travers un processus structuré en sept phases, de l'analyse du brief jusqu'au lancement. Cette compétence est utile pour toute personne souhaitant un site web complet, à partir d'un brief client, d'un profil d'entreprise, d'une proposition ou d'un site WordPress existant. Elle prend en charge les sites statiques et serveurs avec Next.js App Router, garantit les bonnes pratiques SEO (une URL par service, un mot-clé principal par URL, des titres et descriptions basés sur un plan approuvé) et inclut des vérifications automatisées (portes) pour la qualité, avant de passer à l'étape suivante. L'agent doit suivre les instructions du document `SKILL.md`, utiliser les scripts fournis et ne jamais inventer de faits pour éviter les risques juridiques.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/AdityaPratamaS18/website-skill/tree/HEAD/skills/website-skill
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Compétence Site Web : Procédure

Cette compétence crée un site web client à partir d'un seul brief. Chaque client reçoit un plan approuvé, une base de code et un script de vérification. Le plan approuvé contrôle les routes, les titres, les descriptions, les en-têtes et le sitemap.

Dans ce document, <skill-dir> est le dossier qui contient ce fichier, et <client-folder> est le dossier pour ce client. Si l'utilisateur n'a pas de convention de dossier, utilisez clients/<client>/.

Prérequis

  1. Lisez les notes pour ce client, si elles existent. Donnez à l'utilisateur les règles qui s'appliquent, en 2 ou 3 lignes.
  2. Trouvez le brief, le profil d'entreprise, le logo et les photos.
  3. Assurez-vous que Node.js, Python 3 et rsync sont disponibles.

ATTENTION : NE METTEZ PAS UN FAIT SUR LE SITE SI LE BRIEF NE LE FOURNIT PAS. UN CERTIFICAT, NOM DE CLIENT, CHIFFRE OU TÉMOIGNAGE INVENTÉ EST UN RISQUE JURIDIQUE ET DE CONFIANCE POUR LE CLIENT.

Phase 1 : Faits

  1. Lisez references/brief-intake.md.
  2. Lisez chaque fichier source en entier.
  3. Écrivez <client-folder>/site-brief/facts.md.
  4. Explorez le site actuel si le client en a un. Enregistrez chaque URL pour la carte de redirection.
  5. Écrivez <client-folder>/site-brief/questions-for-client.md si des faits sont manquants.

PORTE 1. Montrez à l'utilisateur le résumé de la fiche de faits et la liste des lacunes. Arrêtez-vous jusqu'à ce que l'utilisateur réponde. Continuez avec les lacunes uniquement si l'utilisateur est d'accord. Une page qui nécessite un fait manquant reste en dehors du plan, ou reste sans ce fait.

Phase 2 : Plan du site

  1. Lisez references/site-plan.md.
  2. Effectuez la recherche de mots-clés pour le marché du client.
  3. Copiez <skill-dir>/assets/site-plan.template.json vers <client-folder>/site-brief/site-plan.json.
  4. Remplissez une entrée pour chaque page.
  5. Comparez le plan avec la proposition, si elle existe. Chaque élément du périmètre doit avoir une page ou une fonctionnalité. Un formulaire dans le périmètre nécessite un hébergement server, ou un remplacement convenu.
  6. Exécutez la porte du plan. Corrigez chaque ÉCHEC.
python3 <skill-dir>/scripts/site_gate.py plan <client-folder>/site-brief/site-plan.json

PORTE 2. Montrez à l'utilisateur un tableau avec ces colonnes : URL, mot-clé principal, volume mensuel, titre. Indiquez également le choix d'hébergement. Arrêtez-vous jusqu'à ce que l'utilisateur approuve. Ensuite, écrivez l'approbation dans le plan sous les champs "approved_by" et "approved_on". La porte de construction échoue sans ces champs.

Phase 3 : Échafaudage

  1. Sélectionnez le dossier <client-folder>/website/.
  2. Exécutez le script d'échafaudage. Le script fonctionne avec des espaces et des majuscules dans le chemin.
bash <skill-dir>/scripts/scaffold.sh "<client-folder>/website" static
  1. Utilisez server à la place de static uniquement si le plan nécessite une fonctionnalité de serveur (voir references/launch.md).
  2. Copiez le site-plan.json approuvé vers src/lib/site-plan.json.
  3. Remplacez chaque valeur __FILL dans src/lib/site.ts par une valeur de la fiche de faits.
  4. Lisez les guides pour les métadonnées, les images, les polices et les exports statiques dans node_modules/next/dist/docs/01-app/.

REMARQUE : Next.js change entre les versions majeures. Les guides dans node_modules correspondent à la version installée. Vos données d'entraînement ne le font pas.

Phase 4 : Direction du design

  1. Lisez references/design-and-copy.md.
  2. Créez les jetons de couleur et de police à partir du logo. Placez-les dans globals.css.
  3. Créez public/logo.webp, public/og.webp (1200 x 630 pixels) et src/app/icon.png à partir du logo.
  4. Construisez l'en-tête, le pied de page et la page d'accueil uniquement.
  5. Démarrez l'aperçu. Utilisez npx serve out -l 3210 pour un site statique, après une construction. Utilisez npm run dev pour un site serveur.
  6. Ouvrez http://127.0.0.1:3210 dans un navigateur. Vérifiez la page à 375, 768 et 1280 pixels.

REMARQUE : Un navigateur intégré peut retourner HTTP 431 pour localhost. L'adresse 127.0.0.1 n'a pas ce défaut.

PORTE 3. Montrez à l'utilisateur la page d'accueil. Arrêtez-vous jusqu'à ce que l'utilisateur approuve le design. Toutes les autres pages utilisent ce design.

ATTENTION : NE CONSTRUISEZ PAS LES AUTRES PAGES AVANT LA PORTE 3. UN CHANGEMENT DE DESIGN TARDIF PROVOQUE UNE MIGRATION DE TOUTES LES PAGES.

Phase 5 : Pages

  1. Lisez references/seo-build-spec.md.
  2. Mettez le contenu dans des fichiers de données typés dans src/lib/ (par exemple services.ts). Gardez les fichiers de page légers.
  3. Utilisez une route dynamique avec generateStaticParams pour chaque type de page répété.
  4. Obtenez chaque titre, description et H1 du plan avec pageMetadata() et getPage().
  5. Rédigez le texte pour l'acheteur, avec la voix du client. Utilisez uniquement les faits de facts.md.
  6. Ajoutez des liens internes comme le spécifie le document.
  7. Construisez le site.
npm run build
  1. Exécutez la porte de construction. Corrigez chaque ÉCHEC à sa cause. Ne modifiez pas la porte pour obtenir une réussite.
python3 <skill-dir>/scripts/site_gate.py build <client-folder>/website
  1. Exécutez npx tsc --noEmit et npm run lint.

Phase 6 : Révision

  1. Vérifiez chaque type de page dans le navigateur à 375, 768 et 1280 pixels.
  2. Vérifiez chaque CTA : téléphone, WhatsApp, email et formulaire.
  3. Si l'utilisateur le demande, préparez le texte des pages pour le client dans un seul document. Suivez references/design-and-copy.md.
  4. Déployez un aperçu uniquement lorsque l'utilisateur vous le demande. Un aperçu de construction n'est pas indexable.

PORTE 4. Donnez à l'utilisateur l'URL d'aperçu et le résultat de la porte. Arrêtez-vous jusqu'à ce que l'utilisateur approuve le lancement.

Phase 7 : Lancement

  1. Lisez references/launch.md.
  2. Construisez avec SITE_INDEXABLE=1.
  3. Exécutez la porte de construction avec --release. La porte doit réussir.
  4. Effectuez les étapes de lancement dans references/launch.md.

ATTENTION : NE CONNECTEZ PAS LE DOMAINE OU NE POUSSEZ PAS EN PRODUCTION SANS UNE APPROBATION DANS LA SESSION EN COURS. LE DOMAINE EN DIRECT AFFECTE L'ACTIVITÉ DU CLIENT.

Clôture

  1. Donnez à l'utilisateur une liste des actions restantes pour le client.
  2. Enregistrez les chemins, les décisions et les leçons dans les notes pour ce client.
  3. Dites à l'utilisateur que le site est prêt pour le travail de contenu SEO.

Règles fixes

RègleRaison
Une URL par serviceUn site d'une seule page ne donne pas de service d'URL qui peut se classer
Un mot-clé principal par URLDeux pages sur un même mot-clé sont en concurrence
Le plan est la seule source pour les titres et les routesLa porte compare le HTML construit avec le plan
Pas de compteurs de statistiques animésLe HTML affiche 0 avant l'exécution du script
Les portes sont des scriptsChaque défaut que les scripts attrapent a d'abord échappé à une personne

Références

FichierLisez-le dans
references/brief-intake.mdPhase 1
references/site-plan.mdPhase 2
references/design-and-copy.mdPhase 4 et Phase 6
references/seo-build-spec.mdPhase 5
references/launch.mdPhase 2 (hébergement) et Phase 7

Skills associés

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community