Files
_Assistant_Lead_Tech/knowledge/frontend/patterns/README.md
T
MaksTinyWorkshop 5f5c87296e docs(knowledge): capitalisation frontend — intégration du triage local (mai-juin 2026)
Triage et intégration des propositions frontend du buffer 95_a_capitaliser.md
(lot local RL799_V2/Vue3 + app-alexandrie/RN-Expo, mai-juin 2026).

~73 entrées intégrées sur knowledge/frontend/ + 1 nouveau fichier, dont :
- patterns/state.md : race-token partagé latest-wins (fusion 3 props), capture sync anti-race,
  event bus timestamp, clé cache composite, état dérivé = computed
- risques/state.md : 9 risques Zustand/store (fetchId reset, useRef remount, re-fetch infini
  sur [], flag optimiste écrasé, cache détail/liste stale, latch sans reset, :key index)
- patterns/navigation.md : Expo Router (tab bar, useFocusEffect, Href typé, routing pur fusionné)
- patterns/general.md : helpers temps purs, composants génériques + skeleton, fail-fast, touch target
- risques/general.md : 24 risques (sweep statique, filtre client liste paginée, hooks avant return,
  a11y VoiceOver/disabled, redirection allowlist, RangeError toISOString, section i18n...)
- design-tokens (cluster theming light/dark MD3), tests, performance, react-native, nextjs
- NOUVEAU risques/responsive.md (gating par capacité d'input + checklist régressions mobile)
- READMEs patterns/risques mis à jour

Doublons inter-fichiers évités (vérifié : aucune ancre dupliquée introduite).
Rejets (doublons 91/9/87), reciblages workflow (156/257) et bloc 32 (CLAUDE projet) non intégrés ici.
Source 95_a_capitaliser.md non purgée (purge en fin de capitalisation complète).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-25 15:31:53 +02:00

2.9 KiB

Frontend — Patterns validés — Index

Patterns frontend/mobile testés et validés en conditions réelles.

Avant toute proposition frontend, identifie le fichier dont le nom et la description matchent le domaine traité, puis lis-le.


Fichier Domaine Entrées clés
state.md State management, UI states, Zustand, listes paginées, refactor monolithe Vue États UI loading/empty/error, séparation server/client state, refresh idempotent, UI admin légère, refactor monolithe Vue sous-lots Go/No-Go, convention pages/<module>/, styles.css partagé non-scoped, annuaire client-side TTL, race-token partagé (latest-wins), capture synchrone before async, event bus via timestamp, clé de cache composite, loadings séparés initial/pagination, flags d'état séparés par préoccupation, dérivé = computed, une source deux vues lecture inerte, noyau visuel générique + variants
forms.md Formulaires, validation, Server Actions, optimistic UI Formulaire robuste, toggle optimiste rollback, Server Action retourne entité, AppInput Outlined Material thème dark, fusion DRY composants jumeaux par prop discriminante
navigation.md Navigation, routing, Expo Router, intégrations tierces Navigation réactive post-action async, link-out page locale canonique, factorisation page mode dynamique via meta.mode typé, tab bar native cachée (wiring routing pur), état UI éphémère via useFocusEffect, routes typées Href, stack indépendant par tab, routing décorrélé du rendu (builder pur)
design-tokens.md Design tokens, typographie, spacing, Tailwind, RN StyleSheet Tokens TypeScript Expo/RN, typography sémantique, export styles composant, grilles 2 colonnes, palette light/dark MD3 + useThemedColors + dual export, map sémantique slug → token, migration tokens typo formalisés
nextjs.md Next.js App Router, embeds, ESLint Click-to-load embeds tiers, ESLint flat config Next.js
tests.md Tests styles React Native, smoke checks, mount + mock composable Tests de styles sans renderer JSX, smoke checks readFileSync, classe CSS modifier vs texte, cleanup E2E best-effort, helpers SW purs, mount + mock composable, assertions React Email, garde-fous de non-activation feature parking Later
general.md Focus visible, inputs date HTML5, journaux/audit logs, pages admin, composants génériques Focus visible interne pour overflow clip, restyle global <input type="date">, UI patterns journaux d'audit, structuration pages admin, reset défensif pointer events, modale dédiée vs partagée, fail-fast branche unreachable __DEV__, extension rétrocompatible vs sibling, CTA toggle async préserver l'état, helpers fail-safe data backend, prop de raccourci, compositions sémantiques utilisées, touch target 44 minWidth+minHeight, helpers temps/date purs, avatar initiale pastel, composants génériques + états de chargement (EmptyState/Skeleton)