メニュー
Guidelines and examples for UI motion and animation. Use when designing, implementing, or reviewing motion, easing, timing, reduced-motion behaviour, CSS transitions, keyframes, framer-motion, or spring animations.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/joelhooks/joelclaw --skill ui-animationコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Build, debug, and maintain Pi extensions safely. Use when editing ~/.pi/agent/extensions, joelclaw/pi/extensions, pi-tools extensions, or any code that uses the Pi ExtensionAPI, hooks, tools, commands, widgets, session replacement, reload, custom messages, or extension package updates.
Set up and repair thin joelclaw satellite Machines such as blaine/Dark-Tower. Use when adding joelclaw CLI, Typesense access, session search/capture, Central relay, or satellite health on non-Panda machines. Triggers: satellite, blaine, Dark-Tower, setup joelclaw on another machine, Typesense access on satellite, joelclaw satellite health.
Canonical joelclaw topology, Central/Relay vocabulary, and wiring map. Use when reasoning about architecture, Panda/Flagg Central migration, satellites, run capture, tracing event flow, debugging why something ran/didn't run, identifying which worker executes a function, checking what listens on a port, or following an event end-to-end.
SOC 職業分類に基づく
SKILL.md を表示中
| name | ui-animation |
| description | Guidelines and examples for UI motion and animation. Use when designing, implementing, or reviewing motion, easing, timing, reduced-motion behaviour, CSS transitions, keyframes, framer-motion, or spring animations. |
| disable-model-invocation | true |
prefers-reduced-motion (reduce or disable).transform and opacity.color, background-color, and opacity transitions are acceptable.transition: all.filter animation for core interactions; if unavoidable, keep blur <= 20px.<g> wrapper with transform-box: fill-box; transform-origin: center.transform-origin at the trigger point.scale(0.85-0.9); avoid scale(0).cubic-bezier(0.22, 1, 0.36, 1).cubic-bezier(0.25, 1, 0.5, 1).200ms ease.ease-in for UI (feels slow).transform is used, disable it in prefers-reduced-motion.@media (hover: hover) and (pointer: fine).will-change only during heavy motion and only for transform/opacity.transform over positional props in animation libraries.prefers-reduced-motion.