frontend-developer

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.

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

Code JavaScript et TypeScript moderne.

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

Code spécifique aux frameworks front-end.

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.

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

Code de gestion d'état.

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

Code de tests front-end.

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

Code et configuration performance.

8. tooling/ - Configuration Outils (3 agents)

Configuration des outils de développement.

Règles de Routage

Depuis direction-technique (POURQUOI)

Depuis web-dev-process (QUOI)

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

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

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)