🎨 Claude Web — Agent IA Frontend

Configuration complète d'un agent IA spécialisé en développement web frontend pour Visual Studio Code + Claude Code.

---

📖 À propos

Claude Web est un agent IA configuré pour exceller dans :

• Développement web frontend moderne
• Vibe coding créatif et rapide
• Design systems et composants réutilisables
• Stack : HTML, CSS, JavaScript, Tailwind CSS

---

🚀 Démarrage Rapide

1. Installer VS Code + Claude Code

• Télécharger Visual Studio Code
• Installer l'extension Claude Code
• Configurer votre clé API Anthropic

2. Cloner ce repository

git clone https://github.com/Labsmates/claude-web.git
cd claude-web

3. Lire la documentation

• CLAUDE_WEB.md : Configuration et workflow complet
• CLAUDE.md : Règles strictes de design frontend
• SKILL.md : Compétences techniques détaillées

---

📁 Structure

claude-web/
├── CLAUDE_WEB.md    # Guide principal de configuration
├── CLAUDE.md        # Règles de design frontend
├── SKILL.md         # Compétences techniques
├── README.md        # Ce fichier
└── LICENSE          # Licence MIT

---

🎯 Cas d'Usage

Landing Pages

• Hero sections impactantes
• CTAs optimisés
• Design moderne et responsive

Dashboards

• Interfaces admin
• Visualisation de données
• Composants interactifs

Portfolios

• Showcases créatifs
• Animations fluides
• Typographie soignée

Vibe Coding

• Expérimentations rapides
• Effets visuels créatifs
• Prototypage interface

---

🛠️ Stack Technique

• HTML5 - Structure sémantique
• CSS3 - Styles modernes (Grid, Flexbox)
• JavaScript ES6+ - Logique interactive
• Tailwind CSS - Utility-first framework
• Node.js - Serveur de développement
• Puppeteer - Screenshots automatiques

---

🔧 Extensions VS Code Recommandées

• Tailwind CSS IntelliSense
• Prettier (formatage)
• ESLint (linting)
• Live Server
• Auto Rename Tag
• CSS Peek

---

📝 Commandes Essentielles

# Démarrer serveur local
node serve.mjs

# Screenshot page
node screenshot.mjs http://localhost:3000

# Screenshot avec label
node screenshot.mjs http://localhost:3000 hero-section

---

🎨 Principes de Design

• Mobile-first : Partir du petit écran
• Anti-generic : Éviter les couleurs/ombres Tailwind par défaut
• Brand assets : Utiliser les vraies ressources quand disponibles
• Screenshots comparatifs : Au minimum 2 passes avant validation
• États interactifs : hover, focus, active pour tout élément cliquable

---

📚 Ressources

• Tailwind CSS Docs
• MDN Web Docs
• Can I Use
• Placehold.co
• Google Fonts

---

🤝 Contribution

Ce repo est une configuration personnelle mais les suggestions sont les bienvenues ! Ouvrez une issue ou PR.

---

📄 Licence

MIT License - voir LICENSE

---

🔗 Liens Utiles

• Repository GitHub
• Claude Code Extension
• Visual Studio Code

---

Créé avec ❤️ pour le développement web moderne