craft-signals について
Craft Signalsは、会話に細かな品質基準を適用するデザインスキルです。一貫性、画面の状態、配置、モーションの振る舞いを重視します。
主な機能
- 01コンポーネントの角丸と動作の統一
- 02ピクセル単位の配置確認
- 03画面状態の網羅
- 04トランジション時間の指針
- 05モーションとローディングのアンチパターン
活用シーン
- 01画面の一貫性の確認
- 02ローディング・エラー・空状態の検討
- 03インタラクションの遷移改善
- 04デザイン作業での品質基準の適用
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/craft-signalsを入力して読み込まれたか確認します。
詳細
Craft Signals
「デザインされている」ものと「よくデザインされている」ものを分ける細部。
使い方
/craft-signalsこの会話にクラフト品質の制約を適用します。
制約
一貫性のチェック
- MUST 同じスケール（4、8、12、16など。ここは4で、あちらは5といった不一致は避ける）の角丸を一貫して使用する
- MUST 意図した箇所の配置をピクセル単位で正確に揃える。わずかにずれた配置は、意図的なずらしより見栄えが悪くなります。
- MUST 同じコンポーネントは、どこで使われても同じ見た目と動作にする
- SHOULD トランジションで同じイージングカーブを使い、所要時間を比例したスケールにする
状態の網羅
- MUST すべての状態（読み込み中、空、エラー、成功、一部表示、オーバーフロー、切り詰め）に対応する
- MUST ブラウザーのデフォルトに頼らず、各状態を意図的にデザインする
- SHOULD エラーメッセージは汎用的なものではなく、具体的で対処方法が分かるものにする
- SHOULD 読み込み中の状態では、これから表示される内容の位置や形が分かるようにする（スピナーよりスケルトンを使う）
トランジションの品質
- フィードバックのトランジション（ボタンの押下、トグル）：50～150ms。ほぼ瞬時に完了させます
- ナビゲーションのトランジション（ページの切り替え、パネルを開く）：200～400ms。変化が分かる程度に、ただし素早く完了させます
- 強調のトランジション（通知、お祝い）：300～600ms。意図的に演出します
- アニメーションでコンテンツの表示を妨げてはなりません。アニメーションが終わるまで読むのを待つ必要があるなら、それは不具合です。
アンチパターン
- コンポーネントの種類ごとに角丸が不統一
- 実際の読み込み時間より長く続く読み込み中の状態
- 対処方法が示されず、「問題が発生しました」とだけ表示するエラー状態
- あらゆる要素にホバー効果を付けること（動きは注意を促すために使い、視覚的なノイズを生み出さないようにします）
コメント
Markdown 対応