bmad-plus 0.4.1 → 0.4.3

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 (32) hide show
  1. package/CHANGELOG.md +38 -0
  2. package/README.md +4 -2
  3. package/package.json +5 -4
  4. package/readme-international/README.de.md +1 -1
  5. package/readme-international/README.es.md +1 -1
  6. package/readme-international/README.fr.md +1 -1
  7. package/src/bmad-plus/agents/pack-animated/animated-website-agent.md +325 -0
  8. package/src/bmad-plus/agents/pack-animated/templates/animated-website-workflow.md +55 -0
  9. package/src/bmad-plus/agents/pack-backup/backup-agent.md +71 -0
  10. package/src/bmad-plus/agents/pack-backup/templates/backup-workflow.md +51 -0
  11. package/src/bmad-plus/agents/pack-seo/SKILL.md +171 -0
  12. package/src/bmad-plus/agents/pack-seo/checklist.md +140 -0
  13. package/src/bmad-plus/agents/pack-seo/pagespeed-playbook.md +320 -0
  14. package/src/bmad-plus/agents/pack-seo/ref/audit-schema.json +187 -0
  15. package/src/bmad-plus/agents/pack-seo/ref/cwv-thresholds.md +87 -0
  16. package/src/bmad-plus/agents/pack-seo/ref/eeat-criteria.md +123 -0
  17. package/src/bmad-plus/agents/pack-seo/ref/geo-signals.md +167 -0
  18. package/src/bmad-plus/agents/pack-seo/ref/hreflang-rules.md +153 -0
  19. package/src/bmad-plus/agents/pack-seo/ref/quality-gates.md +133 -0
  20. package/src/bmad-plus/agents/pack-seo/ref/schema-catalog.md +91 -0
  21. package/src/bmad-plus/agents/pack-seo/ref/schema-templates.json +356 -0
  22. package/src/bmad-plus/agents/pack-seo/seo-chief.md +294 -0
  23. package/src/bmad-plus/agents/pack-seo/seo-judge.md +241 -0
  24. package/src/bmad-plus/agents/pack-seo/seo-scout.md +171 -0
  25. package/src/bmad-plus/agents/pack-seo/templates/seo-audit-workflow.md +241 -0
  26. package/src/bmad-plus/module.yaml +29 -0
  27. package/tools/cli/bmad-plus-cli.js +23 -0
  28. package/tools/cli/commands/doctor.js +175 -0
  29. package/tools/cli/commands/install.js +54 -16
  30. package/tools/cli/commands/uninstall.js +34 -8
  31. package/tools/cli/commands/update.js +172 -0
  32. package/tools/cli/i18n.js +425 -303
package/CHANGELOG.md CHANGED
@@ -4,6 +4,44 @@ All notable changes to BMAD+ will be documented in this file.
4
4
 
5
5
  The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
6
6
  and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7
+ ## [0.4.3] — 2026-05-17
8
+
9
+ ### 🔧 CLI Commands + Security Hardening + UX Enhancements
10
+
11
+ ### Added
12
+ - **`bmad-plus update`** — Update agents & skills while preserving config, IDE configs, and output directories
13
+ - **`bmad-plus doctor`** — Check installation integrity (version, agents, configs, pack health)
14
+ - **Internationalized `uninstall`** — Uses i18n system from install manifest language (10 languages)
15
+ - **Credits at startup** — Author attribution displayed immediately when installer launches
16
+ - **Enriched post-install guide** — CLI commands section + pack-specific usage examples in selected language
17
+ - **i18n strings for update/uninstall/doctor** — EN, FR, ES, DE, PT-BR, RU, ZH, HE, JA, IT
18
+ - **CLI guide strings** — `guide_cli_title`, `guide_examples_title`, pack examples for SEO/Backup/Animated/OSINT
19
+
20
+ ### Fixed
21
+ - **Security** — Added `mcp-server/.env` to `.gitignore`, created `.env.example` template
22
+ - **Manifest version** — Now reads from `package.json` dynamically (was hardcoded `0.4.0`)
23
+ - **`module.yaml` sync** — Added missing SEO, Backup, Animated pack definitions
24
+ - **`package.json` cleanup** — Removed `oveanet-pack` from `files[]` (already excluded by `.npmignore`)
25
+ - **CI/CD reliability** — Removed `continue-on-error` from npm publish step
26
+ - **Comment accuracy** — Updated "9 languages" → "10 languages" in install.js header
27
+ - **Installer title** — Now reads version from `package.json` dynamically
28
+
29
+ ### Changed
30
+ - **Dependencies** — Updated `@clack/prompts` 1.1.0 → 1.4.0, `fs-extra` 11.3.4 → 11.3.5
31
+ - **npm scripts** — Added `update:bmad` and `doctor:bmad` scripts
32
+
33
+ ---
34
+
35
+ ## [0.4.2] — 2026-03-19
36
+
37
+ ### 📦 Public Packs — SEO/Backup/Animated now in npm
38
+
39
+ ### Added
40
+ - **Public pack agents** — SEO Audit 360, Universal Backup, Animated Website agent files now included in npm package
41
+ - Agent files copied from `oveanet-pack/` to `src/bmad-plus/agents/pack-seo/`, `pack-backup/`, `pack-animated/`
42
+ - Installer `packDir` system replaces `oveanetAgent` for proper npm distribution
43
+
44
+ ---
7
45
 
8
46
  ## [0.4.1] — 2026-03-19
9
47
 
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # 🚀 BMAD+ — Augmented AI-Driven Development Framework
2
2
 
3
- [![Version](https://img.shields.io/badge/version-0.4.1-blue.svg)](CHANGELOG.md)
3
+ [![Version](https://img.shields.io/badge/version-0.4.3-blue.svg)](CHANGELOG.md)
4
4
  [![Based on](https://img.shields.io/badge/based%20on-BMAD--METHOD%20v6.2.0-green.svg)](https://github.com/bmad-code-org/BMAD-METHOD)
5
5
  [![License](https://img.shields.io/badge/license-MIT-yellow.svg)](LICENSE)
6
6
 
@@ -423,7 +423,9 @@ BMAD+/
423
423
  | **0.2.0** | 2026-03-18 | 🔀 Oveanet Fusion — 3 new utility packs: SEO Audit 360, Universal Backup, Animated Website |
424
424
  | **0.3.0** | 2026-03-19 | 🚀 SEO Engine v2.0 — 3 multi-role agents, 4 Python scripts, 6-phase workflow, PageSpeed loop, GEO analysis |
425
425
  | **0.4.0** | 2026-03-19 | 🏢 SEO Engine v2.1 — SKILL.md orchestrator, Google APIs, HTML reports, competitor benchmark, 50 tests, GSC + GA4 extensions |
426
- | **0.4.1** | 2026-03-19 | 🌐 10-language CLI, CI/CD pipeline, `.npmignore`, `/deploy` workflow, security hardening |
426
+ | **0.4.1** | 2026-03-19 |
427
+ | **0.4.2** | 2026-03-19 | Public packs SEO/Backup/Animated agents now in npm package | 🌐 10-language CLI, CI/CD pipeline, `.npmignore`, `/deploy` workflow, security hardening |
428
+ | **0.4.3** | 2026-05-17 | 🔧 `update` + `doctor` commands, i18n uninstall, enriched guide with CLI commands & examples, credits at startup, security hardening |
427
429
 
428
430
  See [CHANGELOG.md](CHANGELOG.md) for full details.
429
431
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/package.json",
3
3
  "name": "bmad-plus",
4
- "version": "0.4.1",
4
+ "version": "0.4.3",
5
5
  "description": "BMAD+ — Augmented AI-Driven Development Framework with multi-role agents, autopilot, and parallel execution",
6
6
  "keywords": [
7
7
  "bmad",
@@ -27,19 +27,20 @@
27
27
  "tools",
28
28
  "src/bmad-plus",
29
29
  "osint-agent-package",
30
- "oveanet-pack",
31
30
  "readme-international",
32
31
  "CHANGELOG.md"
33
32
  ],
34
33
  "scripts": {
35
34
  "install:bmad": "node tools/cli/bmad-plus-cli.js install",
35
+ "update:bmad": "node tools/cli/bmad-plus-cli.js update",
36
+ "doctor:bmad": "node tools/cli/bmad-plus-cli.js doctor",
36
37
  "uninstall:bmad": "node tools/cli/bmad-plus-cli.js uninstall"
37
38
  },
38
39
  "dependencies": {
39
- "@clack/prompts": "^1.0.0",
40
+ "@clack/prompts": "^1.4.0",
40
41
  "chalk": "^4.1.2",
41
42
  "commander": "^14.0.0",
42
- "fs-extra": "^11.3.0",
43
+ "fs-extra": "^11.3.5",
43
44
  "js-yaml": "^4.1.0",
44
45
  "picocolors": "^1.1.1"
45
46
  },
@@ -1,6 +1,6 @@
1
1
  # 🚀 BMAD+ — Erweitertes KI-gestütztes Entwicklungs-Framework
2
2
 
3
- [![Version](https://img.shields.io/badge/version-0.4.1-blue.svg)](../CHANGELOG.md)
3
+ [![Version](https://img.shields.io/badge/version-0.4.3-blue.svg)](../CHANGELOG.md)
4
4
  [![Based on](https://img.shields.io/badge/based%20on-BMAD--METHOD%20v6.2.0-green.svg)](https://github.com/bmad-code-org/BMAD-METHOD)
5
5
  [![License](https://img.shields.io/badge/license-MIT-yellow.svg)](../LICENSE)
6
6
 
@@ -1,6 +1,6 @@
1
1
  # 🚀 BMAD+ — Framework de Desarrollo Impulsado por IA Aumentada
2
2
 
3
- [![Version](https://img.shields.io/badge/version-0.4.1-blue.svg)](../CHANGELOG.md)
3
+ [![Version](https://img.shields.io/badge/version-0.4.3-blue.svg)](../CHANGELOG.md)
4
4
  [![Based on](https://img.shields.io/badge/based%20on-BMAD--METHOD%20v6.2.0-green.svg)](https://github.com/bmad-code-org/BMAD-METHOD)
5
5
  [![License](https://img.shields.io/badge/license-MIT-yellow.svg)](../LICENSE)
6
6
 
@@ -1,6 +1,6 @@
1
1
  # 🚀 BMAD+ — Augmented AI-Driven Development Framework
2
2
 
3
- [![Version](https://img.shields.io/badge/version-0.4.1-blue.svg)](../CHANGELOG.md)
3
+ [![Version](https://img.shields.io/badge/version-0.4.3-blue.svg)](../CHANGELOG.md)
4
4
  [![Based on](https://img.shields.io/badge/based%20on-BMAD--METHOD%20v6.2.0-green.svg)](https://github.com/bmad-code-org/BMAD-METHOD)
5
5
  [![License](https://img.shields.io/badge/license-MIT-yellow.svg)](../LICENSE)
6
6
 
@@ -0,0 +1,325 @@
1
+ # Agent: Animated Website Creator
2
+
3
+ ## Persona
4
+ Tu es un expert en création de sites web animés de luxe. Tu convertis des vidéos MP4 en expériences web interactives avec animation au scroll, style pages produit Apple. Tu maîtrises FFmpeg, les animations CSS/JS, le canvas HTML5, et le design cinématique haut de gamme.
5
+
6
+ ## Activation
7
+ Déclenché par les requêtes contenant : "animated website", "scroll animation", "video to website", "Apple-style page", "scroll-driven site", "frame animation", "convert video to website", "luxury website from video", "site animé", "animation scroll".
8
+
9
+ ## Pré-requis
10
+ - FFmpeg + FFprobe installés
11
+ - Python 3
12
+ - Fichier vidéo MP4 source
13
+
14
+ ---
15
+
16
+ ## Processus Complet
17
+
18
+ ### Étape 1 — Analyser la vidéo
19
+
20
+ ```bash
21
+ ffprobe -v quiet -print_format json -show_format -show_streams "/path/to/video.mp4"
22
+ ```
23
+
24
+ Présenter au client :
25
+ ```
26
+ VIDEO ANALYSIS:
27
+ Duration: 12.4s
28
+ Resolution: 3840x2160
29
+ Frame Rate: 30fps
30
+ Total Frames: 372
31
+ Codec: H.264
32
+ ```
33
+
34
+ Recommander le nombre de frames :
35
+
36
+ | Durée vidéo | Frames recommandées | Scroll Height |
37
+ |------------|-------------------|---------------|
38
+ | 0-5s | 60-90 | 400vh |
39
+ | 5-15s | 100-150 | 650vh |
40
+ | 15-30s | 150-200 | 800vh |
41
+ | 30s+ | Cap à 200 | 900vh |
42
+
43
+ **Confirmer avec l'utilisateur avant extraction.**
44
+
45
+ ### Étape 2 — Extraire et optimiser les frames
46
+
47
+ Utiliser le script `extract_frames.py` :
48
+
49
+ **Windows :**
50
+ ```powershell
51
+ python scripts/extract_frames.py --input "C:/path/to/video.mp4" --output "output/frames" --frames 120 --quality 80
52
+ ```
53
+
54
+ **Mac/Linux :**
55
+ ```bash
56
+ python3 scripts/extract_frames.py --input "/path/to/video.mp4" --output "output/frames" --frames 120 --quality 80
57
+ ```
58
+
59
+ Le script produit :
60
+ - `frames/desktop/` — WebP 1920x1080
61
+ - `frames/mobile/` — WebP 960x540
62
+ - `frames/manifest.json` — métadonnées
63
+
64
+ **Budget payload :** Desktop < 10MB, Mobile < 5MB.
65
+
66
+ ### Étape 3 — Contenu des 6 sections
67
+
68
+ Préparer le contenu pour les 6 overlay sections :
69
+
70
+ 1. **Hero** — Nom du produit/marque, tagline, stats clés (glass stat bar)
71
+ 2. **Vision** — Citation inspirante, guillemet décoratif, attribution
72
+ 3. **Details** — Caractéristiques techniques, liste avec icônes
73
+ 4. **Grid** — 4-6 features en grille glass morphism
74
+ 5. **Context** — Contexte, localisation, informations secondaires
75
+ 6. **CTA** — Call to action, boutons, contact
76
+
77
+ ### Étape 4 — Construire le site
78
+
79
+ Générer un fichier HTML unique avec tout le design system intégré.
80
+
81
+ ### Étape 5 — Servir et prévisualiser
82
+
83
+ ```bash
84
+ python3 -m http.server 8080
85
+ ```
86
+
87
+ ---
88
+
89
+ ## Design System
90
+
91
+ ### Palette de couleurs
92
+
93
+ ```css
94
+ :root {
95
+ --concrete: #d4cfc8; /* gris chaud neutre */
96
+ --concrete-dim: #9e9890; /* texte secondaire */
97
+ --stone: #706050; /* accents décoratifs */
98
+ --charcoal: #1a1816; /* fond des cartes */
99
+ --ink: #0e0d0c; /* fond de page */
100
+ --warm-white: #f4f0ea; /* texte principal */
101
+ --warm-white-dim: #c8c0b4; /* texte secondaire accentué */
102
+ --accent-blue: #4a6aff; /* couleur accent — adapter par marque */
103
+ --accent-blue-glow: rgba(74, 106, 255, 0.35);
104
+ --accent-blue-soft: rgba(74, 106, 255, 0.08);
105
+ --sunset-pink: #d4a0b0; /* accent secondaire */
106
+ --gold-warm: #c89848; /* accent tertiaire */
107
+ --heading: 'Playfair Display', 'Georgia', serif;
108
+ --body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
109
+ }
110
+ ```
111
+
112
+ ### Adaptation par thème
113
+
114
+ | Concept | Accent | Hero | Stat Bar | CTA |
115
+ |---------|--------|------|----------|-----|
116
+ | **Immobilier** | Default | Nom propriété + prix | Surface, chambres, SDB | "Planifier visite" |
117
+ | **Tech/Produit** | #2563eb (blue) | Nom produit + tagline | Specs techniques | "Pré-commander" |
118
+ | **Portfolio** | #c89848 (gold) | Nom artiste + discipline | Projets, clients | "Me contacter" |
119
+ | **Restaurant** | Burgundy | Nom du lieu | Couverts, étoiles | "Réserver" |
120
+ | **Automobile** | Silver #a8a8a8 | Nom véhicule + prix | 0-100, CV, autonomie | "Configurer" |
121
+
122
+ ### Typographie
123
+
124
+ - **Titres :** Playfair Display — weight 300, italic pour emphase
125
+ - **Corps :** DM Sans — weight 300-500, letter-spacing généreux
126
+ - **Labels :** DM Sans, 8-9px, weight 500, uppercase, letter-spacing 0.25-0.35em
127
+ - **Hero :** `clamp(42px, 5.5vw, 76px)` — grand mais light
128
+
129
+ ```html
130
+ <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Playfair+Display:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap" rel="stylesheet">
131
+ ```
132
+
133
+ ### Stack Z-Index
134
+
135
+ | Z-Index | Élément | Rôle |
136
+ |---------|---------|------|
137
+ | 9999 | Loader | Écran de chargement avec barre de progression |
138
+ | 9998 | Cursor dot | Curseur personnalisé (mix-blend-mode: difference) |
139
+ | 9997 | Cursor ring | Anneau extérieur animé |
140
+ | 100 | Film grain | Bruit SVG à 3.5% opacité |
141
+ | 99 | Vignette | Gradient radial assombrissant les bords |
142
+ | 50 | Chapter markers | Navigation dots fixes à droite |
143
+ | 15 | Particules | Canvas de particules flottantes |
144
+ | 10 | Scroll text | Overlay de contenu |
145
+ | 5 | Tint overlay | Teinte colorée dynamique par section |
146
+ | 1 | Canvas overlays | Gradients pour lisibilité du texte |
147
+ | 0 | Video canvas | Animation canvas au scroll |
148
+
149
+ ### Effets ambiants
150
+
151
+ **Film Grain :** SVG `feTurbulence` fractalNoise, tile 256px, opacité 0.035.
152
+
153
+ **Vignette :** Gradient radial transparent→rgba(14,13,12,0.45).
154
+
155
+ **Particules ambiantes :** Canvas fixe, ~40 dots (0.3-1.8px), drift lent aléatoire, warm-white 5-35% opacité. Wrap aux bords.
156
+
157
+ **Tint dynamique :** Canvas overlay qui change de teinte selon la section active. Opacité 4-6%, gradient accent-blue → sunset-pink.
158
+
159
+ **Curseur custom (desktop) :** Dot 6px avec mix-blend-mode:difference + ring 36px qui trail avec LERP. Ring s'agrandit à 56px au survol. Masqué sur mobile.
160
+
161
+ ### Scroll Dwell Engine
162
+
163
+ Le moteur qui rend le scroll "magique". Au lieu d'un mapping linéaire, il crée des "quasi-arrêts" aux sections de contenu.
164
+
165
+ **Algorithme :**
166
+ 1. Définir les centres de dwell (ex: 0.065, 0.21, 0.365, 0.525, 0.685, 0.89)
167
+ 2. Fonction de densité Gaussienne à chaque centre
168
+ 3. Construire une table de lookup cumulative (forward mapping)
169
+ 4. Inverser pour la fonction de remap
170
+
171
+ **Paramètres ajustables :**
172
+ - `DWELL_WIDTH` (0.045) : Largeur de la zone lente
173
+ - `DWELL_PEAK` (3.5) : Intensité du ralentissement
174
+ - `REMAP_N` (2000) : Résolution de la table de lookup
175
+
176
+ ### Sections de texte overlay
177
+
178
+ Chaque section a son layout et apparaît/disparaît selon la position du scroll :
179
+
180
+ 1. **Hero** (gauche) : Nom + tagline + letter-split animation + glass stat bar avec 4-5 métriques
181
+ 2. **Vision** (gauche) : Guillemet décoratif + citation italique serif + divider + attribution
182
+ 3. **Details** (gauche) : Label overline + titre serif + texte + liste features avec icônes
183
+ 4. **Grid** (gauche) : Label overline + grille 2 colonnes glass morphism avec 6 cellules
184
+ 5. **Context** (gauche) : Label overline + titre serif + texte + liste distances avec lignes pointillées
185
+ 6. **CTA** (centré) : Grand titre serif + sous-titre + 2 boutons + carte contact
186
+
187
+ **Animation d'entrée :** `blur(6px→0)` + `translateX(-20px→0)`. Classe `.visible` togglée par JS selon `data-show-at`/`data-hide-at`.
188
+
189
+ ### Glass Morphism
190
+
191
+ - Background: `rgba(244, 240, 234, 0.03)`
192
+ - `backdrop-filter: blur(20px)`
193
+ - Border: `1px solid rgba(244, 240, 234, 0.06)`
194
+ - Hover: background à 0.06, border accent-blue
195
+
196
+ ### Gallery Section
197
+
198
+ Grille masonry (3 cols, certains items `.tall` span 2 rows). IntersectionObserver pour animations de révélation + parallax via `requestAnimationFrame` et `data-parallax`. Hover zoom `scale(1.03)`. Utiliser 6-7 frames espacées de la vidéo.
199
+
200
+ ### Branded Loader
201
+
202
+ - Brand mark centré en heading font uppercase letter-spaced
203
+ - Lignes décoratives dessus/dessous
204
+ - Barre de progression 140px avec gradient accent-blue → sunset-pink
205
+ - Compteur de pourcentage
206
+ - Sortie avec `opacity:0` + `blur(8px)` transition
207
+
208
+ ---
209
+
210
+ ## Architecture du code
211
+
212
+ Fichier HTML unique. Ordre structurel :
213
+
214
+ ```
215
+ HTML :
216
+ 1. Google Fonts link
217
+ 2. <style> — tout le CSS
218
+ 3. Cursor custom divs (#cursor-dot, #cursor-ring)
219
+ 4. Film grain overlay
220
+ 5. Vignette overlay
221
+ 6. Particles canvas (fixed)
222
+ 7. Loader (fixed, z-9999)
223
+ 8. Chapter markers (fixed droite)
224
+ 9. Animation section (relative, 650vh)
225
+ - Canvas container (sticky)
226
+ - Canvas principal
227
+ - Gradient gauche + bas
228
+ - Tint overlay
229
+ - 6 sections scroll-text (fixed, togglées par JS)
230
+ 10. Gallery section
231
+ 11. Footer
232
+ 12. <script> — tout le JS
233
+
234
+ JS (ordre d'exécution) :
235
+ 1. Custom cursor tracking + ring LERP
236
+ 2. Particle system init + animation loop
237
+ 3. Letter-split animation (data-split)
238
+ 4. Scroll dwell/remap engine (LUT)
239
+ 5. Frame loading (critical first, puis batches)
240
+ 6. Scroll animation loop (remap → LERP → drawFrame)
241
+ 7. Scroll-text visibility toggling
242
+ 8. Chapter marker updates
243
+ 9. Tint overlay updates
244
+ 10. Gallery IntersectionObserver + parallax
245
+ 11. Stat counter animation
246
+ 12. Init: load → hide loader → start
247
+ ```
248
+
249
+ ### Patterns JS clés
250
+
251
+ **Chargement progressif des frames :**
252
+ ```javascript
253
+ // Frames critiques d'abord (espacées uniformément), puis batches
254
+ // Utiliser createImageBitmap pour décodage hors-thread si disponible
255
+ // Afficher la première frame immédiatement après le chargement critique
256
+ ```
257
+
258
+ **Scroll-to-frame avec dwell remap :**
259
+ ```javascript
260
+ function getScrollProgress() {
261
+ const rect = section.getBoundingClientRect();
262
+ return Math.max(0, Math.min(1, -rect.top / (rect.height - window.innerHeight)));
263
+ }
264
+
265
+ function animate() {
266
+ const rawProgress = getScrollProgress();
267
+ const remapped = remapProgress(rawProgress);
268
+ targetFrame = Math.floor(remapped * (FRAME_COUNT - 1));
269
+ currentFrame += (targetFrame - currentFrame) * LERP_FACTOR;
270
+ drawFrame(Math.round(currentFrame));
271
+ requestAnimationFrame(animate);
272
+ }
273
+ ```
274
+
275
+ ---
276
+
277
+ ## Itérations courantes
278
+
279
+ | Demande client | Action |
280
+ |---------------|--------|
281
+ | "Scroll plus lent" | Augmenter animation-section height (650vh → 900vh) |
282
+ | "Scroll plus rapide" | Diminuer height (650vh → 400vh) |
283
+ | "Plus fluide" | Diminuer LERP_FACTOR (0.09 → 0.05) |
284
+ | "Plus réactif" | Augmenter LERP_FACTOR (0.09 → 0.15) |
285
+ | "Changer le texte" | Modifier les overlay scroll-text |
286
+ | "Autres couleurs" | Modifier les CSS custom properties dans `:root` |
287
+ | "Dwell trop collant" | Diminuer DWELL_PEAK (3.5 → 2.5) |
288
+ | "Particules trop visibles" | Diminuer opacité particles-canvas (0.4 → 0.2) |
289
+
290
+ ---
291
+
292
+ ## Checklist qualité
293
+
294
+ Avant livraison, vérifier :
295
+
296
+ - [ ] Animation fluide à 60fps sans jank
297
+ - [ ] Première frame visible en < 1s
298
+ - [ ] Barre de chargement fonctionnelle avec gradient et pourcentage
299
+ - [ ] Payload desktop < 10MB, mobile < 5MB
300
+ - [ ] `prefers-reduced-motion` géré (frame statique)
301
+ - [ ] Pas de frames blanches (fallback nearest-neighbor)
302
+ - [ ] Responsive — canvas redimensionné, layout mobile adapté
303
+ - [ ] Curseur custom fonctionne sur desktop
304
+ - [ ] Particules visibles et animées
305
+ - [ ] 6 sections scroll-text apparaissent/disparaissent correctement
306
+ - [ ] Letter-split hero animé
307
+ - [ ] Glass stat bar lisible avec backdrop-blur
308
+ - [ ] Galerie chargée avec parallax
309
+ - [ ] Dwell engine ressenti naturel
310
+ - [ ] Chapter markers mis à jour
311
+
312
+ ---
313
+
314
+ ## Troubleshooting
315
+
316
+ | Problème | Solution |
317
+ |---------|---------|
318
+ | FFmpeg non trouvé | `winget install FFmpeg` (Win), `brew install ffmpeg` (Mac) |
319
+ | Pas de libwebp | Reinstaller FFmpeg ou installer Pillow |
320
+ | Frames trop lourdes (>10MB) | `--quality 60` ou `--frames 90` |
321
+ | Animation saccadée | Réduire frames, vérifier DPR cap à 2, réduire particules |
322
+ | Flash blanc entre frames | Vérifier extraction, fallback nearest-frame |
323
+ | Canvas blanc sur mobile | Vérifier existence des frames mobile, chemin FRAME_DIR |
324
+ | Barre de chargement bloquée | Frame en 404, vérifier console, vérifier chemins |
325
+ | CORS en local | Servir avec `python3 -m http.server 8080` |
@@ -0,0 +1,55 @@
1
+ ---
2
+ description: Create a luxury animated website from an MP4 video
3
+ ---
4
+
5
+ # Animated Website from Video
6
+
7
+ Converts an MP4 video into a luxury scroll-driven animated website with canvas frame-by-frame animation.
8
+
9
+ ## Pre-requisites
10
+
11
+ 1. FFmpeg installed (`winget install FFmpeg` on Windows, `brew install ffmpeg` on Mac)
12
+ 2. Python 3 installed
13
+ 3. Source MP4 video file
14
+
15
+ ## Steps
16
+
17
+ 1. Ask the user for:
18
+ - Path to the MP4 video file
19
+ - Website concept (product, real estate, portfolio, etc.)
20
+ - Optional: brand colors, section content, target frame count
21
+
22
+ 2. Analyze the video:
23
+ ```bash
24
+ ffprobe -v quiet -print_format json -show_format -show_streams "VIDEO_PATH"
25
+ ```
26
+
27
+ 3. Extract frames using the script:
28
+ ```bash
29
+ python3 scripts/extract_frames.py \
30
+ --input "VIDEO_PATH" \
31
+ --output "OUTPUT_DIR/frames" \
32
+ --frames FRAME_COUNT \
33
+ --quality 80
34
+ ```
35
+
36
+ 4. Generate the complete index.html following the design system in `agent/animated-website-agent.md`:
37
+ - Canvas frame-by-frame scroll animation
38
+ - Scroll dwell engine with Gaussian density
39
+ - 6 overlay sections (Hero, Vision, Details, Grid, Context, CTA)
40
+ - Ambient effects (particles, film grain, vignette, tint)
41
+ - Glass morphism cards and letter-split animations
42
+ - Custom cursor, chapter markers, branded loader
43
+ - Gallery with parallax
44
+
45
+ 5. Serve and preview:
46
+ ```bash
47
+ cd OUTPUT_DIR
48
+ python3 -m http.server 8080
49
+ ```
50
+
51
+ 6. Iterate based on user feedback (scroll speed, colors, content, etc.)
52
+
53
+ ## Reference
54
+
55
+ See `agent/animated-website-agent.md` for the complete design system, code architecture, and quality checklist.
@@ -0,0 +1,71 @@
1
+ # Agent: Universal Backup Manager
2
+
3
+ ## Persona
4
+ Tu es un agent spécialisé dans la sauvegarde et la restauration de projets. Tu crées des archives ZIP horodatées, gères les rotations de backups, et assures la traçabilité des sauvegardes.
5
+
6
+ ## Activation
7
+ 1. Identifier le dossier racine du projet
8
+ 2. Déterminer le système d'exploitation (Windows/Linux/Mac)
9
+ 3. Vérifier l'existence du dossier `backups/`
10
+ 4. Exécuter la sauvegarde
11
+
12
+ ## Menu
13
+
14
+ ### 1. `/backup` — Backup complet
15
+ Crée un ZIP horodaté du projet entier, en excluant : `node_modules`, `.git`, `vendor`, `backups/`, `__pycache__`, `*.backup_*`, `dist/node_modules`.
16
+
17
+ **PowerShell (Windows) :**
18
+ ```powershell
19
+ $timestamp = Get-Date -Format "yyyyMMdd_HHmmss"
20
+ $projectRoot = "%PROJECT_ROOT%"
21
+ $projectName = Split-Path $projectRoot -Leaf
22
+ $backupDir = "$projectRoot\backups"
23
+ if (!(Test-Path $backupDir)) { New-Item -ItemType Directory -Path $backupDir -Force }
24
+ Get-ChildItem $projectRoot -Exclude "backups","node_modules",".git","vendor","__pycache__","*.backup_*" |
25
+ Compress-Archive -DestinationPath "$backupDir\${projectName}_backup_$timestamp.zip" -Force
26
+ $size = (Get-Item "$backupDir\${projectName}_backup_$timestamp.zip").Length / 1MB
27
+ Write-Output "✅ Backup: ${projectName}_backup_$timestamp.zip ($([math]::Round($size,2)) MB)"
28
+ ```
29
+
30
+ **Bash (Linux/Mac) :**
31
+ ```bash
32
+ TIMESTAMP=$(date +%Y%m%d_%H%M%S)
33
+ PROJECT_ROOT="%PROJECT_ROOT%"
34
+ PROJECT_NAME=$(basename "$PROJECT_ROOT")
35
+ mkdir -p "$PROJECT_ROOT/backups"
36
+ cd "$PROJECT_ROOT" && zip -r "backups/${PROJECT_NAME}_backup_$TIMESTAMP.zip" . \
37
+ -x "backups/*" "node_modules/*" ".git/*" "vendor/*" "__pycache__/*" "*.backup_*"
38
+ echo "✅ Backup: ${PROJECT_NAME}_backup_$TIMESTAMP.zip"
39
+ ```
40
+
41
+ ### 2. `/backup-list` — Lister les backups
42
+ ```powershell
43
+ Get-ChildItem "$projectRoot\backups" -Filter "*.zip" |
44
+ Sort-Object LastWriteTime -Descending |
45
+ Format-Table Name, @{N="Size(MB)";E={[math]::Round($_.Length/1MB,2)}}, LastWriteTime -AutoSize
46
+ ```
47
+
48
+ ### 3. `/backup-restore` — Restaurer un backup
49
+ ```powershell
50
+ $backupFile = "BACKUP_FILE_NAME.zip"
51
+ $restoreDir = "$projectRoot\restore_$((Get-Date).ToString('yyyyMMdd_HHmmss'))"
52
+ Expand-Archive -Path "$projectRoot\backups\$backupFile" -DestinationPath $restoreDir -Force
53
+ Write-Output "✅ Restored to: $restoreDir"
54
+ ```
55
+
56
+ ### 4. `/backup-clean` — Rotation (garder les N derniers)
57
+ ```powershell
58
+ $keep = 5
59
+ Get-ChildItem "$projectRoot\backups" -Filter "*.zip" |
60
+ Sort-Object LastWriteTime -Descending |
61
+ Select-Object -Skip $keep |
62
+ Remove-Item -Force
63
+ Write-Output "✅ Kept last $keep backups, removed older ones"
64
+ ```
65
+
66
+ ## Règles
67
+ 1. **Toujours demander confirmation** avant de supprimer des backups
68
+ 2. **Toujours afficher** la taille du ZIP créé
69
+ 3. **Toujours exclure** les dossiers volumineux non essentiels
70
+ 4. **Adapter automatiquement** les commandes au système d'exploitation détecté
71
+ 5. **Remplacer `%PROJECT_ROOT%`** par le chemin réel du projet
@@ -0,0 +1,51 @@
1
+ ---
2
+ description: Create a full ZIP backup of the current project
3
+ ---
4
+
5
+ # Backup Project
6
+
7
+ Creates a timestamped ZIP archive of the entire project in a `backups/` folder at the project root.
8
+
9
+ ## Auto-detect
10
+
11
+ The agent should:
12
+ 1. Detect the project root from the active workspace
13
+ 2. Detect the OS (PowerShell for Windows, Bash for Linux/Mac)
14
+ 3. Name the backup using the project folder name
15
+
16
+ ## Steps
17
+
18
+ // turbo-all
19
+
20
+ 1. Create the backup ZIP archive:
21
+
22
+ ### Windows (PowerShell)
23
+ ```powershell
24
+ $timestamp = Get-Date -Format "yyyyMMdd_HHmmss"
25
+ $projectRoot = "%PROJECT_ROOT%"
26
+ $projectName = Split-Path $projectRoot -Leaf
27
+ $backupDir = "$projectRoot\backups"
28
+ if (!(Test-Path $backupDir)) { New-Item -ItemType Directory -Path $backupDir -Force }
29
+ Get-ChildItem $projectRoot -Exclude "backups","node_modules",".git","vendor","__pycache__","*.backup_*" |
30
+ Compress-Archive -DestinationPath "$backupDir\${projectName}_backup_$timestamp.zip" -Force
31
+ $size = (Get-Item "$backupDir\${projectName}_backup_$timestamp.zip").Length / 1MB
32
+ Write-Output "Backup: ${projectName}_backup_$timestamp.zip ($([math]::Round($size,2)) MB)"
33
+ ```
34
+
35
+ ### Linux/Mac (Bash)
36
+ ```bash
37
+ TIMESTAMP=$(date +%Y%m%d_%H%M%S)
38
+ PROJECT_ROOT="%PROJECT_ROOT%"
39
+ PROJECT_NAME=$(basename "$PROJECT_ROOT")
40
+ mkdir -p "$PROJECT_ROOT/backups"
41
+ cd "$PROJECT_ROOT" && zip -r "backups/${PROJECT_NAME}_backup_$TIMESTAMP.zip" . \
42
+ -x "backups/*" "node_modules/*" ".git/*" "vendor/*" "__pycache__/*" "*.backup_*"
43
+ ```
44
+
45
+ 2. Confirm the backup was created and report the file name and size.
46
+
47
+ ## Notes
48
+
49
+ - Replace `%PROJECT_ROOT%` with the actual project root path
50
+ - Excludes: `backups/`, `node_modules/`, `.git/`, `vendor/`, `__pycache__/`, `*.backup_*`
51
+ - Backups are stored in `{project}/backups/` with naming: `{project_name}_backup_YYYYMMDD_HHMMSS.zip`