📋 Index — 02 — Mes skills perso (standalone)
02 — Mes skills perso (standalone)
Index des skills regroupés dans ce livre. Cliquer sur un skill pour ouvrir sa fiche.
21 skills documentés.
Chapitre A — Motion & Animation
| Skill | En une phrase |
|---|---|
| motion-framer-patterns | Patterns Motion (ex-Framer Motion) pour React : enter/exit, layout animations, shared elements, gestures, reduced motion… |
| motion-gsap-scrolltrigger | Patterns GSAP + ScrollTrigger : reveals, pinning, scrub, timelines, cleanup, refresh sur changements de layout. |
| motion-perf-audit | Auditer des animations (jank, scroll saccadé, CPU haut) et produire un plan correctif priorisé (compositing, layout thra… |
| motion-system | Concevoir un motion system cohérent (principes, tokens, patterns) et le livrer sous forme de règles + snippets réutilisa… |
| motion-three-r3f | Motion 3D : Three.js + React Three Fiber. |
| motion-tokens | Générer des motion tokens (JSON + CSS variables) et mappings pour Motion/GSAP afin d’unifier tout le projet. |
| motion-view-transitions | Implémenter View Transitions (SPA/MPA) + shared element transitions en progressive enhancement, avec reduced-motion et f… |
| motion-visual-regression | Mettre en place des tests visuels (Playwright screenshots) pour stabiliser le motion et détecter les régressions en CI. |
| reduced-motion-a11y | Concevoir une stratégie reduced-motion (prefers-reduced-motion) + variantes pour limiter le motion sickness sans casser … |
| view-transitions | Implémenter des transitions de pages via View Transition API en progressive enhancement (fallback safe). À utiliser pour… |
Chapitre B — Design & Direction artistique
| Skill | En une phrase |
|---|---|
| art-direction | Définir une direction artistique web forte (palette, typo, motifs, layout, motion) à partir d’un brief flou ou incomplet… |
| design-tokens | Créer/maintenir des design tokens (light/dark), conventions de nommage, mapping CSS variables et intégration Tailwind. À… |
Chapitre C — Performance & Accessibilité
| Skill | En une phrase |
|---|---|
| a11y-wcag22-aa | Audit et checklist accessibilité (WCAG 2.2 AA) : focus non masqué, tailles de cibles, drag alternatif, auth accessible, … |
| lighthouse-ci-budgets | Mettre en place Lighthouse CI + assertions/budgets pour éviter les régressions perf/a11y/SEO. À utiliser quand un projet… |
| nielsen-audit | Auditer une UI existante avec les 10 heuristiques de Nielsen et produire un plan correctif priorisé. À utiliser pour ref… |
| perf-cwv | Audit et plan d’optimisation Core Web Vitals (LCP/INP/CLS) + budgets. À utiliser quand une page est lente, lourde, ou av… |
| ux-flows | Structurer les parcours UX, l’architecture d’information et les écrans/sections. À utiliser pour SaaS, dashboard, checko… |
Chapitre D — Content & Outils dev
| Skill | En une phrase |
|---|---|
| add-tcg | Use when adding a new Trading Card Game (TCG) to the boardgame-referee app — e.g. user says "ajouter un nouveau TCG", "i… |
| documenter-webapp | Génère ou met à jour la documentation complète d'une webapp en scannant son code source, puis pousse le résultat sur l'i… |
| llm-council | Run any question, idea, or decision through a council of 5 AI advisors who independently analyze it, peer-review each ot… |
| tiptap-generator | Génère et valide du JSON TipTap pour le site éducatif juanmaycompania. |