01
このSkillでできること
- ✓MASC Cockpitの画面設計を既存パターンに合わせる
- ✓状態表示、KPI、カード、タブ、アクティビティ行を設計する
- ✓高密度な管理画面の色・文字・余白を統一する
- ✓compact・normal・comfyの表示密度に対応する
02
使い方
01
STEP 1
プロジェクトルートのREADME.mdとtokens/source.tsを確認する
02
STEP 2
preview/*.htmlとui_kits/cockpit/の既存パターンを参照する
03
STEP 3
新しいトークンはSPEC.md、source.ts、トークンビルドの流れで追加する
04
STEP 4
画面ごとに既存コンポーネントと状態表現を組み合わせる
03
Skillのインストール
初心者におすすめ
AIにこのSkillを追加してもらう
GitHub URLごとCodexやClaude Codeへ渡し、現在の環境に合う方法を判断してもらいます。
このGitHubリポジトリにあるSkillを確認し、現在の環境に適した方法でインストールしてください。
インストール後、正常に利用できることを確認し、基本的な使い方も簡潔に説明してください。
Repository:
https://github.com/jeong-sik/masc手動でインストールする
README / SKILL.mdから機械抽出できたコマンドのみ表示しています。推測したコマンドではありません。
git clone https://github.com/jeong-sik/masc.git
cd masc
scripts/opam-pin-external-deps.sh --install
opam install . --deps-only
./quickstart.sh
BASE_PATH="${MASC_QUICKSTART_HOME:-$HOME/masc-quickstart}"
source "$BASE_PATH/.masc/config/mcp-client.env"
curl http://127.0.0.1:8935/healthTAG=vX.Y.Z
curl -fsSL "https://raw.githubusercontent.com/jeong-sik/masc/${TAG}/scripts/install.sh" \
-o /tmp/masc-install.sh
less /tmp/masc-install.sh
bash /tmp/masc-install.sh --version "$TAG"curl -fsS 'http://127.0.0.1:8935/health?full=1' \
| jq '.paths | {effective_base_path, effective_masc_root, roots_diverge}'04
このSkillを使うプロンプト例
Skill名を明示すると、意図したSkillを使わせやすくなります。自動発動型では必須とは限りません。
MASC Cockpitのタスク一覧画面を、既存のデザインシステムに合わせて設計してください。状態、KPI、密度設定、アクセシビリティを確認してください。出力例を見る
既存パターンに基づく画面構成、使用トークン、状態表現、レスポンシブ密度の設計案。05
安全性チェック
自動解析による参考情報です。Skillの安全性を保証するものではありません。
外部API通信検出あり
Shellコマンド実行明確な記述なし
ファイル読み取り明確な記述なし
ファイル書き込み明確な記述なし
ネットワークアクセス検出あり
認証情報明確な記述なし
検出根拠を見る
- network: - Respect `prefers-reduced-motion`. # MASC [](https://ocaml.org/) [](https://ocaml.org/) [](LICENSE) [한국
06