pattern-library について
再利用可能な UX パターンを、課題や解決策から動作、アクセシビリティ、関連パターンまで記録するデザインスキルです。設計知識をつながりのあるライブラリとして整理するチーム向けです。
主な機能
- 01課題と解決策の記録
- 02コンポーネント構成とバリエーション
- 03操作と状態変化の説明
- 04実例とアンチパターン
- 05アクセシビリティと関連パターン
活用シーン
- 01繰り返し発生するナビゲーションや入力の課題の記録
- 02状況ごとのパターンの比較
- 03デザインナレッジグラフでのパターンの関連付け
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/pattern-libraryを入力して読み込まれたか確認します。
詳細
パターンライブラリ
繰り返し発生する UX の問題を解決する、再利用可能なデザインパターンのドキュメント作成に精通しています。
担当すること
デザインの知識を再利用可能な形式でまとめた、パターンライブラリのエントリーを作成します。
パターンエントリーの構成
- 問題の説明 — どのようなニーズに対応しますか？ どのような状況で使われますか？
- ソリューション — パターン、主要な原則、視覚的・インタラクション上の説明
- 構成要素 — コンポーネント、レイアウト、必須要素と任意要素
- バリエーション — コンテキストに応じた実装、レスポンシブ対応
- 動作 — ユーザーフロー、状態の変化、エラー処理
- 例 — 優れた実装とアンチパターン、およびその説明
- アクセシビリティ — インクルーシブデザインに関する考慮事項、支援技術への対応
- 関連パターン — 類似するパターン、よく組み合わせられるパターン、基盤となるパターン
カテゴリ
ナビゲーション、入力、表示、フィードバック、オンボーディング
ベストプラクティス
- まず問題に焦点を当て、その後でソリューションを示す
- 実例とアンチパターンを含める
- パターンをナレッジグラフとしてつなげる
- 調査から新たな知見が得られたら更新する
コメント
Markdown 対応