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

Mots-clés par domaine

Domaine	Mots-clés
foundations	html, css, accessibilité, a11y, responsive, sémantique
javascript	javascript, typescript, ES6, DOM, API, fetch, async
frameworks	react, vue, next, nuxt, wordpress, gutenberg, composant, component
styling	tailwind, styled, emotion, animation, CSS-in-JS
state-management	state, context, zustand, redux, react-query
testing	test, vitest, jest, playwright, cypress, RTL
performance	performance, Core Web Vitals, LCP, bundle, lighthouse
tooling	vite, webpack, eslint, prettier, build

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)

frontend-developer