afkaar-gen 1.0.0

package/README.md

@@ -0,0 +1,65 @@
+# afkaar-gen — AI Agent Skill
+
+Generate beautiful PHP flat-file business websites (digital agency style) with an AI coding agent.
+
+## Installation
+
+### For AI agents (Claude, opencode, etc.)
+
+This skill can be installed via npm:
+
+```bash
+npx opencode add skill afkaar-gen
+```
+
+Or manually by copying to your skills directory:
+
+```bash
+git clone https://github.com/iyed/afkaar_gen.git ~/.claude/skills/afkaar-gen
+```
+
+### Usage with AI
+
+Ask your AI agent:
+
+> "Generate a website like afkars for my business"
+> "Create a digital agency website"
+> "Use afkaar-gen to build my site"
+
+The agent will:
+1. Scan your message for uploads (logos, screenshots, URLs)
+2. Ask you simple selection-based questions (A/B/C/D)
+3. Generate a complete PHP flat-file site
+4. Apply security best practices and SEO
+
+## Features
+
+- 4 inspiration modes: questionnaire, URL fetch, Figma, iteration
+- 17 questions in 4 grouped steps with A/B/C/D selections
+- PHP flat-file stack (no database needed, Hostinger-ready)
+- 20 security measures (CSRF, bcrypt, CSP, rate limiting, etc.)
+- SEO: sitemap.xml, JSON-LD, Open Graph, GTM
+- Lazy loading, responsive design, accessibility
+- Optional admin panel (CRUD services/references/leads/blog)
+- Customizable services and integrations (WhatsApp, Calendly, Stripe...)
+
+## Structure
+
+```
+afkaar-gen/
+├── SKILL.md                    # Main skill instructions
+├── package.json                # npm package
+├── references/
+│   ├── architecture.md         # Full directory structure & schemas
+│   ├── security-checklist.md   # 20 security measures
+│   ├── seo-guide.md            # SEO, sitemap, JSON-LD
+│   ├── questions.md            # 17 selection-based questions
+│   ├── integrations.md         # WhatsApp, Stripe, Calendly...
+│   ├── inspiration-mode.md     # URL fetch & analysis
+│   ├── figma-mode.md           # Figma screenshot/API
+│   └── iteration-mode.md       # Modify existing site
+```
+
+## License
+
+MIT

package/SKILL.md

@@ -0,0 +1,80 @@
+---
+name: afkaar-gen
+description: >
+  Génère un site vitrine PHP flat-file (type agence digitale) en posant
+  des questions simples. Utilise quand l'utilisateur dit : "génère un
+  site", "create a site like afkars", "comme afkars", ou donne une
+  URL/mockup d'inspiration.
+---
+
+# afkaar-gen — Générateur de site vitrine PHP flat-file
+
+## Règles de dialogue (TRÈS IMPORTANT)
+
+- **AVANT toute question, scanner les uploads du message** : base64 images (les lire via Read), URLs, fichiers attachés
+- **Ne JAMAIS demander ce qui a déjà été fourni** — si l'utilisateur a envoyé un logo en image, ne pas demander "avez-vous un logo ?"
+- **Toujours proposer des choix (A/B/C/D)** — l'utilisateur répond par une lettre
+- **Ne jamais poser une question ouverte sans suggestions**
+- **Si l'utilisateur répond hors choix** → l'accepter et continuer
+- **Si "je sais pas"** → prendre l'option par défaut (marquée ★)
+- **Regrouper 3-4 questions par message**, pas 1 par 1
+- **Langage simple** : pas de "slug", "JSON", "SEO" — dire "adresse de la page", "texte pour Google"
+- **Enchaîner** : question → réponse → immédiatement la suivante
+
+## Flux
+
+0. **Scanner les uploads déjà présents** (AVANT toute question !) :
+   - Si le message contient une image base64 → la lire avec l'outil Read (Claude voit l'image), extraire logo, couleurs, style
+   - Si le message contient une URL (http/https) → mode inspiration URL, fetch + analyse
+   - Si le message contient un lien Figma → mode Figma (demander screenshot si pas token)
+   - Si le message contient des fichiers attachés → les lire et extraire les infos
+   - Les infos trouvées pré-remplissent le questionnaire → l'agent ne repose pas les questions déjà répondues
+1. **Détecter langue** (FR/EN). Si indéterminé → FR.
+2. **Détecter le mode** (non fait à l'étape 0) :
+   - Sinon → mode questionnaire
+3. **Lancer questionnaire** (4 étapes, TOUJOURS avec suggestions A/B/C/D, voir `references/questions.md`)
+   - **Ne PAS reposer une question si l'utilisateur a déjà fourni l'info** (logo, URL, couleurs...)
+4. **Afficher résumé structuré**, demander confirmation
+5. **Générer le site** (structure dans `references/architecture.md`)
+6. **Valider** (`php -l`, checklist sécurité, credentials dans config.php uniquement)
+7. **README + instructions déploiement**
+
+## Règles absolues
+
+- Chaque `<img>` DOIT avoir `loading="lazy"` + `decoding="async"`
+- Tous les credentials (API keys, tokens, passwords) UNIQUEMENT dans `config.php`
+- Les fichiers `data/*.json` ne contiennent JAMAIS de secrets
+- Tout output utilisateur passe par `htmlspecialchars()` (helper `e()`)
+- CSRF token 32 bytes sur TOUS les formulaires
+- Anti brute-force : session (5/10min) + IP (12/15min)
+- Honeypot + timer 3s sur formulaire contact
+- `.htaccess` bloque `data/`, `core/`, `templates/`
+- Aucun commentaire dans le code généré
+- PHP `declare(strict_types=1)` en tête de chaque fichier
+- Pas de mention d'hébergeur spécifique dans le code
+
+## Si mode "itération" (modifier site existant)
+
+- Lire les fichiers existants
+- Appliquer uniquement les modifications demandées
+- Ne pas régénérer l'intégralité
+
+## Validation post-génération
+
+Vérifier que :
+- `php -l` passe sur tous les fichiers `.php`
+- `index.php` ne fait pas d'erreur PHP
+- `config.php` a `APP_URL`, `MAIL_TO`, `MAIL_FROM` définis
+- `.htaccess` bloque `data/`, `core/`, `templates/`
+- Aucun mot de passe / clé API dans `data/*.json`
+- Toutes les images ont `loading="lazy"`
+- Le formulaire contact a `csrf_check()`
+- Les templates utilisent `e()` pour tout output
+- Le `sitemap.xml` route existe dans le routeur
+
+## Gestion des fichiers
+
+Pour toute opération de fichier, utiliser les outils suivants :
+- **Créer un dossier** : `New-Item -ItemType Directory -Path "chemin" -Force`
+- **Créer/écrire un fichier** : utiliser l'outil Write
+- **Copier un template** : lire le fichier source avec Read, puis écrire avec Write

package/bin/interactive.js

@@ -0,0 +1,10 @@
+#!/usr/bin/env node
+const { exec } = require('child_process');
+const path = require('path');
+const htmlPath = path.join(__dirname, '..', 'interactive.html');
+const cmd = process.platform === 'win32' ? `start "" "${htmlPath}"` :
+            process.platform === 'darwin' ? `open "${htmlPath}"` :
+            `xdg-open "${htmlPath}"`;
+exec(cmd, err => {
+  if (err) console.log('Ouvrez ce fichier dans votre navigateur :\n' + htmlPath);
+});