Premiers pas avec Google Antigravity

# agents.md - Projet Dashboard de Marque

## DIRECTIVE

### Contexte du projet
Ce projet consiste a creer un dashboard web interactif
pour visualiser l'identite de marque d'une entreprise.
L'application doit extraire automatiquement les elements
de branding (couleurs, typographies, logos) depuis un site
web cible, puis les presenter dans une interface claire
et professionnelle.

### Regles generales
- Toujours utiliser TypeScript avec des types stricts
- Privilegier les composants React fonctionnels
- Chaque composant doit avoir son fichier de test
- Les appels API doivent etre centralises dans src/utils/api.ts
- Utiliser Tailwind CSS pour le styling
- Commenter le code en francais

### Objectifs de qualite
- Temps de chargement initial inferieur a 2 secondes
- Score Lighthouse superieur a 90
- Interface responsive (mobile, tablette, desktop)
- Accessibilite WCAG 2.1 niveau AA

## ORCHESTRATION

### Phases du projet
1. Extraction des donnees de marque via Firecrawl API
2. Traitement et normalisation des donnees extraites
3. Creation des composants d'affichage
4. Assemblage du dashboard principal
5. Tests et optimisation des performances

### Dependances entre agents
- L'agent UI depend des donnees extraites par l'agent API
- L'agent Tests depend de la completion des composants
- L'agent Optimisation intervient en dernier

## EXECUTION

### Stack technique
- Framework : Next.js 14 (App Router)
- Langage : TypeScript
- Styling : Tailwind CSS
- API externe : Firecrawl pour le web scraping
- Tests : Vitest + Testing Library

### Skills disponibles
Les competences reutilisables sont dans le dossier /skills/ :
- brand-extraction.md : extraction des elements de marque
- brand-guidelines.md : generation du guide de style
- dashboard-layout.md : mise en page du dashboard

# Skill : Brand Extraction

## Objectif
Extraire les elements d'identite visuelle (couleurs,
typographies, logos, favicon) depuis une URL cible
en utilisant l'API Firecrawl.

## Etapes d'execution
1. Appeler l'endpoint Firecrawl /scrape avec l'URL cible
2. Parser le HTML retourne pour identifier :
   - Les couleurs dominantes (background, text, accent)
   - Les familles de polices utilisees
   - Les URLs des logos et favicons
3. Normaliser les couleurs au format HEX
4. Telecharger les assets visuels dans /assets/brand/
5. Generer un fichier JSON structure : brand-data.json

## Format de sortie attendu
{
  "colors": {
    "primary": "#FF0000",
    "secondary": "#1A1A1A",
    "accent": "#FFD700",
    "background": "#FFFFFF"
  },
  "typography": {
    "headings": "Montserrat",
    "body": "Open Sans"
  },
  "logos": [
    "assets/brand/logo-main.svg",
    "assets/brand/favicon.ico"
  ]
}

## Gestion des erreurs
- Si Firecrawl echoue : retenter 2 fois avec un delai de 3s
- Si aucune couleur trouvee : utiliser la palette par defaut
- Si logo introuvable : signaler dans le rapport final

# Skill : Brand Guidelines Generator

## Objectif
Generer un guide de style visuel complet a partir
du fichier brand-data.json produit par le skill
brand-extraction.

## Etapes d'execution
1. Lire le fichier brand-data.json
2. Creer une page HTML avec les sections suivantes :
   - Palette de couleurs avec echantillons visuels
   - Specimen typographique (titres, corps, citations)
   - Grille de logos avec variantes (clair, sombre)
   - Espacements et proportions recommandes
3. Appliquer les couleurs de la marque au guide lui-meme
4. Exporter en HTML statique dans /docs/brand-guide.html

## Regles de design
- Contraste minimum WCAG AA entre texte et fond
- Taille de police minimum : 14px pour le corps
- Espacement vertical : 1.5x la taille de police
- Marges laterales : minimum 24px sur mobile