delight について
delight は ui-craft の UI 仕上げ用サブスキルで、デザインや開発の作業に使います。モーション強度に応じて文案、ホバー、状態遷移、特徴的な細部を選び、コードを直接編集します。
主な機能
- 01具体的な UI 文言で趣向を加える
- 02連動するホバー効果の追加
- 03状態遷移とマイクロアニメーションの追加
- 04モーション強度に応じた変更範囲の制御
- 05コード編集とレビュー表の作成
活用シーン
- 01確認メッセージを具体的にする
- 02単一カードのホバーフィードバック設計
- 03更新後の状態に控えめなアニメーションを追加
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ educlopez/ ui-craft --skill delightインストール後、Claude Code で/delightを入力して読み込まれたか確認します。
詳細
コンテキスト: このサブスキルは、より広範な ui-craft スキルの一つの観点です。ui-craft スキルもインストールされている場合は、まずその SKILL.md を読んで、Discovery + Anti-Slop + Craft Test を確認してから、以下の個別の観点を適用してください。
$ARGUMENTS の UI に喜びを加えてください。ui-craft スキルを読み込んでください。
喜びを生むのは具体性であり、装飾ではありません。 目指すのは、ユーザーがスクリーンショットに撮りたくなる瞬間を一つか二つ作ることです。紙吹雪でも、バウンスでも、絵文字でもありません。
候補(安全性の高い順。上から始めてください):
- 具体的なコピー — 確認トーストでは対象を明示します(「3 人を招待しました — Alex、Sam、Jordan」。「招待を送信しました」ではありません)。空の状態では、気の利いた表現を使いつつ、寒い表現は避けます(「まだ何もありません — 最初のプロジェクトを追加しましょう」>「おっと!空っぽのようです 😅」)。
- ホバーの振り付け — 複数のプロパティ(transform + color + shadow)を、共通の duration/easing で連動させます。対象はカード一枚にとどめ、すべてのカードには適用しません。
- 状態遷移 — 楽観的 UI + ささやかな成功マイクロアニメーション(チェックマークの線を描画する、数値をカウントアップする、更新された行を控えめに拡大して元に戻す)。
- 特徴的なディテールを一つ — ドメインに関連付けたカスタムのリストマーカー、特定のセクションだけの非対称なカラムオフセット、実際の何か(読書の進捗やフォームの入力完了度など)を示すスクロール連動の進捗表示。
追加してはいけないもの:
- バウンスイージング(
cubic-bezier(0.68, -0.55, 0.27, 1.55))— anti-slop で禁止されています。 - ファイルの保存やフィールドの更新など、日常的な操作への紙吹雪。
- 絵文字の多用や、すべて大文字の「🎉 SUCCESS!」。
- 待機する理由のない要素への、アイドル状態の浮遊・上下動・きらめき。
ノブの設定(MOTION_INTENSITY):
≤ 3→ コピーだけで喜びを加えます。アニメーションによる演出は禁止です。候補 1 のみ。4-7→ コピー + ホバー + 状態遷移(候補 1〜3)。8+→ 特徴的なディテールも含め、4 つすべて。
読むリファレンス:references/motion.md(Decision Ladder + インタラクションルール)、references/copy.md(マイクロコピーのトーン)、../examples/animation-storyboard.md(複数段階の場合)。
出力:コードを直接編集してください。Review Format の表を出力してください。採用しなかった候補はすべて、その理由とともに明記してください。
次のステップ: /finalize — 喜びを加えるのは最後の追加パスです。リリース前にゲートで確認してください(第 3 段階)。