メニュー
Recommend an easing curve for a specific animation feel or UI pattern. Use when asking "what easing for a dropdown?", "suggest a spring curve", "I want it to feel snappy", or describing how a transition should feel.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/roydigerhund/easingwizard --skill recommend-curveコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Scan the entire project for animations using default or missing easings and produce a prioritized improvement report. Use when asking "audit my CSS animations", "scan the project for bad transitions", or "give me a report on all my easings".
Suggests professional easing curves when writing or editing CSS transitions, animations, or Tailwind motion utilities. Use when adding transition-timing-function, animation-timing-function, ease-[] classes, or when the user wants something to "feel" a certain way (snappy, smooth, bouncy).
Add or improve easing curves in specific CSS or Tailwind files. Use when asking "improve the transitions in this file", "replace the default ease", "add easing to my animations", or "make this animation snappier".
SKILL.md を表示中
SOC 職業分類に基づく
| name | recommend-curve |
| description | Recommend an easing curve for a specific animation feel or UI pattern. Use when asking "what easing for a dropdown?", "suggest a spring curve", "I want it to feel snappy", or describing how a transition should feel. |
| allowed-tools | mcp__easingwizard__get_presets, mcp__easingwizard__create_bezier_curve, mcp__easingwizard__create_spring_curve, mcp__easingwizard__create_bounce_curve, mcp__easingwizard__create_wiggle_curve, mcp__easingwizard__create_overshoot_curve |
| disable-model-invocation | true |
The user wants an easing curve recommendation. Follow this process:
Ask the user (if not already clear) what animation they're building. What element is being animated? What feeling should it convey? (e.g., "snappy," "gentle," "playful," "professional")
Use the get_presets tool to retrieve all available presets. Match the user's description to the most appropriate preset based on:
If a preset matches well, recommend it with clear reasoning connecting the curve's physics to the desired feel.
Only generate a custom curve (via create tools) if no preset adequately matches the description.
Always call with verbose: true to include the preview link.
Present the recommendation in this format:
Recommendation: [Preset name or "Custom curve"] Type: [BEZIER/SPRING/BOUNCE/WIGGLE/OVERSHOOT] Why: [1-2 sentences connecting the curve physics to the desired feel]
CSS:
transition-timing-function: [value];
Tailwind:
class="[ease-[...] class]"
Preview: [easingwizard.com share URL]
IMPORTANT: Always present CSS and Tailwind values inside fenced code blocks (triple backticks) with the appropriate language tag (css, html). This makes them easy to copy. Never output them as plain text.