Wesley Dashboard Builder

Skill de création de dashboards et sites web complets pour Wesley-Agent.

Produit des fichiers HTML/CSS/JS prêts à déployer sur le VPS via tunnel Cloudflare.

Philosophie

Chaque dashboard = un produit marketing.

• Home/Proof → preuve sociale → convertit en VIP
• Trading → crédibilité trader sérieux
• Signaux → valeur visible → justifie le prix
• Journal → engagement → fidélise

Lire les références dans l'ordre selon le besoin :

• Architecture et API → references/api-architecture.md
• Design et CSS → references/design-system.md
• Médias (images/vidéos) → references/media-integration.md
• Déploiement VPS → references/deployment.md

Structure standard d'un projet dashboard

workspace/projects/MON-DASHBOARD/
├── index.html          ← écran 1 (Home / Proof)
├── trading.html        ← écran 2 (Performance & trades)
├── signals.html        ← écran 3 (Feed signaux live + CTA VIP)
├── journal.html        ← écran 4 (Photos / Timeline / Milestones)
├── assets/
│   ├── logo.png
│   └── og-image.png    ← pour partage réseaux sociaux
└── api_server.py       ← si dashboard_api.py pas encore lancé

Workflow de création

Étape 1 — Déterminer le type de dashboard

Étape 2 — Lire la référence design

→ references/design-system.md : variables CSS, typographie, composants, animations

Étape 3 — Générer les fichiers HTML

Chaque fichier HTML = autonome (CSS + JS inline, zéro dépendance locale).

Imports autorisés via CDN seulement :

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">

Étape 4 — Connecter l'API

→ references/api-architecture.md : endpoints disponibles, fallback demo data

Étape 5 — Intégrer médias

→ references/media-integration.md : images, vidéos, upload Telegram, OG tags

Étape 6 — Déployer

→ references/deployment.md : copier sur VPS, lancer API, configurer tunnel

Écrans standard — description rapide

Écran 1 — Home / Proof (index.html)

• Portfolio value live avec animation compteur
• P&L du jour en vert/rouge
• Statut agents (dots qui pulsent)
• Dernier signal posté
• Barre de progression vers objectif mensuel
• Uptime système
• Bouton screenshot pour partage Instagram/X

Écran 2 — Trading (trading.html)

• Courbe equity (Chart.js, 7j/30j/all)
• Win rate en anneau (donut chart)
• Positions ouvertes : marché + odds + edge %
• Derniers trades : ✅ win / ❌ loss
• Métriques : Sharpe, drawdown, avg hold

Écran 3 — Signaux (signals.html)

• Feed des derniers signaux (style Twitter)
• Score EDGE / Confiance / Marché / Heure
• Badge FREE vs 🔒 VIP
• CTA sticky en bas : "Rejoindre le canal VIP →"
• Auto-refresh toutes les 30s

Écran 4 — Journal / Proof (journal.html)

• Upload photos depuis téléphone (drag & drop ou bouton)
• Galerie timeline : date + caption
• Milestones : "Semaine 1 : +$22 → Objectif : +$200"
• Lightbox pour voir les photos en grand
• Photos reçues via Telegram → affichées automatiquement

Règles de génération de code

1. Tout inline — CSS dans