--- name: artisan-vitrine description: > Créer des sites vitrine production-ready pour les artisans du bâtiment et des métiers techniques (électricien, plombier, menuisier, peintre, chauffagiste, maçon, carreleur, etc.). Structure reproductible, responsive mobile-first, accessibilité WCAG AA, SEO local et géo-ciblage intégrés, patterns UX orientés conversion (social proof, CTA clairs, trust signals). Aucun emoji, aucune esthétique IA générique. Résultat organique, artisanal, humain. --- # Skill — Sites vitrine pour artisans Ce skill produit du code HTML/CSS/JS (ou React) complet, propre et directement utilisable pour tout corps de métier artisanal. Chaque génération doit sembler faite à la main par un designer qui connaît le secteur, pas par une IA. --- ## 1. Avant de coder — Cadrage obligatoire Avant d'écrire une seule ligne, répondre mentalement à ces questions : - **Métier** : quel corps de métier précis ? (électricien, plombier, couvreur…) - **Zone géographique** : ville(s) et département(s) couverts - **Persona client** : particulier, copropriété, promoteur, entreprise ? - **Différenciateur** : urgences 24h/24, certifications RGE, spécialité domotique, etc. - **Ton** : sérieux et rassurant, local et chaleureux, expert et technique ? - **Palette** : choisir une couleur dominante liée au métier (voir section 4), jamais imposée au hasard --- ## 2. Structure de page — Ordre fixe et reproductible Chaque site suit EXACTEMENT cet ordre de sections. Ne pas réorganiser. Chaque section a un `id` sémantique pour l'ancrage et le SEO. ``` 1.
Navigation fixe + logo + CTA téléphone visible 2. #hero Accroche + sous-titre + CTA principal + photo réelle ou fond métier 3. #services Grille des prestations (3 à 6 max) 4. #zones Zone d'intervention géographique 5. #realisations Galerie avant/après ou projets récents (3 minimum) 6. #temoignages Avis clients (social proof) 7. #a-propos Présentation humaine de l'artisan 8. #certifications Labels, assurances, certifications (Qualibat, RGE, etc.) 9. #contact Formulaire + téléphone + adresse + carte (Google Maps embed) 10.