mcpField
D
delight

delight

github.com/educlopezデザイン・UI407564 回インストール2 週間前に更新
リポジトリ

delight について

delight は ui-craft の UI 仕上げ用サブスキルで、デザインや開発の作業に使います。モーション強度に応じて文案、ホバー、状態遷移、特徴的な細部を選び、コードを直接編集します。

主な機能

  1. 01具体的な UI 文言で趣向を加える
  2. 02連動するホバー効果の追加
  3. 03状態遷移とマイクロアニメーションの追加
  4. 04モーション強度に応じた変更範囲の制御
  5. 05コード編集とレビュー表の作成

活用シーン

  1. 01確認メッセージを具体的にする
  2. 02単一カードのホバーフィードバック設計
  3. 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 スキルを読み込んでください。

喜びを生むのは具体性であり、装飾ではありません。 目指すのは、ユーザーがスクリーンショットに撮りたくなる瞬間を一つか二つ作ることです。紙吹雪でも、バウンスでも、絵文字でもありません。

候補(安全性の高い順。上から始めてください):

  1. 具体的なコピー — 確認トーストでは対象を明示します(「3 人を招待しました — Alex、Sam、Jordan」。「招待を送信しました」ではありません)。空の状態では、気の利いた表現を使いつつ、寒い表現は避けます(「まだ何もありません — 最初のプロジェクトを追加しましょう」>「おっと!空っぽのようです 😅」)。
  2. ホバーの振り付け — 複数のプロパティ(transform + color + shadow)を、共通の duration/easing で連動させます。対象はカード一枚にとどめ、すべてのカードには適用しません。
  3. 状態遷移 — 楽観的 UI + ささやかな成功マイクロアニメーション(チェックマークの線を描画する、数値をカウントアップする、更新された行を控えめに拡大して元に戻す)。
  4. 特徴的なディテールを一つ — ドメインに関連付けたカスタムのリストマーカー、特定のセクションだけの非対称なカラムオフセット、実際の何か(読書の進捗やフォームの入力完了度など)を示すスクロール連動の進捗表示。

追加してはいけないもの:

  • バウンスイージング(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 段階)。

コメント