npm - afkaar-gen - Versions diffs - 1.0.0 - Mend

afkaar-gen 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/README.md +65 -0
package/SKILL.md +80 -0
package/bin/interactive.js +10 -0
package/interactive.html +575 -0
package/package.json +42 -0
package/references/architecture.md +185 -0
package/references/figma-mode.md +57 -0
package/references/inspiration-mode.md +71 -0
package/references/integrations.md +111 -0
package/references/iteration-mode.md +60 -0
package/references/questions.md +198 -0
package/references/security-checklist.md +218 -0
package/references/seo-guide.md +183 -0

package/interactive.html ADDED Viewed

@@ -0,0 +1,575 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>afkaar-gen — Questionnaire interactif</title>
+<style>
+*{margin:0;padding:0;box-sizing:border-box}
+body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:#f5f5f8;color:#14131c;min-height:100vh;display:flex;justify-content:center;padding:20px}
+.container{max-width:720px;width:100%}
+/* Header */
+.header{text-align:center;padding:32px 0 24px}
+.header h1{font-size:24px;font-weight:700;letter-spacing:-.3px}
+.header p{color:#5a596a;font-size:14px;margin-top:4px}
+/* Progress */
+.progress-bar{background:#e3e3ec;border-radius:99px;height:6px;margin-bottom:32px;overflow:hidden}
+.progress-fill{background:#3b2fd4;height:100%;border-radius:99px;transition:width .4s ease;width:0}
+/* Steps tabs */
+.steps{display:flex;gap:8px;margin-bottom:32px}
+.step-tab{padding:10px 18px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;border:2px solid #e3e3ec;background:#fff;color:#5a596a;transition:all .2s;flex:1;text-align:center}
+.step-tab.active{border-color:#3b2fd4;color:#3b2fd4;background:#f0eeff}
+.step-tab.done{background:#3b2fd4;color:#fff;border-color:#3b2fd4}
+/* Step content */
+.step{display:none}
+.step.active{display:block}
+.step-title{font-size:16px;font-weight:600;margin-bottom:20px;color:#14131c}
+/* Question card */
+.q-card{background:#fff;border-radius:14px;padding:20px;margin-bottom:20px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
+.q-label{font-size:15px;font-weight:600;margin-bottom:12px;color:#14131c}
+.q-desc{font-size:13px;color:#5a596a;margin-bottom:14px;line-height:1.5}
+/* Option grid */
+.opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
+.opt-grid.single{grid-template-columns:1fr}
+.opt-grid.col3{grid-template-columns:1fr 1fr 1fr}
+.opt-card{cursor:pointer;padding:12px 14px;border-radius:10px;border:2px solid #e3e3ec;background:#fff;transition:all .2s;font-size:13px;line-height:1.4}
+.opt-card:hover{border-color:#b8b6d0;transform:translateY(-1px)}
+.opt-card.selected{border-color:#3b2fd4;background:#f0eeff;box-shadow:0 2px 8px rgba(59,47,212,.12)}
+.opt-card .badge{display:inline-block;background:#e3e3ec;border-radius:4px;padding:1px 6px;font-size:11px;font-weight:600;color:#5a596a;margin-right:6px}
+.opt-card.selected .badge{background:#3b2fd4;color:#fff}
+.opt-card.default{border-style:dashed}
+.opt-card.default::after{content:" ★";color:#f5c518;font-weight:700}
+/* Checkboxes for multi-select */
+.check-grid{display:flex;flex-wrap:wrap;gap:6px}
+.check-item{cursor:pointer;padding:8px 14px;border-radius:8px;border:2px solid #e3e3ec;background:#fff;transition:all .2s;font-size:13px;user-select:none;display:flex;align-items:center;gap:6px}
+.check-item:hover{border-color:#b8b6d0}
+.check-item.checked{border-color:#3b2fd4;background:#f0eeff}
+.check-item .box{width:18px;height:18px;border-radius:4px;border:2px solid #b8b6d0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;transition:all .15s;flex-shrink:0}
+.check-item.checked .box{background:#3b2fd4;border-color:#3b2fd4}
+/* Input text */
+.q-input{width:100%;padding:10px 14px;border-radius:8px;border:2px solid #e3e3ec;font-size:14px;font-family:inherit;outline:none;transition:border .2s;margin-top:8px}
+.q-input:focus{border-color:#3b2fd4}
+/* Buttons */
+.btn-row{display:flex;gap:12px;margin-top:8px}
+.btn{padding:12px 28px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all .2s;font-family:inherit}
+.btn-primary{background:#3b2fd4;color:#fff}
+.btn-primary:hover{background:#2c23a8;transform:translateY(-1px)}
+.btn-primary:disabled{background:#b8b6d0;cursor:default;transform:none}
+.btn-ghost{background:transparent;color:#5a596a;border:2px solid #e3e3ec}
+.btn-ghost:hover{background:#f0eeff;border-color:#3b2fd4;color:#3b2fd4}
+/* Summary */
+.summary-section{display:none}
+.summary-section.active{display:block}
+.summary-card{background:#fff;border-radius:14px;padding:24px;margin-bottom:16px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
+.summary-card h3{font-size:14px;font-weight:600;color:#5a596a;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}
+.summary-item{padding:6px 0;font-size:14px;border-bottom:1px solid #f0f0f5}
+.summary-item:last-child{border-bottom:none}
+.summary-item .key{color:#5a596a;display:inline;margin-right:8px}
+.summary-item .val{color:#14131c;font-weight:500}
+.tag{display:inline-block;background:#f0eeff;color:#3b2fd4;border-radius:6px;padding:2px 10px;font-size:12px;font-weight:600;margin:2px}
+.tag-off{background:#f0f0f5;color:#b8b6d0}
+@media(max-width:600px){
+.opt-grid{grid-template-columns:1fr!important}
+.opt-grid.col3{grid-template-columns:1fr!important}
+.steps{flex-wrap:wrap}
+.step-tab{flex:none;width:calc(50% - 4px)}
+}
+/* Section picker */
+.section-picker{display:grid;grid-template-columns:1fr 1fr;gap:6px}
+.section-item{cursor:pointer;padding:8px 12px;border-radius:8px;border:2px solid #e3e3ec;background:#fff;transition:all .2s;font-size:13px;display:flex;align-items:center;gap:8px}
+.section-item.selected{border-color:#3b2fd4;background:#f0eeff}
+/* Service entry */
+.service-list{margin-bottom:12px}
+.service-entry{background:#f8f8fc;border-radius:8px;padding:10px 14px;margin-bottom:6px;display:flex;justify-content:space-between;align-items:center;font-size:13px}
+.service-entry .del{cursor:pointer;color:#c62838;font-weight:700;font-size:16px;padding:0 4px}
+.add-svc-btn{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:#3b2fd4;font-weight:600;font-size:13px;padding:8px 12px;border-radius:8px;border:2px dashed #b8b6d0;background:transparent;margin-top:6px;transition:all .2s}
+.add-svc-btn:hover{border-color:#3b2fd4;background:#f0eeff}
+</style>
+</head>
+<body>
+<div class="container">
+  <div class="header">
+    <h1>✏️ afkaar-gen</h1>
+    <p>Répondez aux questions pour générer votre site web</p>
+  </div>
+  <div class="progress-bar"><div class="progress-fill" id="progressFill"></div></div>
+  <div class="steps" id="stepTabs">
+    <div class="step-tab active" data-step="0">1. Identité</div>
+    <div class="step-tab" data-step="1">2. Contenu</div>
+    <div class="step-tab" data-step="2">3. Technique</div>
+    <div class="step-tab" data-step="3">4. Finalisation</div>
+  </div>
+  <div id="step0" class="step active"></div>
+  <div id="step1" class="step"></div>
+  <div id="step2" class="step"></div>
+  <div id="step3" class="step"></div>
+  <div class="summary-section" id="summarySection">
+    <h2 style="font-size:20px;margin-bottom:20px">📋 Récapitulatif</h2>
+    <div id="summaryContent"></div>
+    <div class="btn-row" style="margin-top:20px">
+      <button class="btn btn-ghost" onclick="goToStep(0)">Modifier</button>
+      <button class="btn btn-primary" id="exportBtn" onclick="exportJSON()">Exporter le projet</button>
+    </div>
+    <p style="color:#5a596a;font-size:13px;margin-top:12px">L'export génère un fichier JSON à donner à l'agent AI pour générer le site.</p>
+  </div>
+</div>
+<script>
+// ===== DATA =====
+const data = {
+  name: '', domain: '', logo: '', colors: '', style: '',
+  sections: [], services: [], extraPages: [], socials: [],
+  blog: '', admin: '', integrations: [], otherFeat: '',
+  inspiration: '', mockup: '', phone: '', email: '', address: '',
+  hosting: '', lang: ''
+};
+let currentStep = 0;
+let serviceCount = 0;
+// ===== QUESTIONS =====
+const steps = [
+  // Step 0: Identité
+  [
+    {
+      id: 'name', label: "Nom de l'entreprise", desc: "Comment s'appelle votre entreprise ou projet ?",
+      type: 'choices', options: [
+        { val: 'perso', label: 'Mon Nom / Prénom', def: false },
+        { val: 'agence', label: 'Mon Agence Digitale', def: true },
+        { val: 'marque', label: 'Ma Marque', def: false },
+        { val: 'custom', label: 'Autre (à préciser)', def: false, input: true }
+      ]
+    },
+    {
+      id: 'domain', label: 'Nom de domaine', desc: "Quel URL pour votre site ?",
+      type: 'choices', options: [
+        { val: 'auto', label: 'mon-agence.tn', def: true },
+        { val: 'later', label: 'Je ne sais pas encore', def: false },
+        { val: 'custom', label: 'Autre (à préciser)', def: false, input: true }
+      ]
+    },
+    {
+      id: 'logo', label: 'Logo', desc: "Avez-vous un logo ?",
+      type: 'choices', options: [
+        { val: 'upload', label: 'Je l\'envoie en image', def: false, input: true, inputPh: 'Collez l\'image en base64 ici (optionnel)' },
+        { val: 'describe', label: 'Je le décris, vous le créez', def: false, input: true, inputPh: 'Décrivez votre logo' },
+        { val: 'none', label: 'Pas de logo → placeholder', def: true }
+      ]
+    },
+    {
+      id: 'colors', label: 'Palette de couleurs', desc: "Choisissez une palette ou donnez vos couleurs",
+      type: 'choices', options: [
+        { val: 'blue-orange', label: '🟦🟧 Bleu marine + Orange', sub: 'Pro & dynamique', def: false },
+        { val: 'green-beige', label: '🟩⬜ Vert sombre + Beige', sub: 'Nature & sérénité', def: false },
+        { val: 'purple-pink', label: '🟣🩷 Violet + Rose', sub: 'Créatif & moderne', def: false },
+        { val: 'black-gold', label: '⬛🟨 Noir + Blanc + Or', sub: 'Luxe & sobre', def: true },
+        { val: 'red-grey', label: '🟥⬜ Rouge + Gris', sub: 'Puissant & technique', def: false },
+        { val: 'blue-white', label: '🟦⬜ Bleu clair + Blanc', sub: 'Tech & épuré', def: false },
+        { val: 'custom', label: 'Personnalisé', sub: 'Donnez vos couleurs', def: false, input: true, inputPh: 'Ex: #ff6600 et #1a237e' }
+      ],
+      multi: true
+    },
+    {
+      id: 'style', label: 'Style visuel', desc: "Quelle ambiance pour le site ?",
+      type: 'choices', options: [
+        { val: 'pro', label: '💼 Professionnel & sobre', sub: 'Lignes nettes, sérieux', def: true },
+        { val: 'modern', label: '🚀 Moderne & dynamique', sub: 'Animations, audacieux', def: false },
+        { val: 'creative', label: '🎨 Créatif & coloré', sub: 'Original, qui démarque', def: false },
+        { val: 'minimal', label: '◻️ Minimaliste', sub: 'Épuré, beaucoup d\'espace', def: false }
+      ]
+    }
+  ],
+  // Step 1: Contenu
+  [
+    {
+      id: 'sections', label: 'Sections de la page d\'accueil', desc: "Choisissez les rubriques à afficher",
+      type: 'checkboxes', options: [
+        { val: 'hero', label: 'Hero', def: true },
+        { val: 'about', label: 'À propos', def: true },
+        { val: 'services', label: 'Services', def: true },
+        { val: 'portfolio', label: 'Réalisations', def: true },
+        { val: 'team', label: 'Équipe', def: false },
+        { val: 'testimonials', label: 'Témoignages', def: true },
+        { val: 'stats', label: 'Chiffres clés', def: false },
+        { val: 'faq', label: 'FAQ', def: false },
+        { val: 'blog', label: 'Blog / Actu', def: false },
+        { val: 'contact', label: 'Contact', def: true },
+        { val: 'clients', label: 'Marque clients', def: true }
+      ]
+    },
+    {
+      id: 'services', label: 'Vos services', desc: "Ajoutez vos services un par un",
+      type: 'services'
+    },
+    {
+      id: 'extraPages', label: 'Pages supplémentaires', desc: "En plus de l'accueil",
+      type: 'checkboxes', options: [
+        { val: 'legal', label: 'Mentions légales', def: true },
+        { val: 'faq', label: 'FAQ dédiée', def: false },
+        { val: 'recruit', label: 'Recrutement', def: false },
+        { val: 'gallery', label: 'Galerie photos', def: false },
+        { val: 'cgu', label: 'CGV / CGU', def: false }
+      ]
+    },
+    {
+      id: 'socials', label: 'Réseaux sociaux', desc: "Sélectionnez vos réseaux",
+      type: 'checkboxes', options: [
+        { val: 'facebook', label: 'Facebook', def: true },
+        { val: 'instagram', label: 'Instagram', def: true },
+        { val: 'linkedin', label: 'LinkedIn', def: true },
+        { val: 'tiktok', label: 'TikTok', def: false },
+        { val: 'youtube', label: 'YouTube', def: false },
+        { val: 'whatsapp', label: 'WhatsApp', def: true }
+      ]
+    }
+  ],
+  // Step 2: Technique
+  [
+    {
+      id: 'blog', label: 'Blog', desc: "Voulez-vous un blog pour le référencement ?",
+      type: 'choices', options: [
+        { val: 'admin', label: 'Oui, avec zone d\'admin (j\'écris)', def: true },
+        { val: 'managed', label: 'Oui, mais vous gérez les articles', def: false },
+        { val: 'none', label: 'Non, pas de blog', def: false }
+      ]
+    },
+    {
+      id: 'admin', label: 'Administration', desc: "Voulez-vous pouvoir modifier le site vous-même ?",
+      type: 'choices', options: [
+        { val: 'yes', label: 'Oui, admin complet (CRUD + dashboard)', def: true },
+        { val: 'no', label: 'Non, vous gérez tout', def: false }
+      ]
+    },
+    {
+      id: 'integrations', label: 'Intégrations', desc: "Connectez vos outils existants",
+      type: 'checkboxes', options: [
+        { val: 'whatsapp', label: 'WhatsApp — notifications leads', def: true },
+        { val: 'calendly', label: 'Calendly — prise de RDV', def: false },
+        { val: 'gtm', label: 'Google Analytics — déjà inclus', def: true },
+        { val: 'pixel', label: 'Facebook Pixel', def: false },
+        { val: 'newsletter', label: 'Newsletter (Mailchimp/Brevo)', def: false },
+        { val: 'payment', label: 'Paiement (Stripe/Paymee)', def: false },
+        { val: 'slack', label: 'Slack/Discord — notifications', def: false }
+      ]
+    },
+    {
+      id: 'otherFeat', label: 'Autres fonctionnalités', desc: "Quelque chose d'autre ?",
+      type: 'choices', options: [
+        { val: 'devis', label: 'Calculateur de devis', def: false },
+        { val: 'chat', label: 'Chat en direct', def: false },
+        { val: 'client-area', label: 'Espace client privé', def: false },
+        { val: 'booking', label: 'Système de réservation', def: false },
+        { val: 'forum', label: 'Forum / communauté', def: false },
+        { val: 'nothing', label: 'Rien de plus', def: true },
+        { val: 'custom', label: 'Autre (à préciser)', def: false, input: true, inputPh: 'Décrivez' }
+      ]
+    },
+    {
+      id: 'inspiration', label: 'Site d\'inspiration', desc: "Un site que vous aimez ?",
+      type: 'choices', options: [
+        { val: 'url', label: 'Oui, je donne une URL', def: false, input: true, inputPh: 'https://...' },
+        { val: 'image', label: 'Oui, j\'ai une capture / maquette', def: false },
+        { val: 'none', label: 'Non, on part de zéro', def: true }
+      ]
+    }
+  ],
+  // Step 3: Finalisation
+  [
+    {
+      id: 'mockup', label: 'Maquette / Design', desc: "Avez-vous une maquette Figma ou une image ?",
+      type: 'choices', options: [
+        { val: 'figma', label: 'Lien Figma', def: false, input: true, inputPh: 'https://www.figma.com/file/...' },
+        { val: 'image', label: 'Capture d\'écran (base64)', def: false, input: true, inputPh: 'Collez l\'image ici' },
+        { val: 'none', label: 'Pas de maquette', def: true }
+      ]
+    },
+    {
+      id: 'phone', label: 'Téléphone', desc: "Numéro de contact",
+      type: 'input', placeholder: '+216 XX XXX XXX', def: '+216 53 467 943'
+    },
+    {
+      id: 'email', label: 'Email', desc: "Adresse email de contact",
+      type: 'input', placeholder: 'contact@monagence.tn', def: 'contact@monagence.tn'
+    },
+    {
+      id: 'address', label: 'Adresse', desc: "Adresse physique (optionnelle)",
+      type: 'input', placeholder: 'Ville, Rue...', def: ''
+    },
+    {
+      id: 'hosting', label: 'Hébergement', desc: "Où sera hébergé le site ?",
+      type: 'choices', options: [
+        { val: 'unknown', label: 'Je ne sais pas encore', def: true },
+        { val: 'shared', label: 'Hébergement mutualisé', def: false },
+        { val: 'vps', label: 'VPS / serveur dédié', def: false },
+        { val: 'other', label: 'Autre', def: false, input: true, inputPh: 'Précisez' }
+      ]
+    },
+    {
+      id: 'lang', label: 'Langue du site', desc: "Dans quelle(s) langue(s) ?",
+      type: 'choices', options: [
+        { val: 'fr', label: 'Français', def: true },
+        { val: 'en', label: 'Anglais', def: false },
+        { val: 'ar', label: 'Arabe', def: false },
+        { val: 'fr-en', label: 'Français + Anglais', def: false },
+        { val: 'fr-ar', label: 'Français + Arabe', def: false }
+      ]
+    }
+  ]
+];
+// ===== RENDER =====
+function renderStep(idx) {
+  const el = document.getElementById('step' + idx);
+  let html = '<div class="step-title">' + getStepTitle(idx) + '</div>';
+  steps[idx].forEach(q => {
+    html += '<div class="q-card">';
+    html += '<div class="q-label">' + q.label + '</div>';
+    if (q.desc) html += '<div class="q-desc">' + q.desc + '</div>';
+    html += renderQuestion(q);
+    html += '</div>';
+  });
+  html += '<div class="btn-row">';
+  if (idx > 0) html += '<button class="btn btn-ghost" onclick="goToStep(' + (idx - 1) + ')">← Précédent</button>';
+  html += '<button class="btn btn-primary" id="nextBtn' + idx + '" onclick="nextStep(' + idx + ')">' + (idx < 3 ? 'Suivant →' : 'Voir le résumé') + '</button>';
+  html += '</div>';
+  el.innerHTML = html;
+}
+function getStepTitle(idx) {
+  const titles = ['Étape 1 — Identité', 'Étape 2 — Contenu', 'Étape 3 — Technique', 'Étape 4 — Finalisation'];
+  return titles[idx];
+}
+function renderQuestion(q) {
+  if (q.type === 'choices') return renderChoices(q);
+  if (q.type === 'checkboxes') return renderCheckboxes(q);
+  if (q.type === 'services') return renderServices(q);
+  if (q.type === 'input') return renderInput(q);
+  return '';
+}
+function renderChoices(q) {
+  const isColor = q.id === 'colors';
+  const cols = isColor ? 'col3' : 'single';
+  const val = Array.isArray(data[q.id]) ? data[q.id] : [data[q.id]];
+  let html = '<div class="opt-grid ' + cols + '">';
+  q.options.forEach((o, i) => {
+    const selected = val.includes(o.val);
+    const letter = String.fromCharCode(65 + i);
+    html += '<div class="opt-card' + (selected ? ' selected' : '') + (o.def ? ' default' : '') + '" onclick="selectChoice(\'' + q.id + '\',\'' + o.val + '\',' + (q.multi ? 'true' : 'false') + ')">';
+    html += '<span class="badge">' + letter + '</span>';
+    if (o.sub) html += '<span style="display:block;font-size:12px;color:#5a596a;margin-top:2px">' + o.sub + '</span>';
+    html += o.label;
+    html += '</div>';
+  });
+  html += '</div>';
+  // Input for custom
+  q.options.forEach(o => {
+    if (o.input) {
+      const show = Array.isArray(data[q.id]) ? data[q.id].includes(o.val) : data[q.id] === o.val;
+      html += '<input class="q-input" id="input_' + q.id + '_' + o.val + '" placeholder="' + (o.inputPh || '') + '" style="' + (show ? '' : 'display:none') + '" oninput="updateCustom(\'' + q.id + '\',\'' + o.val + '\')">';
+    }
+  });
+  return html;
+}
+function renderCheckboxes(q) {
+  const val = data[q.id] || [];
+  let html = '<div class="check-grid">';
+  q.options.forEach(o => {
+    const checked = val.includes(o.val);
+    html += '<div class="check-item' + (checked ? ' checked' : '') + (o.def ? ' default' : '') + '" onclick="toggleCheck(\'' + q.id + '\',\'' + o.val + '\')">';
+    html += '<div class="box">' + (checked ? '✓' : '') + '</div>';
+    html += o.label;
+    html += '</div>';
+  });
+  html += '</div>';
+  return html;
+}
+function renderServices(q) {
+  let html = '<div class="service-list" id="svcList">';
+  (data.services || []).forEach((s, i) => {
+    html += '<div class="service-entry"><span>' + s.name + '</span><span class="del" onclick="removeService(' + i + ')">✕</span></div>';
+  });
+  html += '</div>';
+  html += '<div class="add-svc-btn" onclick="addService()">+ Ajouter un service</div>';
+  return html;
+}
+function renderInput(q) {
+  return '<input class="q-input" id="input_' + q.id + '" placeholder="' + (q.placeholder || '') + '" value="' + (data[q.id] || '') + '" oninput="data[\'' + q.id + '\']=this.value">';
+}
+// ===== INTERACTIONS =====
+function selectChoice(id, val, multi) {
+  if (multi) {
+    if (!data[id]) data[id] = [];
+    const arr = data[id];
+    const idx = arr.indexOf(val);
+    if (idx >= 0) arr.splice(idx, 1); else arr.push(val);
+    // Show/hide associated inputs
+    renderStep(currentStep);
+  } else {
+    data[id] = val;
+    renderStep(currentStep);
+  }
+  updateProgress();
+}
+function toggleCheck(id, val) {
+  if (!data[id]) data[id] = [];
+  const arr = data[id];
+  const idx = arr.indexOf(val);
+  if (idx >= 0) arr.splice(idx, 1); else arr.push(val);
+  renderStep(currentStep);
+  updateProgress();
+}
+function updateCustom(id, val) {
+  // custom input is stored in the input field
+}
+function addService() {
+  const name = prompt('Nom du service :');
+  if (!name || !name.trim()) return;
+  const pts = prompt('3 points clés (séparés par des virgules) :');
+  if (!data.services) data.services = [];
+  data.services.push({ name: name.trim(), points: pts ? pts.split(',').map(s => s.trim()) : [] });
+  renderStep(currentStep);
+  updateProgress();
+}
+function removeService(idx) {
+  data.services.splice(idx, 1);
+  renderStep(currentStep);
+  updateProgress();
+}
+// ===== NAVIGATION =====
+function nextStep(idx) {
+  if (idx < 3) {
+    goToStep(idx + 1);
+  } else {
+    showSummary();
+  }
+}
+function goToStep(idx) {
+  currentStep = idx;
+  document.querySelectorAll('.step').forEach(s => s.classList.remove('active'));
+  document.getElementById('step' + idx).classList.add('active');
+  document.querySelectorAll('.step-tab').forEach(t => t.classList.remove('active'));
+  document.querySelectorAll('.step-tab')[idx].classList.add('active');
+  renderStep(idx);
+  updateProgress();
+  document.getElementById('summarySection').classList.remove('active');
+  document.getElementById('summarySection').style.display = 'none';
+  document.getElementById('step' + idx).style.display = '';
+}
+function updateProgress() {
+  let answered = 0;
+  let total = 0;
+  steps.forEach(step => step.forEach(q => {
+    total++;
+    if (q.type === 'choices') {
+      if (Array.isArray(data[q.id]) && data[q.id].length) answered++;
+      else if (typeof data[q.id] === 'string' && data[q.id]) answered++;
+    } else if (q.type === 'checkboxes') {
+      if (data[q.id] && data[q.id].length) answered++;
+    } else if (q.type === 'services') {
+      if (data.services && data.services.length) answered++;
+    } else if (q.type === 'input') {
+      if (data[q.id]) answered++;
+    }
+  }));
+  const pct = Math.round((answered / total) * 100);
+  document.getElementById('progressFill').style.width = pct + '%';
+  document.querySelectorAll('.step-tab').forEach((t, i) => {
+    t.classList.remove('done');
+    if (i < currentStep) t.classList.add('done');
+  });
+}
+// ===== SUMMARY =====
+function showSummary() {
+  document.querySelectorAll('.step').forEach(s => { s.style.display = 'none'; s.classList.remove('active'); });
+  document.getElementById('summarySection').style.display = 'block';
+  document.getElementById('summarySection').classList.add('active');
+  const s = data;
+  let html = '';
+  html += summaryBlock('Identité', [
+    ['Entreprise', s.name || '—'],
+    ['Domaine', s.domain === 'auto' ? 'mon-agence.tn' : s.domain === 'later' ? 'À définir' : s.domain || '—'],
+    ['Logo', s.logo === 'none' ? 'Placeholder' : s.logo === 'upload' ? 'Image fournie' : s.logo === 'describe' ? 'À créer' : '—'],
+    ['Couleurs', Array.isArray(s.colors) ? s.colors.join(', ') : s.colors || '—'],
+    ['Style', s.style || '—']
+  ]);
+  html += summaryBlock('Contenu', [
+    ['Sections', (s.sections || []).join(', ')],
+    ['Services', (s.services || []).map(x => x.name).join(', ') || '—'],
+    ['Pages sup.', (s.extraPages || []).join(', ').replace(/legal/g,'Mentions légales').replace(/faq/g,'FAQ').replace(/recruit/g,'Recrutement').replace(/gallery/g,'Galerie').replace(/cgu/g,'CGV') || 'Aucune'],
+    ['Réseaux', (s.socials || []).join(', ') || '—']
+  ]);
+  html += summaryBlock('Technique', [
+    ['Blog', s.blog === 'admin' ? 'Oui (admin)' : s.blog === 'managed' ? 'Oui (géré)' : 'Non'],
+    ['Admin', s.admin === 'yes' ? 'Oui' : 'Non'],
+    ['Intégrations', (s.integrations || []).join(', ') || '—'],
+    ['Autres', s.otherFeat || '—'],
+    ['Inspiration', s.inspiration || 'Aucune']
+  ]);
+  html += summaryBlock('Finalisation', [
+    ['Téléphone', s.phone || '—'],
+    ['Email', s.email || '—'],
+    ['Adresse', s.address || '—'],
+    ['Hébergement', s.hosting || '—'],
+    ['Langue', s.lang || '—']
+  ]);
+  document.getElementById('summaryContent').innerHTML = html;
+}
+function summaryBlock(title, items) {
+  let html = '<div class="summary-card"><h3>' + title + '</h3>';
+  items.forEach(item => {
+    html += '<div class="summary-item"><span class="key">' + item[0] + ' :</span> <span class="val">' + item[1] + '</span></div>';
+  });
+  html += '</div>';
+  return html;
+}
+// ===== EXPORT =====
+function exportJSON() {
+  const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+  const a = document.createElement('a');
+  a.href = URL.createObjectURL(blob);
+  a.download = 'afkaar-gen-project.json';
+  a.click();
+  URL.revokeObjectURL(a.href);
+}
+// ===== INIT =====
+goToStep(0);
+</script>
+</body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,42 @@
+{
+  "name": "afkaar-gen",
+  "version": "1.0.0",
+  "description": "AI agent skill for generating PHP flat-file websites (type agence digitale). Works with Claude, opencode, and other AI coding agents.",
+  "keywords": [
+    "opencode",
+    "skill",
+    "claude",
+    "php",
+    "flat-file",
+    "website-generator",
+    "agence-digitale",
+    "afkars"
+  ],
+  "homepage": "https://github.com/iyed/afkaar_gen#readme",
+  "bugs": {
+    "url": "https://github.com/iyed/afkaar_gen/issues"
+  },
+  "license": "MIT",
+  "author": "Iyed <iyed@afkars.digital>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/iyed/afkaar_gen.git"
+  },
+  "files": [
+    "SKILL.md",
+    "references/",
+    "interactive.html",
+    "README.md"
+  ],
+  "bin": {
+    "afkaar-gen": "bin/interactive.js"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "opencode": {
+    "skill": true,
+    "name": "afkaar-gen",
+    "description": "Génère un site vitrine PHP flat-file (type agence digitale)"
+  }
+}