スキル

Interface Design:ダッシュボードと管理画面に覚えられる画面規則を置く

ダッシュボード、アプリ、ツール、管理画面を、セッションをまたいで保てる画面系統にしたい人向け。ただし仕事が販促サイトではなく、スキルがコーディング代理と同じ権限を共有することを先に確認する。

公式ソース · Interface Design

インストール

npx skills add https://github.com/dammyjay93/interface-design --skill interface-design

誰向けか

ダッシュボード、内部アプリ、ツール、管理画面を、繰り返せる画面系統にしたいとき、販促の着地ページではないときに、このスキルを使う。先に画面の意図を固め、あとのセッションも同じ規則で進める。毎回いちから作り直さない。

公式説明は範囲を狭く書く:interface design 向け、具体は dashboards、apps、tools、admin panels。販促サイトではないと明記。仕事が宣伝ページ、ブランド公式、キャンペーンページ、販売着地ページなら、これを主経路にしない。

もう一つの前提は権限。説明は、スキルがコーディング代理と同じ権限一式を使うと書く。だから入れたあと、本当に画面を変える前に、スキルファイルを開き、許されていることを読み切る。根拠は Claude Code 以外のクライアント名を出さない。「関連すれば自動で呼び出す」を全プラットフォーム能力とも書いていない。書いていない環境は、すでに使えると思わない。

3 分で最初の試行を終える

公式ページが認めるのはここだけ:

https://github.com/dammyjay93/interface-design

推奨インストール経路もこれだけ。先にリポジトリ住所を照合し、入れるのがこのスキルだと確認してから、本機の端末で実行する:

npx skills add https://github.com/dammyjay93/interface-design --skill interface-design

コマンドの副作用は、中核スキルを ~/.claude/skills/interface-design へ入れること。実行後、そのディレクトリを開き、スキルファイルが着地したのを見てから会話に入る。ディレクトリが無い、またはコマンドが失敗したら止める。公式説明に無いインストーラやディレクトリに切り替えない。

Claude Code では /interface-design で明示的に呼び出す。最初は照合だけ、ディスクへ書かない。既存の管理画面またはダッシュボードページを選び、この画面が守るべき構造とコンポーネント規則、いまファイルへ書いてはいけない判断を言わせる。業務コードを変えさせず、.interface-design/system.md も作らせない。

観察できる成功の合図は二つ。会話にダッシュボードまたは管理画面向け(販促ページではない)の規則が出ること。かつ ~/.claude/skills/interface-design で今入れたスキルファイルを開けること。どちらかが合わなければ、インストールと呼び出しで止める。ファイル書きに入らない。

利用事例

事例一:既存の管理画面で画面意図を揃える。実在の admin panel、内部ツール、ダッシュボードを開き、/interface-design で「意図をもって画面を組む」としていまの構造を確認させる。どの区画が系統の一貫性を保つべきか、どれを販促サイトの物語のように並べてはいけないか。この事例は dashboards、apps、tools、admin panels だけ。説明はゼロからサイト全体を生成する実演も、販促ページの書き直し手順も無い。

事例二:すでに合意した画面判断を残し、次のセッションで続ける。先に会話で覚える規則をいくつか列挙する。ディスクへ書いてよいと確認してから、スキルに .interface-design/system.md を書かせる。書いたらすぐそのファイルを開き、さっきの数条と合うか照合する。次にスキルを走らせたとき、これらの判断を再読み込みできるべき。説明は .interface-design/system.md への保存と、スキル実行時の reload まで。複数リポジトリ共有、衝突マージ、自動上書きは書いていない。欠けた部分は、開けて照合できるその一つのファイルで止める。

利用上の境界

販促サイトに使わない。公式文は適用範囲の直後に “Not for marketing sites” を置く。硬い境界であり、作風の助言ではない。

スキルとコーディング代理の権限は同じ。使う前に入れたスキル自体を読む。ファイルを見ていない状態で、リポジトリを変えさせたり記憶ファイルを書かせたりしない。

インストールと呼び出しは npx skills add、~/.claude/skills/interface-design、Claude Code の自動呼び出し、/interface-design までしか書いていない。他のマーケット、他のディレクトリ、出ていないクライアントを足さない。このコマンドを、説明が指名していないプラットフォームへ当てはめない。

記憶は .interface-design/system.md の保存と再読み込みまで。第二の保管、チーム同期、プロジェクト横断の継承を仮定しない。

説明に言語範囲、価格、Claude Code 以外の公式クライアント名簿は無い。根拠の無い項目は未知のまま。操作を補って書かない。