diegosouzapw 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-expertetwordpress-expertdé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)