design-system｜AIスキル大辞典

このSkillでできること

✓MASC Cockpitの既存UIパターンに沿った画面設計を支援する
✓トークン、色、タイポグラフィ、間隔などのデザイン基盤を参照できる
✓チップ、KPIセル、カード、タブ、アクティビティ行などの構成要素を使い分ける
✓表示密度、モーション、ステータス表現などの設計ルールを適用する

使い方

STEP 1

プロジェクトルートのREADME.mdを読み、コンテンツ・文体・ビジュアル基盤を確認する

STEP 2

tokens/source.tsをトークンの正規ソースとして参照する

STEP 3

必要に応じて生成済みCSSやpreview/*.htmlで解決済みの値と見た目を確認する

STEP 4

新しいUIはui_kits/cockpit/の既存パターンを基にし、独自パターンを作らない

Skillのインストール

AIにこのSkillを追加してもらう

GitHub URLごとCodexやClaude Codeへ渡し、現在の環境に合う方法を判断してもらいます。

このGitHubリポジトリにあるSkillを確認し、現在の環境に適した方法でインストールしてください。
インストール後、正常に利用できることを確認し、基本的な使い方も簡潔に説明してください。

Repository:
https://github.com/jeong-sik/masc

手動でインストールする

README / SKILL.mdから機械抽出できたコマンドのみ表示しています。推測したコマンドではありません。

TAG=v0.49.0
curl -fsSL "https://github.com/jeong-sik/masc/releases/download/${TAG}/install.sh" \
-o /tmp/masc-install.sh &&
bash /tmp/masc-install.sh --version "$TAG"

git clone https://github.com/jeong-sik/masc.git
cd masc
opam init --bare
opam switch create . ocaml-base-compiler.5.5.1 --no-install
eval "$(opam env)"
scripts/opam-pin-external-deps.sh
opam install ./masc.opam --deps-only --locked
opam exec -- dune build bin/main_eio.exe bin/masc_tui.exe
corepack enable
corepack prepare pnpm@10.31.0 --activate
scripts/build-dashboard-if-needed.sh --force

mkdir -p ~/.local/bin
ln -sf "$PWD/_build/default/bin/main_eio.exe" ~/.local/bin/masc
ln -sf "$PWD/_build/default/bin/masc_tui.exe" ~/.local/bin/masc-tui

curl -fsS 'http://127.0.0.1:8935/health?full=1' \
| jq '.paths | {effective_base_path, effective_masc_root, roots_diverge}'

このSkillを使うプロンプト例

Skill名を明示すると、意図したSkillを使わせやすくなります。自動発動型では必須とは限りません。

MASC Cockpitの既存パターンに合わせて、keeperの稼働状況を表示する画面を設計してください。チップ、KPIセル、アクティビティ行を使い、データはモノスペース、ラベルは大文字、選択状態の真鍮色は1画面で1用途に限定してください。

出力例を見る

既存のui_kits/cockpit/パターンに準拠した構成案：KPIセルで稼働数と単位を表示し、アクティビティ行に時刻・ステータス・keeper名・簡潔な結果を配置。選択状態には真鍮色を使用し、余白と行高はcompact／normal／comfyに対応。

安全性チェック

自動解析による参考情報です。Skillの安全性を保証するものではありません。

外部API通信明確な記述なし

Shellコマンド実行明確な記述なし

ファイル読み取り明確な記述なし

ファイル書き込み明確な記述なし

ネットワークアクセス明確な記述なし

認証情報明確な記述なし

design-system

このSkillでできること

使い方

Skillのインストール

AIにこのSkillを追加してもらう

このSkillを使うプロンプト例

安全性チェック

関連Skill

add-product-e2e-eval

orbit-orchestrate

build-scientific-visualizations