Frontend

Persona Frontend Artisan — qualité d'interface : design-first, accessibilité, composants testés, performance perçue.

Dépendances (cœur P0–P1)

flowchart TB
  classDef existing fill:#eee,stroke:#999,color:#555;
  classDef composite fill:#e7e3ff,stroke:#6d5ef6,color:#3a2f9e;
  classDef atomic fill:#fff,stroke:#6d5ef6,color:#3a2f9e;

  doerr["error-handling.domain-errors"]:::existing
  pyramid["testing.test-pyramid"]:::existing

  comp["component-patterns"]:::atomic
  a11y["accessibility"]:::composite
  ds["design-system"]:::composite
  test["testing"]:::atomic
  state["state-management"]:::atomic
  vitals["web-vitals"]:::atomic
  resil["error-resilience"]:::atomic

  comp --> ds
  a11y --> ds
  test -.-> ds
  pyramid -.-> test
  comp --> state
  a11y -.-> vitals
  doerr -.-> resil
  test -.-> a11y

Talents

P0 → P2 = à développer. Dans « Dépend de » : → requires · ≈ recommends · ⊃ inclut (composite).

Qualité & accessibilité

Talent	Type	P	Dépend de	Description
`frontend.accessibility`	composite	P0	⊃ semantic-html, aria-patterns, color-contrast · ≈ testing	Chapeau WCAG / RGAA regroupant les niveaux ci-dessous.
`frontend.semantic-html`	atomic	P0	—	HTML sémantique : landmarks, hiérarchie de titres, structure de page, `alt`.
`frontend.aria-patterns`	atomic	P1	→ semantic-html	Rôles & états ARIA, live regions, widgets composites (WAI-ARIA APG).
`frontend.color-contrast`	atomic	P1	≈ design-system	Couleur & contraste : niveaux AA / AAA, jamais la couleur comme seul signal.
`frontend.testing`	atomic	P0	≈ testing.test-pyramid	Vitest, Testing Library, Playwright, a11y testing.
`frontend.ux-principles`	atomic	P2	≈ accessibility	Heuristiques Nielsen, Laws of UX.

Design system & composants

Talent	Type	P	Dépend de	Description
`frontend.design-system`	composite	P0	→ component-patterns · ≈ accessibility	Atomic Design, design tokens, Storybook.
`frontend.component-patterns`	atomic	P1	—	Patterns React/Vue, composition, performance de rendu.
`frontend.polymorphic-components`	atomic	P2	≈ component-patterns	Composants polymorphes : prop `as`, génériques typés, render props.
`frontend.figma-handoff`	atomic	P2	≈ design-system	Extraction de tokens, auto-layout → CSS.
`frontend.animation`	atomic	P2	≈ accessibility	Framer Motion, reduced-motion, FLIP.

Layout & adaptation

Talent	Type	P	Dépend de	Description
`frontend.responsive`	atomic	P2	≈ design-system	Container queries, fluid typography, CSS Grid.
`frontend.mobile-first`	atomic	P2	≈ responsive	Conception mobile-first, ergonomie tactile, target-size. (dev mobile natif hors périmètre Hoppr — à arbitrer avec Nico)
`frontend.i18n`	atomic	P1	≈ component-patterns	Internationalisation, pluralisation, RTL, formats.

État & données

Talent	Type	P	Dépend de	Description
`frontend.local-state`	atomic	P1	≈ component-patterns	Primitives natives d'abord (« less is more ») : `useState` / `useReducer` / `useSyncExternalStore`.
`frontend.state-management`	atomic	P1	≈ local-state · → component-patterns	Lib externes quand l'état dépasse les primitives : état serveur vs client (TanStack Query, Zustand…).
`frontend.data-viz`	atomic	P2	≈ accessibility	D3 / Chart.js / Recharts, dashboards accessibles.

Performance & résilience

Talent	Type	P	Dépend de	Description
`frontend.web-vitals`	atomic	P1	≈ accessibility	LCP / INP / CLS, SEO technique, Lighthouse.
`frontend.error-resilience`	atomic	P1	≈ error-handling.domain-errors	Error Boundaries, retry, états offline.
`frontend.pwa`	atomic	P2	≈ error-resilience	Service Workers, Workbox, offline-first.
`frontend.security`	atomic	P1	—	XSS, CSP, CORS, OWASP frontend.

Architecture front

Talent	Type	P	Dépend de	Description
`frontend.clean-architecture`	composite	P2	→ component-patterns · ≈ state-management	Clean archi côté front : UI / logique / accès données séparés, ports vers l'extérieur.
`frontend.solid-front`	atomic	P2	≈ clean-architecture	Principes SOLID appliqués aux composants & hooks.
`frontend.feature-structure`	atomic	P2	—	Organisation par feature/slice : colocation, frontières de module.
`frontend.micro-frontends`	composite	P2	→ monorepo · ≈ component-patterns	Module Federation, déploiement indépendant.
`frontend.monorepo`	atomic	P2	—	Turborepo / Nx, packages partagés, changesets.

Frontend

On this page