OpenSkillIndex← back to search
claude-code

Awesome-omni-skill frontend-developer

Expert en développement front-end moderne - HTML, CSS, JavaScript, TypeScript, frameworks, testing, performance et tooling

install
source · Clone the upstream repo
git clone https://github.com/diegosouzapw/awesome-omni-skill
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/diegosouzapw/awesome-omni-skill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/development/frontend-developer-majiayu000" ~/.claude/skills/diegosouzapw-awesome-omni-skill-frontend-developer-8a989e && rm -rf "$T"
manifest: skills/development/frontend-developer-majiayu000/SKILL.md
source content

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.

AgentResponsabilitéProduit
orchestrator
CoordinationRoutage
html-semantique
Structure HTML5, SEOCode HTML, balises, métadonnées
css-moderne
Grid, Flexbox, variablesCode CSS, layouts
accessibilite
WCAG, ARIACode a11y, attributs ARIA
responsive-design
Mobile-firstMedia queries, clamp()

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

Code JavaScript et TypeScript moderne.

AgentResponsabilitéProduit
orchestrator
CoordinationRoutage
javascript-moderne
ES6+, async/awaitCode JS, patterns
typescript
Typage, genericsTypes, interfaces, configs
dom-manipulation
DOM API, événementsCode DOM, handlers
api-integration
Fetch, REST, WSCode API, clients HTTP

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

Code spécifique aux frameworks front-end.

AgentResponsabilitéProduit
orchestrator
CoordinationRoutage
react-expert
Délégation vers skill 
react-expert
→ 28 agents spécialisés
vue-expert
Composition API, PiniaCode 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 PropsPatterns 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.

AgentResponsabilitéProduit
orchestrator
CoordinationRoutage
tailwind-expert
Configuration TailwindConfig, plugins, classes
css-in-js
styled-components, EmotionCode CSS-in-JS
animations
Transitions, Framer MotionCode animations

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

Code de gestion d'état.

AgentResponsabilitéProduit
orchestrator
CoordinationRoutage
react-state
useState, Zustand, ReduxCode stores, slices
server-state
React Query, SWRCode queries, mutations

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

Code de tests front-end.

AgentResponsabilitéProduit
orchestrator
CoordinationRoutage
unit-testing
Jest, VitestCode tests unitaires
component-testing
RTL, Vue Test UtilsCode tests composants
e2e-testing
Playwright, CypressCode tests E2E

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

Code et configuration performance.

AgentResponsabilitéProduit
orchestrator
CoordinationRoutage
core-web-vitals
LCP, CLS, INPCode optimisation
bundle-optimization
Code splitting, lazyConfig bundler

8. tooling/ - Configuration Outils (3 agents)

Configuration des outils de développement.

AgentResponsabilitéProduit
orchestrator
CoordinationRoutage
build-tools
Vite, WebpackFichiers config
linting-formatting
ESLint, PrettierFichiers config

Règles de Routage

Depuis direction-technique (POURQUOI)

Question stratégiqueCe 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éfiniCe 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

SkillNiveauRelation
direction-technique
POURQUOIDéfinit les décisions stratégiques
web-dev-process
QUOIDéfinit les processus
react-expert
COMMENTImplémentation React (28 agents) - délégation
nextjs-expert
COMMENTImplémentation Next.js (35 agents) - délégation
design-system-foundations
COMMENTTokens et composants design
wordpress-gutenberg-expert
COMMENTImplé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)