engram-ui-elements について
Engram のダッシュボードページやコンポーネントを作るコントリビューター向けの UX スキルです。ナビゲーション、空状態、メトリクスの設計と、カードやテーブル、操作項目の配置を案内します。
主な機能
- 01エンティティ間をつなぐナビゲーション
- 02情報を伝える空状態の指針
- 03システム状態に基づくメトリクス
- 04内容に応じたカードとテーブルの選択
- 05対象の近くに操作項目を配置
活用シーン
- 01ダッシュボードページやパーシャルの追加
- 02エンティティ一覧や詳細画面の設計
- 03空状態でデータ不足の理由を説明
- 04内容に応じてカードかテーブルを選ぶ
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/engram-ui-elementsを入力して読み込まれたか確認します。
詳細
使用する場面
次の場合にこのスキルを使用します。
- ダッシュボードに新しいページや部分ページを追加するとき
- カード、メトリクス、テーブル、リスト、詳細ビューを作成するとき
- 関連エンティティ間をつなぐナビゲーションを設計するとき
UX ルール
- ドメイン上の関連性がある場合、すべてのリスト項目から有用なページに移動できるようにします。
- つながりのあるフローを優先します。プロジェクト -> セッション -> オブザベーション -> 詳細全体。
- 空の状態では、何が不足しているのか、データを利用するには何が必要なのかを説明します。
- メトリクスには、装飾的なカウンターではなく、システムの実際の状態を反映させます。
- 詳細ページには、メタデータ、コンテンツ、および次に関連するリンクを表示します。
構成ルール
- メトリクスは状況を把握するために使用し、主要コンテンツの代わりにしないでください。
- 閲覧可能なエンティティにはカードを使用し、比較項目の多い管理データにはテーブルを使用します。
- ユーザーに必要な階層を伝える場合を除き、枠で囲まれたボックスを入れ子にするのは避けます。
- 操作コントロールは、対象となるエンティティの近くに配置します。
コメント
Markdown 対応