Animation & Motion Design

Implémentez des animations d'interface utilisateur performantes et accessibles à l'aide de la bibliothèque Motion et de l'API native View Transitions.

déclencheurs:animationmotion designframer motionview transitionsmicro-interactionslayout animationprefers-reduced-motion

GitHub SKILL.md

Ce que cela fait

Cette compétence fournit un ensemble complet de modèles pour créer des animations fluides, performantes et accessibles dans les applications web modernes. Elle comble le fossé entre les animations au niveau des composants (via la bibliothèque Motion) et les transitions au niveau des pages (via l'API native View Transitions).

Quand l'utiliser

Utilisez cette compétence lors de l'implémentation de :

Séquences complexes de montage/démontage de composants (AnimatePresence).
Interactions basées sur les gestes comme le glissement, le survol et l'appui avec une physique de ressort.
Transitions d'éléments partagés entre les routes via l'API View Transitions.
Mouvements axés sur l'accessibilité qui respectent les paramètres prefers-reduced-motion.

Ce qui est inclus

Références : Guides détaillés sur Motion vs View Transitions, préréglages d'animation et un catalogue de micro-interactions.
Instructions : Règles procédurales pour les animations de mise en page (FLIP), le compositeur GPU (60fps) et la réduction de la charge cognitive.

Agents compatibles

Principalement conçue pour les développeurs d'interfaces utilisateur utilisant Claude Code, car elle s'intègre profondément aux écosystèmes React et TypeScript.

Étiquettes

#animation #motion-design #framer-motion #view-transitions #frontend-ui #accessibility #ux

Pas encore audité

Cette compétence n'a pas encore été examinée par notre pipeline d'audit automatisé.

Informations

Dépôt: OrchestKit
Étoiles: 197

Plus de OrchestKit

Analytique Inter-Projets

Interrogez des analyses locales et sécurisées sur plusieurs projets pour rapporter les performances des agents, compétences, hooks et équipes ; rejouez des sessions et estimez les coûts de jetons.

Modèles de Dépendance de Tâches

Modèles et flux de travail pour créer, séquencer et gérer les dépendances de tâches en utilisant les outils TaskCreate/TaskUpdate/TaskGet/TaskList pour coordonner des implémentations multi-étapes

Revue de PR

Revue de code approfondie de pull-requests utilisant des agents spécialisés en parallèle (qualité, sécurité, tests, architecture, performance) et des rapports de synthèse pour approbation.

Rédiger un PRD (Document de Spécifications Produit)

Générez un Document de Spécifications Produit en 8 sections avec des récits utilisateurs, des critères d'acceptation au format INVEST et des critères de go/no-go pour transformer une vision produit en exécution.

Inspecteur de Télémétrie

Exécutez un contrôle de santé en lecture seule du pipeline de télémétrie d'OrchestKit : activité de l'écrivain, tailles de fichiers, couverture du verrouillage du schéma, fichiers orphelins et tendances de croissance.

Design Ship

Transformez une URL ou un bundle de transfert Claude Design en une PR GitHub révisable avec des stories Storybook générées, des tests Playwright et une vérification avant/après.

Dream — Consolidation de la Mémoire

Consolidation nocturne automatisée de la mémoire : nettoie les fichiers de mémoire obsolètes, fusionne les doublons, résout les contradictions et reconstruit les index de MEMORY.md de manière déterministe

Architecture Adaptée au Périmètre

Évite le sur-ingénierie en adaptant les modèles architecturaux au périmètre réel du projet grâce à un système de classification à 6 niveaux.

Patterns Responsifs

Patterns pratiques pour des interfaces utilisateur responsives : container queries, typographie fluide, mises en page intrinsèques et support des appareils pliables pour les composants React.

Vérifier

Exécute une vérification complète : agents parallèles pour les tests, la sécurité, la couverture, la notation et des suggestions d'amélioration ; produit un rapport de vérification basé sur des preuves.

Compétences similaires

Scientific Schematics & Diagrams

Generate publication-quality scientific diagrams via AI with iterative quality review and smart regeneration for journal, conference, poster, and presentation o

Colorize (Strategic UI Color)

Introduce purposeful color into monochromatic or dull interfaces to improve hierarchy, meaning, and emotional warmth while preserving accessibility.

OpenTestAI

Automated, high-confidence AI testing: bug detection, persona feedback, and prioritized test-case generation using many specialized tester profiles.

Shopify Store Audit

Structured, page-by-page audit of Shopify storefronts to find conversion blockers and prioritized fixes for copy, UX, trust signals, and checkout friction.

Cognitive Accessibility Specialist

Audits content, forms and authentication flows for cognitive accessibility (WCAG 2.2 / COGA) and gives prioritized remediation and plain-language guidance.

Manim Idea to Export

Turn plain-language concepts into production-ready ManimCE scene blueprints, runnable code, preview renders, and final export commands for video assets.

Agent Browser — Core

Core usage guide for agent-browser: snapshot-and-ref browser automation to navigate pages, interact with elements, extract data, take screenshots, manage sessio

React Development Expert

Provides authoritative React guidance on hooks, state patterns, Server Components, performance optimization, and common architectural patterns.