frontend-developer

name	frontend-developer
description	Expert en développement front-end moderne - HTML, CSS, JavaScript, TypeScript, frameworks, testing, performance et tooling
version	1.0.0
status	active

Frontend Developer Skill

Position dans l'Architecture

Ce skill est un skill de NIVEAU 3 : COMMENT (implémentation). Il fournit le code et les configurations concrètes pour le développement front-end.

┌─────────────────────────────────────────────────────────────────┐
│  NIVEAU 1 : POURQUOI (direction-technique)                      │
│  → Décisions stratégiques, choix de stack, ADRs                 │
│  → Quand utiliser React vs Vue ? Quel framework CSS ?           │
├─────────────────────────────────────────────────────────────────┤
│  NIVEAU 2 : QUOI (web-dev-process)                              │
│  → Process, workflows, checklists, standards                    │
│  → Comment organiser les tests ? Quel workflow Git ?            │
├─────────────────────────────────────────────────────────────────┤
│  NIVEAU 3 : COMMENT (frontend-developer) ← CE SKILL             │
│  → Implémentation, code, configuration                          │
│  → Comment écrire ce hook React ? Configurer Tailwind ?         │
└─────────────────────────────────────────────────────────────────┘

Philosophie

Ce skill fournit l'implémentation concrète pour le développement front-end. Il contient :

• ✅ Du code (React, Vue, TypeScript, CSS...)
• ✅ Des configurations (Vite, ESLint, Tailwind...)
• ✅ Des patterns d'implémentation
• ✅ Des exemples concrets et prêts à l'emploi

Il ne contient PAS :

• ❌ Des décisions stratégiques → direction-technique
• ❌ Des processus de travail → web-dev-process
• ❌ Des politiques d'équipe → direction-technique

Architecture

┌─────────────────────────────────────────────────────────────────────────────┐
│                              direction-technique                             │
│                         (POURQUOI - 52 agents)                              │
│                     Décisions stratégiques frontend                          │
│                                                                              │
│  avant-projet/selection-stack → Choix React/Vue/Angular                     │
│  architecture/patterns-design → Patterns d'architecture front               │
│  performance/optimisation-frontend → Stratégie perf (politique)             │
│  qualite/conventions-code → Standards de code (politique)                   │
└─────────────────────────────────────────────────────────────────────────────┘
                                      │
                                      ▼
┌─────────────────────────────────────────────────────────────────────────────┐
│                              web-dev-process                                 │
│                          (QUOI - 61 agents)                                 │
│                      Process de développement                                │
│                                                                              │
│  design/ui-ux → Principes UX, responsive, accessibility                     │
│  setup/quality-tools → Workflow linting, formatting                         │
│  development/coding-standards → Process de code review                      │
│  testing/orchestrator → Stratégie de test (pyramide)                        │
└─────────────────────────────────────────────────────────────────────────────┘
                                      │
                                      ▼
┌─────────────────────────────────────────────────────────────────────────────┐
│                            frontend-developer                                │
│                         (COMMENT - 33 agents)                               │
│                      Implémentation concrète                                 │
│                                                                              │
│  ┌─────────────────────────────────────────────────────────────────────┐   │
│  │                          8 DOMAINES                                   │   │
│  │                                                                       │   │
│  │  foundations/       javascript/       frameworks/      styling/      │   │
│  │      (5)               (5)               (6)             (4)         │   │
│  │                                                                       │   │
│  │  state-management/   testing/        performance/     tooling/       │   │
│  │      (3)               (4)               (3)            (3)          │   │
│  └─────────────────────────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────────────────────────┘

Domaines et Agents (33 agents)

1. foundations/ - Implémentation HTML/CSS (5 agents)

Code et patterns pour les fondamentaux web.

Agent	Responsabilité	Produit
orchestrator	Coordination	Routage
html-semantique	Structure HTML5, SEO	Code HTML, balises, métadonnées
css-moderne	Grid, Flexbox, variables	Code CSS, layouts
accessibilite	WCAG, ARIA	Code a11y, attributs ARIA
responsive-design	Mobile-first	Media queries, clamp()

2. javascript/ - Implémentation JS/TS (5 agents)

Code JavaScript et TypeScript moderne.

Agent	Responsabilité	Produit
orchestrator	Coordination	Routage
javascript-moderne	ES6+, async/await	Code JS, patterns
typescript	Typage, generics	Types, interfaces, configs
dom-manipulation	DOM API, événements	Code DOM, handlers
api-integration	Fetch, REST, WS	Code API, clients HTTP

3. frameworks/ - Implémentation React/Vue/WordPress (6 agents)

Code spécifique aux frameworks front-end.

Agent	Responsabilité	Produit
orchestrator	Coordination	Routage
react-expert	Délégation vers skill react-expert	→ 28 agents spécialisés
vue-expert	Composition API, Pinia	Code Vue, composables
nextjs-expert	Délégation vers skill nextjs-expert	→ 35 agents spécialisés
wordpress-expert	Délégation vers skill wordpress-gutenberg-expert	→ 41 agents spécialisés
component-patterns	HOC, Render Props	Patterns réutilisables

Note : Les agents react-expert, nextjs-expert et wordpress-expert délèguent vers leurs skills autonomes respectifs pour une couverture approfondie.

4. styling/ - Implémentation CSS (4 agents)

Code et configuration styling.

Agent	Responsabilité	Produit
orchestrator	Coordination	Routage
tailwind-expert	Configuration Tailwind	Config, plugins, classes
css-in-js	styled-components, Emotion	Code CSS-in-JS
animations	Transitions, Framer Motion	Code animations

5. state-management/ - Implémentation State (3 agents)

Code de gestion d'état.

Agent	Responsabilité	Produit
orchestrator	Coordination	Routage
react-state	useState, Zustand, Redux	Code stores, slices
server-state	React Query, SWR	Code queries, mutations

6. testing/ - Implémentation Tests (4 agents)

Code de tests front-end.

Agent	Responsabilité	Produit
orchestrator	Coordination	Routage
unit-testing	Jest, Vitest	Code tests unitaires
component-testing	RTL, Vue Test Utils	Code tests composants
e2e-testing	Playwright, Cypress	Code tests E2E

7. performance/ - Implémentation Perf (3 agents)

Code et configuration performance.

Agent	Responsabilité	Produit
orchestrator	Coordination	Routage
core-web-vitals	LCP, CLS, INP	Code optimisation
bundle-optimization	Code splitting, lazy	Config bundler

8. tooling/ - Configuration Outils (3 agents)

Configuration des outils de développement.

Agent	Responsabilité	Produit
orchestrator	Coordination	Routage
build-tools	Vite, Webpack	Fichiers config
linting-formatting	ESLint, Prettier	Fichiers config

Règles de Routage

Depuis direction-technique (POURQUOI)

Question stratégique	Ce skill fournit
"Quel framework choisir ?"	→ direction-technique décide, puis ce skill implémente
"Architecture micro-frontend ?"	→ direction-technique décide, puis ce skill code
"Stratégie de performance ?"	→ direction-technique définit, ce skill optimise

Depuis web-dev-process (QUOI)

Process défini	Ce skill implémente
"Pyramide de tests"	→ Code des tests (unit, component, e2e)
"Code review checklist"	→ Implémente les bonnes pratiques
"Workflow CI/CD"	→ Configure les outils

Routage interne par mots-clés

SI question contient [code HTML, balises, SEO on-page]
   → agents/foundations/html-semantique.md

SI question contient [code CSS, Grid, Flexbox, layout]
   → agents/foundations/css-moderne.md

SI question contient [code ARIA, attributs a11y, lecteur écran]
   → agents/foundations/accessibilite.md

SI question contient [code JS, ES6, async, Promise, modules]
   → agents/javascript/javascript-moderne.md

SI question contient [code TypeScript, types, interface, generic]
   → agents/javascript/typescript.md

SI question contient [code React, hook, composant, useState]
   → agents/frameworks/react-expert.md

SI question contient [code Vue, ref, reactive, composable]
   → agents/frameworks/vue-expert.md

SI question contient [config Tailwind, classes, plugin]
   → agents/styling/tailwind-expert.md

SI question contient [code store, Zustand, Redux, slice]
   → agents/state-management/react-state.md

SI question contient [code test, Jest, Vitest, expect]
   → agents/testing/unit-testing.md

SI question contient [config Vite, Webpack, bundler]
   → agents/tooling/build-tools.md

Composition avec Autres Skills

Exemple 1 : Nouvelle feature React

1. direction-technique/architecture/patterns-design
   → Décide : "Utiliser le pattern Container/Presenter"

2. web-dev-process/development/coding-standards
   → Définit : "Convention de nommage, structure fichiers"

3. frontend-developer/frameworks/react-expert
   → Implémente : Code React avec le pattern

Exemple 2 : Optimisation performance

1. direction-technique/performance/optimisation-frontend
   → Décide : "Prioriser LCP, budget < 2.5s"

2. web-dev-process/testing/performance
   → Définit : "Process de mesure, outils, seuils"

3. frontend-developer/performance/core-web-vitals
   → Implémente : Code d'optimisation LCP

Exemple 3 : Tests composants

1. direction-technique/qualite/metriques-qualite
   → Décide : "Coverage minimum 80%"

2. web-dev-process/testing/unit-tests
   → Définit : "Pyramide de tests, quoi tester"

3. frontend-developer/testing/component-testing
   → Implémente : Code des tests RTL

Points d'Escalade

Vers direction-technique

• Choix de framework (React vs Vue vs Angular)
• Architecture globale (monolith vs micro-frontend)
• Décisions impactant toute l'équipe
• Trade-offs majeurs (performance vs maintenabilité)

Vers web-dev-process

• Organisation du workflow de test
• Process de code review
• Standards de documentation
• Conventions d'équipe

Vers l'humain

• Intégration avec systèmes legacy non documentés
• Contraintes techniques inhabituelles
• Bugs complexes sans solution évidente

Skills Associés

Skill	Niveau	Relation
direction-technique	POURQUOI	Définit les décisions stratégiques
web-dev-process	QUOI	Définit les processus
react-expert	COMMENT	Implémentation React (28 agents) - délégation
nextjs-expert	COMMENT	Implémentation Next.js (35 agents) - délégation
design-system-foundations	COMMENT	Tokens et composants design
wordpress-gutenberg-expert	COMMENT	Implémentation WordPress

Changelog

v1.1.0

• Délégation Next.js vers skill nextjs-expert (35 agents)
• 7 domaines Next.js : app-router, server-components, data, rendering, optimization, deployment, testing

v1.0.0

• Création initiale avec 8 domaines et 33 agents
• Positionnement POURQUOI/QUOI/COMMENT
• Règles de composition avec direction-technique et web-dev-process
• Délégation React vers skill react-expert (28 agents)
• Délégation WordPress vers skill wordpress-gutenberg-expert (41 agents)