Synthèse automatique
Cette compétence aide à concevoir et implémenter des animations, micro-interactions et transitions d'interface utilisateur tout en préservant l'accessibilité et les performances.
Points forts
- Met l'accent sur la conception d'expérience basée sur les transitions d'état et le temps plutôt que sur l'apparence visuelle seule.
- Intègre systématiquement des contraintes d'accessibilité (prefers-reduced-motion, focus, contraste) et de performance (INP, LCP).
- Propose une approche progressive : prototype minimal puis validation avant enrichissement.
- Fournit un checklist concret pour éviter les pièges courants (surcharge d'animation, scroll lourd, etc.).
Limites
- Requiert une bonne compréhension technique des animations CSS/JS et des métriques de performance.
- Peut être trop contraignant pour des projets rapides où l'animation n'est pas critique.
- Nécessite un travail d'adaptation pour les équipes peu familières avec les standards d'accessibilité.
À utiliser lorsque vous devez ajouter des animations significatives et des micro-interactions à une UI web sans sacrifier l'accessibilité ni les performances.
À éviter pour des interfaces purement statiques, des projets rapides sans exigences d'expérience utilisateur poussées, ou lorsque l'animation est simplement décorative sans gain fonctionnel.
Analyse de sécurité
SûrThe skill contains only advisory design and implementation guidelines for UI animations and interactions. It does not instruct any executable commands, file system access, or network operations that could be misused. No dangerous tool use is declared or implied.
Aucun point d'attention détecté
Comment cette analyse est faiteExemples
Add a scroll-triggered entrance animation for sections on this landing page. Make elements fade in and translate upward when they come into view. Ensure it respects prefers-reduced-motion and does not cause layout shifts or affect INP.Design a micro-interaction for the primary call-to-action button: on hover, animate a subtle scale and shadow change. Ensure it works with keyboard focus as well and has a smooth transition using transform/opacity. Add a reversed animation for mouse leave.Optimize the page transition animation for route changes in this React app. Use FLIP techniques or CSS view transitions to avoid layout thrashing. Ensure INP stays under 200ms and LCP is not worsened. Test with reduced motion preference.name: creative-coder category: role user-invocable: false description: 体験品質（動き/触感/視線誘導）を「実装可能な制約」に落とし、アクセシビリティとパフォーマンスを犠牲にせずに表現を実現する。UIの表現・アニメーション・インタラクション設計/実装の相談で使う。
Creative Coder Skill
発火条件（リポジトリ判定）
- 依頼が「アニメーション」「インタラクション」「表現」「演出」「マイクロUX」「没入感」「スクロール/トランジション」なら適用する。
doc/input/rdd.mdにデザイン方針やトーンがあれば必ず参照する。
このSkillの基本方針（整理軸）
- 基本方針: 体験は「見た目」ではなく「状態遷移」と「時間」の設計。
- 制約優先: アクセシビリティとパフォーマンスを守る（prefers-reduced-motion、GPU負荷、INP/LCP）。
- 実装戦略: まず最小のプロトタイプで確認し、価値がある演出だけを残す。
思想（判断ルール）
- 動きは情報であり、ノイズにもなる。目的（視線誘導/状態変化の理解/気持ちよさ）を言語化する。
- すべてを動かさない。重要な瞬間だけ動かす（メリハリ）。
- a11yを壊さない（動きの抑制、コントラスト、フォーカス、操作可能性）。
- パフォーマンスは体験そのもの。レイアウトスラッシングを避け、軽い手段から選ぶ。
- 実装は「戻せる」ことが大事。切り替え可能な構成で入れる。
進め方（最初に確認する問い）
- この動きでユーザーに何を理解してほしい？（目的）
- どの環境が想定？（モバイル/低スペック/回線）
- どの操作に紐づく？（hover/click/scroll/route）
- reduced motion への対応は必要？（必要なら必須）
出力フォーマット（必ずこの順）
- 目的（体験として何を達成するか）
- 仕様（トリガー/状態/時間/イージング/停止条件）
- 実装方針（最小手段→必要なら段階的に強化）
- a11y配慮（reduced motion/フォーカス/操作）
- パフォーマンス配慮（計測ポイント）
- 次アクション（プロトタイプ→統合）
チェックリスト
- [ ] 動きの目的が説明できるか（見た目のためだけになっていないか）
- [ ]
prefers-reduced-motionに対応しているか - [ ] 重要操作（キーボード/フォーカス）が阻害されていないか
- [ ] レイアウト計算を増やしていないか（transform/opacity優先）
- [ ] 体感指標（INP/LCP）に悪影響がないか
よくある落とし穴
- 何でもアニメーションして情報密度が下がる
- reduced motion を無視して不快/危険な体験になる
- 重い実装（scrollハンドラ乱用等）でINPが悪化する
Du fichier au premier essai
Le téléchargement contient exactement le contenu affiché sur cette fiche. Cette copie peut différer de la dernière version du dépôt source.
Consulter la source et ses fichiers annexesCe téléchargement contient uniquement SKILL.md. Les scripts, références, modèles et dépendances éventuels ne sont pas inclus. Récupérez les fichiers nécessaires depuis la source en conservant leur arborescence avant de poursuivre.
1. Télécharger le fichier
Télécharger SKILL.mdDepuis la racine d’un projet de test, enregistrez le fichier sous .skill-downloads/creative-coder-mm8o514a/SKILL.md, ou utilisez la commande suivante. Ce dossier sert à examiner la skill avant son installation.
Commande pour macOS/Linux ou WSL : un shell POSIX et curl sont nécessaires. Sous Windows sans WSL, utilisez le bouton de téléchargement et créez le dossier manuellement.
mkdir -p '.skill-downloads/creative-coder-mm8o514a' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/creative-coder-mm8o514a/download' --output '.skill-downloads/creative-coder-mm8o514a/SKILL.md.part' && mv '.skill-downloads/creative-coder-mm8o514a/SKILL.md.part' '.skill-downloads/creative-coder-mm8o514a/SKILL.md'2. Vérifier les prérequis
Lisez SKILL.md avant de l’utiliser. Si le fichier cite des scripts ou services externes, examinez-les et préparez les accès nécessaires dans votre environnement de test.
Aucune section de prérequis reconnue dans ce fichier. Cela ne signifie pas qu’il est autonome : les bibliothèques, outils et accès peuvent être cités ailleurs dans le contenu ou dans le dépôt source.
Les plateformes de la fiche sont des indications du catalogue. Les chemins ci-dessous suivent la documentation des outils ; ils ne prouvent pas que cette skill y a été exécutée. Aucune version minimale de ces outils n’est attestée pour cette fiche.
3. Charger la skill
Après vérification, copiez le dossier complet dans le projet avec l’une des commandes ci-dessous, puis ouvrez une nouvelle session de l’outil. La commande s’arrête si un dossier du même nom existe déjà : comparez les fichiers avant de le remplacer.
Claude Code
test -f '.skill-downloads/creative-coder-mm8o514a/SKILL.md' && test -s '.skill-downloads/creative-coder-mm8o514a/SKILL.md' && mkdir -p '.claude/skills' && test ! -e '.claude/skills/creative-coder' && cp -R '.skill-downloads/creative-coder-mm8o514a' '.claude/skills/creative-coder'Cursor
test -f '.skill-downloads/creative-coder-mm8o514a/SKILL.md' && test -s '.skill-downloads/creative-coder-mm8o514a/SKILL.md' && mkdir -p '.cursor/skills' && test ! -e '.cursor/skills/creative-coder' && cp -R '.skill-downloads/creative-coder-mm8o514a' '.cursor/skills/creative-coder'OpenSkills
OpenSkills doit déjà être installé. La procédure locale install/read est contrôlée avec OpenSkills 1.5.0, qui exige Node.js ≥ 20.6.0. Aucun slug du catalogue n’est résolu automatiquement.
Installation officielle d’OpenSkillsopenskills install './.skill-downloads/creative-coder-mm8o514a'openskills read 'creative-coder-mm8o514a'La lecture doit afficher le contenu du fichier installé et son dossier de base. Elle ne lance ni la skill ni ses dépendances.
Pour un agent qui lit AGENTS.md, synchronisez ensuite l’index. Cette commande modifie AGENTS.md : relisez le diff avant de l’utiliser.
openskills syncMode manuel ou autre outil : joignez SKILL.md à une conversation, ou ouvrez-le dans un agent capable de lire les fichiers. Ajoutez les ressources annexes nécessaires. Il n’existe pas de dossier universel reconnu par tous les outils.
4. Faire un premier essai
Utilisez une entrée courte et fictive : un endpoint d’API, un petit document ou un brief d’interface. Dans une nouvelle conversation, joignez le fichier ou donnez son chemin à l’agent, puis adaptez cette demande :
Lis .skill-downloads/creative-coder-mm8o514a/SKILL.md et applique ses instructions à cet exemple : [décrire une entrée de test]. Indique les fichiers, dépendances ou accès qui manquent. Produis le résultat demandé par la skill sans inventer de données ni exécuter de script non examiné.Résultat attendu : une sortie correspondant aux instructions de la skill, ou une liste précise des prérequis manquants. Une simple confirmation de lecture ne valide pas le premier usage. Si une ressource externe est indisponible, ce parcours reste à tester.
Bonnes pratiques React Hook Form
Developpement
Maîtrisez React Hook Form : évitez les anti-patterns, gérez les abonnements, et traitez correctement reset, dirty state et entrées contrôlées.
Migration Emotion vers Mantine
Developpement
Migrer les styled-components Emotion vers des composants Mantine avec style props et modules CSS. Pour convertir .styled.tsx ou supprimer les imports @emotion.
Détecteur de dérive de périmètre
Developpement
Analyse les diffs git par rapport à une intention pour détecter la dérive de périmètre, fichiers non liés et PR trop larges, puis suggère de garder, diviser ou justifier.