mcpField
S
skema

skema

github.com/bil0000デザイン・UI190 回インストール26 週間前に更新
リポジトリ

skema について

Skemaは、互換性のあるコーディングエージェント向けのデザインスキルです。デザインシステム、プロトタイプ、引き継ぎ資料、評価を扱い、決められた手順に沿って生成物を`.skema/`内に保存します。

主な機能

  1. 01デザインシステムと複数画面キャンバスの生成
  2. 02Playwrightで検証するクリック可能なプロトタイプ
  3. 03アニメーションのMP4またはGIF出力
  4. 04既存コードに合わせたスクリーンショット起点のコンポーネント生成
  5. 05採点式デザインレビューと引き継ぎパッケージ
  6. 06Figmaとの双方向同期

活用シーン

  1. 01Webやモバイル画面のデザインシステム作成
  2. 02既存コードベースに合わせた画面のスクリーンショット変換
  3. 03レビュー用の画面遷移可能なプロトタイプ作成
  4. 04Figmaからのデザイン取り込みやコンポーネント同期

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/bil0000/skema-skill --skill skema

インストール後、Claude Code で/skemaを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

README.md
.gitignore
commands/
migrate.md
modules/
00-install-hook.md
03-clone-engine.md
04-codebase-scan.md
02-design-interview.md
01-context-intake.md
00-router.md
05-web-research.md
06-system-selection.md
14-figma-push.md
10-prototype-mode.md
12-image-to-code.md
08-component-library.md
07-design-system-gen.md
11-animation.md
15-critique.md
09-canvas-mode.md
13-figma-pull.md
16-handoff.md
references/
token-architecture.md
anti-patterns.md
design-philosophies.md
handoff-spec-format.md
systems/
README.md
systems/editorial/
tokens.css
tokens.figma.json
system.md
tokens.json

詳細

Skema — マスターオーケストレーター

このファイルがエントリーポイントです。アクティブなコーディングエージェントは、Skema の呼び出しごとに必ず最初にこれを読みます。ここに記載されているすべてのルールには拘束力があります。解釈や逸脱は認められません。


1. Skema とは

Skema は、互換性のあるコーディングエージェント向けの唯一のデザインスキルです。次のものを作成します。

  • 完全なデザインシステム(トークン、コンポーネント、インタラクティブなプレビュー、Figma 対応)
  • マルチスクリーンキャンバス(Figma 形式の横並びモックアップ)
  • クリック可能なプロトタイプ(実際のナビゲーション、Playwright による検証済み)
  • アニメーション(HTML → MP4/GIF エクスポート、BGM、60fps)
  • AI 間の引き継ぎパッケージ(HANDOFF.md + トークン + 画面 + コンポーネント)
  • コードベースを考慮した再デザイン(既存のスタックを読み取り、それを拡張し、異質なものを持ち込まない)
  • URL から複製したデザインシステム(抽出 → リバースエンジニアリング → トークン化)
  • Figma との双方向同期(トークン/コンポーネントの取得、生成したシステムの送信)
  • 画像からコードへの変換(スクリーンショット → 既存のコードベースに適合する本番用コンポーネント)
  • スコア付き評価(8 つの観点でレビューし、7.0 未満では引き継ぎをブロック)

汎用的に使えます。impeccable、high-end-visual-design、image-to-code、minimalist-ui、redesign-existing-projects、design-taste-frontend、emil-design-eng、frontend-design で通常適用される原則を取り入れています。ホストエージェントが明示的に求める場合、またはユーザーが依頼する場合を除き、ほかのデザインスキルを呼び出さないでください。


2. 起動条件 — いつ有効にするか

スラッシュコマンド(完全一致 → ただちに有効化)

主要コマンド:/skema <subcommand>。後方互換エイリアスの /design <subcommand> と /design-engine <subcommand> も同じように動作します。

主要コマンドエイリアス意図
/skema web/design web, /design-engine webWeb アプリ、SaaS、ダッシュボード、社内ツール
/skema mobile/design mobile, /design-engine mobileiOS または Android のネイティブ画面
/skema system/design system, /design-engine system完全なデザインシステム(トークン + コンポーネント + ドキュメント)
/skema landing/design landing, /design-engine landingマーケティングサイト、ランディングページ、ヒーロー、料金プラン
/skema review/design review, /design-engine review評価のみのモード、生成なし
/skema import/design import, /design-engine import出発点として Figma から取り込む
/skema redraw/design redraw, /design-engine redraw既存画面を再デザインする(スクリーンショットを添付)
/skema migrate/design migrate, /design-engine migrate.design-engine/ → .skema/ への移行(commands/migrate.md)
自然言語でのトリガー(大文字・小文字を区別しない部分一致 → 有効化)
design this              redesign                  create UI
build interface          clone [url]               design system
component library        create prototype          hi-fi
hi fi                    high fidelity             mockup
mock up                  canvas                    design tokens
figma sync               figma push                figma pull
review this design       critique                  handoff
make this look better    polish this UI            ship-quality design
landing page             dashboard                 onboarding flow
auth screen              settings page             pricing page
screenshot to code       image to code             extract design system

ユーザーのメッセージにトリガーが含まれ、かつビジュアル/UI の作業について説明している場合は、有効化します。 「この CSS のバグを直して」のような曖昧なケースはトリガーではありません。これはデザイン作業ではなく、コード作業です。判断に迷う場合は、決めつけずに確認の質問を 1 つしてください。

起動しない条件
  • バックエンド、API、データベース、インフラのみの作業
  • ビジュアル出力に触れないバグ修正
  • 既存の UI を維持するリファクタリング
  • デザインと無関係なドキュメント作成

3. 基本理念 — 拘束力のあるルール

ルール 1 — まずデザインシステムを作る

すべての出力はデザインシステムから導き出します。パイプラインは固定されています。

Brief → Context Intake → Design System → Components → Output

手順を省略してはいけません。システムができる前に画面を生成してはいけません。画面内で値をハードコードしてはいけません。すべての値はトークンを参照します。

ルール 2 — 生成前に確認する

ピクセルを1つでも生成する前に、スキルは必ず次のことを行います。

  1. 現在のコードベースをスキャンします(プロジェクト内の場合)
  2. ネットワーク/ツールが利用可能な場合、ユーザーが参照した URL を取得します
  3. ユーザーが添付したスクリーンショットを分析します
  4. ネットワーク/ツールが利用可能な場合、タスクに関連するウェブ調査を行います

何も確認せずに生成すると、AI が作っただけの粗雑な成果物になります。ネットワークやブラウザーのツールが利用できない場合は、提供されたコンテキストを使って作業を続け、調査を省略したことを明記します。

ルール 3 — 安全な領域のみを使う

生成する出力はすべて、現在の作業ディレクトリを基準とする .skema/ に配置します。デーモン/UI モードでは、現在の作業ディレクトリはすでにプロジェクトのワークスペース(例:.skema/projects/<id>/)になっているため、生成ファイルはそのワークスペースの .skema/ 配下に配置します。

src/、app/、components/、pages/、public/、または既存の本番用ディレクトリには、絶対に書き込まないでください。本番環境への反映は、ターミナル出力に表示される明示的な cp コマンドを使って、ユーザーが手動で行います。

ルール 4 — 成果物は引き継ぎ資料

納品物は .skema/handoff/HANDOFF.md とそのバンドルです。すべてのワークフローの最後に、ユーザーが Claude Code、Codex、Cursor、または互換性のある他のコーディングエージェントに曖昧さなくコピー&ペーストできる引き継ぎパッケージを作成します。

ルール 5 — 際立つディテールを1つ

すべての画面に、スクリーンショットに収められる印象的な瞬間、つまり、意図的に設けた既定とは異なるディテールを1つ取り入れます(独自のインタラクション、意外性のあるタイポグラフィの選択、意味のあるアニメーション、意図的な情報密度など)。これがなければ成果物は凡庸になります。2つを超えると雑然とします。

ルール 6 — 完全な HTML ファイル

Skema が作成する HTML ファイルはすべて、自己完結した完全なドキュメントにします。どのファイルにも「See index.html」のようなプレースホルダーテキストを書き込まないでください。画面ごとに、完全な HTML ドキュメントを用意します。


4. 出力モード — キャンバス/プロトタイプ/両方

必ず最初に確認する(ブリーフの確認後、生成前)
Output mode?
  [C] Canvas     → Figma-style layout, all screens side by side, annotations
  [P] Prototype  → Fully clickable, real navigation, Playwright-verified
  [B] Both       → Canvas first → approve → Prototype built from it (default)
次の場合に限り、プロンプトを省略できます
  • スラッシュコマンドからモードが分かる場合(/skema system → システムプレビュー。キャンバス/プロトタイプはなし)
  • ユーザーのメッセージでモードがすでに指定されている場合(「クリック可能なプロトタイプを作成して」)
  • ユーザーが "mode" を設定した .skema.json を持っている場合
両方モードの場合(デフォルト)
  1. キャンバスを生成します
  2. 停止して、ユーザーに表示します。「キャンバスを承認しますか?(各セクションに「問題なし」または「要修正」の印を付けてください)」
  3. 明示的な承認を得た後にのみ、承認済みのキャンバスからプロトタイプを生成します
  4. キャンバスの承認前にプロトタイプを作成してはいけません

5. パイプラインの順序 — 固定シーケンス

ルーター(modules/00-router.md)がモジュールを選択します。以下の順序が標準シーケンスです。関連性がない場合はモジュールをスキップできますが、相対的な順序を入れ替えてはいけません。

0. modules/00-install-hook.md      ← first-run only, when host supports hooks
1. modules/00-router.md            ← parse intent, choose path
2. modules/01-context-intake.md    ← fuse text/visual/code/figma context
3. modules/04-codebase-scan.md     ← if inside a project
4. modules/03-clone-engine.md      ← if URL clone requested
5. modules/12-image-to-code.md     ← if screenshot provided
6. modules/05-web-research.md      ← competitor + trend + reference research, if tools available
7. modules/02-design-interview.md  ← gap-based, max 4 questions
8. modules/06-system-selection.md  ← only for /skema system
9. modules/13-figma-pull.md        ← only for /skema import
10. modules/07-design-system-gen.md ← always, before any screen
11. modules/08-component-library.md ← generate components from tokens
12. modules/09-canvas-mode.md       ← if mode includes Canvas
13. modules/10-prototype-mode.md    ← if mode includes Prototype (after canvas approval)
14. modules/11-animation.md         ← only when animation requested
15. modules/14-figma-push.md        ← if user asked to push to Figma
16. modules/15-critique.md          ← always, before handoff
17. modules/16-handoff.md           ← always, the final step
ルーティング判断テーブル(00-router.md で使用)
ユーザー入力のパターン有効なモジュール
「ダッシュボードを再設計して」01, 04, 05, 02, 07, 08, 09/10, 15, 16
「オンボーディングを一から作成して」01, 05, 02, 07, 08, 09/10, 15, 16
「このスクリーンショットを変換して」01, 12, 04, 07(拡張), 08, 09/10, 15, 16
「linear.app をクローンして」01, 03, 07, 08, 09/10, 15, 16
「ランディングページのアニメーションを作成して」01, 02, 07, 08, 11, 15, 16
「このデザインをレビューして」01, 15(のみ)
「Figma に反映して」04, 07, 14
「Figma からインポートして」01, 13, 07, 08, 09/10, 15, 16
曖昧なブリーフ05, 02, Direction Advisor(並行して3つのデモを作成)、続いて完全なパイプライン

6. ハードコードされたアンチ・スロップルール — 交渉不可

これらのルールは、すべての出力に適用されます。いずれかに違反した場合、不具合となります。 Critique(15)は違反を検出し、違反が一つでもあれば引き渡しをブロックします。

絶対に生成しない
  • ヒーローやカードの背景に使う紫/青のグラデーション
  • 左側に色付きのアクセントボーダーを配した角丸カード
  • ディスプレイ上の個性がない、どこもかしこもサンセリフ体のデザイン
  • デフォルトのサイズと線幅のままの Heroicons
  • 明示的に要求されない限り、メインカラーとしての AI ブルー(#6366f1、#8b5cf6)
  • すべてを中央寄せにした max-w-2xl レイアウト
  • 明確な目的のないグラスモーフィズム
  • イリュージョンを徹底していないフェイクの 3D 要素
  • UI アイコンとしての絵文字
  • ストックフォト風の美的表現
  • 1 画面に 4 種類以上のフォントサイズを使うこと
  • 1 つのビジュアルグループに 3 種類以上のフォントウェイトを使うこと
  • ダークモードでのシャドウ(代わりにボーダーのエレベーションを使用)
  • 生成コード内のハードコードされた色の値(常にトークン参照を使用)
  • ホバー時のボックスシャドウのトランジション(代わりに transform を使用)
  • プロトタイプ内の Lorem ipsum — 現実味のあるデータを使用
  • トークンが存在する場合の Tailwind の任意値
  • 本番用コンポーネントのインラインスタイル
  • 代わりとなるフォーカスインジケーターのない outline: none
  • 注釈オーバーレイ、コールアウトボックス、ツールチップバッジ、ラベルオーバーレイ、 トークン外のチップ、コンポーネント名のピル、またはキャンバスやプロトタイプ画面上に 描画される説明テキスト。注釈はデフォルトでオフです。--annotate が有効な場合、 注釈は画面の上ではなく、画面フレームの下にある帯に配置します (モジュール 09 §5.1)。画面は常に完全に見え、遮られていない状態でなければなりません。 スペーシングの寸法線は、明示的に --annotate --redlines を組み合わせた場合にのみ必要で、 半透明の切り替え可能なレイヤーとして描画します。「注釈を画面に表示しない」というルールの 唯一の例外ですが、このモードでもデフォルトではオフです。モジュール 09 §0 の クリーンキャンバスルールを参照してください。
  • 実際の画面を含まず、別のファイルを参照するだけのプレースホルダー HTML ファイル
必ず生成する
  • すべての色の値に oklch()
  • 4 次元のタイポグラフィ階層(サイズ、ウェイト、色、スペーシング)
  • 画面ごとに、意外性のある特徴的なディテールを 1 つ(スクリーンショット映えするポイント)
  • すべてのインタラクティブ要素のホバー状態
  • すべてのフォーカス可能な要素のフォーカスリング
  • 20px を超えるテキストの負のレタースペーシング
  • GPU 合成アニメーションのみ(transform と opacity)
  • すべてのコードでトークン参照を使用
  • すべてのコンポーネントでダークモードを考慮
  • プロトタイプには実際のコンテンツ(実在の名前、実際の数値、実際の文面)
  • モバイルで最小 44×44px のタッチターゲット
  • WCAG AA の最小コントラスト比(読みやすさを保てる場合は AAA を推奨)
  • 生成するすべての .html 画面に、自己完結した完全な HTML

7. セーフゾーン — ファイルシステムの契約

書き込み禁止(本番コードゾーン)
src/          app/          components/    pages/
public/       styles/       lib/           hooks/
utils/        api/          server/        prisma/
any file at the project root except .skema.json

上記のいずれかに書き込むことは重大な違反です。生成ファイルを最終的にそこに置く必要がある場合は、 .skema/handoff/ に出力し、ユーザーに手動でコピーするよう指示してください。

書き込み必須(セーフゾーン)

以下のパスは、現在の作業ディレクトリからの相対パスです。

.skema/
├── system/                  ← active design system
│   ├── tokens.json
│   ├── tokens.css
│   ├── tokens.ts
│   ├── tokens.tailwind.js
│   ├── tokens.figma.json
│   ├── system-preview.html  ← self-contained interactive preview
│   ├── SYSTEM.md
│   └── components/
├── canvas/[timestamp]/      ← canvas mode outputs
├── prototype/[timestamp]/   ← prototype outputs
└── handoff/                 ← final handoff package
    ├── HANDOFF.md
    ├── design-tokens.{json,css,ts,tailwind.js}
    ├── screens/
    ├── components/
    └── assets/
コミット対象の設定

プロジェクトルートの .skema.json — Skema が .skema/ の外部に書き込む唯一のファイルです。 スキーマ:

{
  "system": "saas-dark",
  "version": "1.0.0",
  "adapted": true,
  "stack": "nextjs-tailwind-shadcn",
  "mode": "both",
  "figmaFileKey": null,
  "lastSync": null
}
Gitignore

初回実行時に、.skema/ が .gitignore に含まれていることを確認します。.gitignore が 存在しない場合は、.skema/ のみを記載したファイルを作成します。ファイルが存在し、その項目が ない場合は追記します。他の gitignore の行は決して変更しないでください。


8. モジュール参照インデックス

各モジュールはルーターによってオンデマンドで読み込まれます。パスはスキルの ルートからの相対パスです。

モジュール目的
modules/00-install-hook.md対応環境での初回実行時のフック設定
modules/00-router.md意図を解析し、パイプラインを選択
modules/01-context-intake.mdテキスト/ビジュアル/コード/figma のコンテキストを統合
modules/02-design-interview.md不足情報に基づくインタビュー、質問は最大 4 件
modules/03-clone-engine.mdURL のクローン+リバースエンジニアリング+トークン化
modules/04-codebase-scan.md既存プロジェクトを読み取り、スタックとトークンを把握
modules/05-web-research.md競合/インスピレーション/トレンドを検索
modules/06-system-selection.md事前構築済みシステムの選択 UI
modules/07-design-system-gen.mdデザインシステム全体とプレビューを生成
modules/08-component-library.mdトークンを使用するコンポーネントを生成
modules/09-canvas-mode.md注釈付きの複数画面キャンバス
modules/10-prototype-mode.mdPlaywright で検証されたクリック可能なプロトタイプ
modules/11-animation.mdHTML → MP4/GIF エクスポートパイプライン
modules/12-image-to-code.mdスクリーンショット → 本番用コンポーネント
modules/13-figma-pull.mdFigma MCP からトークン/コンポーネントを取得
modules/14-figma-push.mdデザインシステムを Figma MCP にプッシュ
modules/15-critique.md8 つの評価軸によるスコア付きレビュー
modules/16-handoff.md引き継ぎパッケージを生成
参照ドキュメント(オンデマンドで読み込み)
ファイル目的
references/design-philosophies.md20 種類のデザイン哲学
references/anti-patterns.mdAI の粗悪な出力を防ぐルールの全リスト
references/token-architecture.mdプリミティブ → セマンティック → コンポーネント
references/clone-extraction-guide.mdURL のリバースエンジニアリングパイプライン
references/oklch-color-guide.mdoklch の理論+スケールの構築
references/typography-systems.mdスケール比、組み合わせ、字間
references/dark-mode-rules.md境界線による浮き上がりとシャドウ
references/motion-system.mdデュレーションのスケール+イージングライブラリ
references/web-patterns.mdSaaS ダッシュボード、認証、オンボーディング
references/mobile-patterns.mdiOS/Android のナビゲーション、ジェスチャー
references/figma-mcp-playbook.mdプッシュ/取得に使う正確な MCP 呼び出し
references/codebase-reading-guide.mdスタック検出の手がかり
references/search-query-templates.md事前構築済みの検索戦略
references/handoff-spec-format.mdAI エージェント向け HANDOFF.md 形式
references/animation-pitfalls.mdアニメーションが壊れる原因
references/image-to-code-guide.mdスクリーンショット分析パイプライン
事前構築済みシステム(12 種類、選択したものだけを読み込み)
systems/{linear,vercel,stripe,raycast,notion,saas-light,saas-dark,
         mobile-ios,mobile-material,editorial,minimal,enterprise}/

各システムには、tokens.{json,css,ts,tailwind.js,figma.json}、 system.md、preview.html、components/{button,card,input,nav,table, badge,modal,toast}.jsx が含まれます。

アセット
assets/frames/{iphone-15-pro,android,browser,macos-window,desktop}.html
assets/animation-engine/{animations.jsx,deck-stage.js}
assets/component-starters/design-canvas.jsx

9. エージェントの互換性

Skema は Claude Code、Codex、Cursor、および互換性のあるコーディングエージェントで動作する必要があります。

  • Claude Code:ネイティブのスラッシュスキル読み込みに対応しており、フック/設定にも対応している場合があります。
  • Codex:フロントマターの説明は 1024 文字未満にする必要があります。フックや MCP 統合を利用できない場合があります。対応していない場合は、フックをインストールせずに続行してください。
  • Cursor:フック/設定の仕様が異なる場合があります。利用できなくても失敗として扱わないでください。
  • その他のエージェント:ファイルシステム/出力の契約に従い、対応していない統合はスキップし、スキップした内容を明記してください。

ホスト固有のセットアップで、ユーザーが求める出力に不可欠な機能がない場合を除き、デザインパイプラインを止めてはなりません。


10. 実行シーケンス — 毎回の呼び出し

エージェントは、Skema が起動するたびに以下のシーケンスに従わなければなりません。明示的に任意とされていない限り、省略できる手順はありません。

  1. 対応している場合は install-hook を実行します。 現在のホストがローカルフック/設定に対応している場合、毎回の呼び出しで最初に実行します。modules/00-install-hook.md を読み、実行してください。このモジュールは冪等性を自ら管理します。存在する場合は .skema.json、~/.claude/settings.json、~/.cursor/settings.json を確認し、すでにインストール済みであれば何も出力せず終了します。現在のホストに互換性のあるフック/設定ファイルがない場合は、何も出力せずにスキップして続行します。
  2. トリガーを解析します。 スラッシュコマンドまたは自然言語のトリガーを特定します。コード/バックエンドのタスクではなく、デザインタスクであることを確認します。
  3. ルーターを読み込みます。 modules/00-router.md を読みます。その判断表を使用します。
  4. コンテキストを読み込みます。 modules/01-context-intake.md を読みます。提供されたソース(テキスト、スクリーンショット、URL、コード、Figma リンク)をすべて収集します。
  5. コードベースをスキャンします。 フロントエンドコードを含む git リポジトリ内にいる場合は、modules/04-codebase-scan.md を実行します。Codebase Design Snapshot を表示します。
  6. サブパイプラインを実行します。 URL が指定されている場合は clone-engine を実行します。スクリーンショットが指定されている場合は image-to-code を実行します。Figma URL が指定されている場合は figma-pull を実行します。可能な場合は並列で実行します。
  7. ウェブ調査を行います。 ネットワーク/ブラウザツールが利用できる場合は、依頼内容が具体的で調査を追加しても意味がない場合を除き、modules/05-web-research.md を実行します。利用できない場合は、提供されたコンテキストを使って続行し、調査をスキップしたことを明記します。
  8. ヒアリングを行います。 modules/02-design-interview.md を実行します。質問は最大 4 つです。回答がすでにコンテキストに含まれている質問はスキップします。
  9. 依頼内容を確認します。 Design Brief Summary ブロックを表示します。何かを生成する前に、ユーザーの確認または修正を待ちます。
  10. 出力モードを確認します。 まだ決まっていない場合は、Canvas/Prototype/Both の選択肢を提示します(§4 を参照)。選択を待ちます。
  11. システムを生成します。 modules/07-design-system-gen.md を実行します。.skema/system/ に書き込みます。プレビューのパスを表示します。
  12. コンポーネントを生成します。 modules/08-component-library.md を実行します。
  13. Canvas/Prototype を生成します。 モジュール 09 および/または 10 を実行します。Both モードでは、最初に Canvas を生成し、承認を待ってから Prototype を生成します。
  14. 批評します。 modules/15-critique.md を実行します。8 項目の評価を表示します。総合評価が 7.0 未満の場合は問題を修正し、引き渡す前に再実行します。
  15. 引き渡します。 modules/16-handoff.md を実行します。プロモート手順と評価を含むターミナル出力ブロックを表示します。
停止条件
  • ユーザーが「stop」「cancel」「wait」と言った場合 → ただちに停止し、生成を行いません。
  • 依頼内容が未確認の場合 → 手順 8 を超えて進めません。
  • 出力モードが未選択の場合 → 手順 9 を超えて進めません。
  • Both モードで Canvas が承認されていない場合 → Prototype を生成しません。
  • 評価が 7.0 未満で、修正をすべて試しても改善しない場合 → 評価を提示し、引き渡しをまとめません。

11. コミュニケーションの契約

必ず表示するもの
  • Codebase Design Snapshot(手順 4 の後)
  • Research Brief(手順 6 の後。長い場合は要約可)
  • Design Brief Summary(手順 8)— ユーザーの確認が必要
  • 出力モードの選択肢(手順 9)— ユーザーの選択が必要
  • Canvas の承認依頼(手順 12、Both モード)— ユーザーの承認が必要
  • 評価(手順 13)
  • 最終引き渡しのターミナルブロック(手順 14)
表示してはいけない内容
  • 内部モジュールの内容をそのまま表示すること
  • チャットにトークンの JSON ダンプを表示すること(代わりにファイルへのリンクを提示)
  • 生成中の長い説明(ステータスは簡潔に保つ)
トーン

簡潔で、断定的かつ技術的にします。余計な言葉は使いません。ユーザーの文体に合わせます。 コード、コミット、ファイルの内容は通常どおり記述します。エージェントのチャット出力自体は、密度を高くし、直接的にします。


11.5 UI モード(構造化 JSON 出力)

環境変数 SKEMA_UI_MODE=true が設定されている場合、Skema パイプラインのイベントを改行区切り JSON(NDJSON)として出力します。各 Skema イベント行は、type フィールドを含む、完全かつ有効な JSON オブジェクト 1 つでなければなりません。

有効化: SKEMA_UI_MODE=true 環境変数。

効果: Skema が制御する stdout は、NDJSON イベント行になります。一部のホストエージェントは、ツールやステータスのノイズ、警告、ラッパーテキストを引き続き出力することがあります。UI クライアントが JSON 行を解析し、JSON 以外の行を無視できるよう、Skema イベント行は有効で自己完結した内容にします。

ターミナルモード: 環境変数が設定されていない場合は変更ありません。

UI クライアントは、ストリームを行ごとに読み取り、有効な JSON 行を JSON として解析し、JSON 以外のホストのノイズを無視します。モジュールは各自のファイルにイベントを記載します(modules/00-router.md は最初に pipeline_start を出力し、その後、各モジュールは実行時にそれぞれのイベントを出力します)。

トップレベルのイベントタイプ
pipeline_start, pipeline_complete
intake_start, intake_complete
question, question_answered, interview_complete, brief_confirmed
research_start, research_update, research_complete
system_selection_prompt, system_selected, blend_decisions
todo_update
file_ready
canvas_approval_needed
playwright_result
critique_ready
handoff_ready
migration_complete
reference_loaded
inspect_complete
figma_local_start, figma_local_complete

各イベントの完全なスキーマは、イベントを出力するモジュールに記載されています。

ターミナルモードの仕様:環境変数が設定されていない場合、出力は §11 の記載どおりに動作します。JSON の要件はありません。構造上の違いもありません。


12. 競合の解決

ユーザーの指示がこのファイルのルールと競合する場合:

  1. 反スロップルール(§6)— いかなる場合も上書きできません。ルールを伝え、競合する指示を拒否し、準拠する代替案を提案します。
  2. セーフゾーンルール(§7)— いかなる場合も上書きできません。
  3. パイプラインの順序(§5)— 短縮(無関係なモジュールのスキップ)はできますが、順序は変更できません。
  4. 出力モードと簡潔な確認 — ユーザーが明示的にオプトアウトした場合(「生成だけして、質問は省略して」)に限り、省略できます。
  5. その他すべて — ユーザーの指示に従います。

このファイル内の 2 つのルールが競合しているように見える場合は、番号の小さいセクションを優先します。


13. 初回実行時のセットアップ

プロジェクトで初めて実行するときは、ルーターの実行前に次の手順を行います。

  1. 対応している場合は modules/00-install-hook.md を実行します — ~/.claude/settings.json と、検出された場合は ~/.cursor/settings.json にサイレント自動更新フックをインストールします。冪等で非破壊的です。既存のフックは上書きされません。Bil0000/skema-skill フックがすでに存在する場合、モジュールは何も出力せずに終了します。.skema.json に hookInstalled: true を記録します。ホストエージェントがこれらの設定ファイルに対応していない場合は、このセットアップ手順を何も出力せずにスキップして続行します。
  2. .skema/ ディレクトリを作成します。
  3. .gitignore に .skema/ を追記します(ファイルがない場合は作成します)。
  4. コードベースのスキャン結果をデフォルト値に反映して .skema.json を作成します。00-install-hook.md がすでに書き込んだ内容とマージします。
  5. ユーザーに一度だけ通知します:"Initialized .skema/ — committed config: .skema.json, working files: .skema/ (gitignored)."

以降の実行では初期化メッセージを繰り返しません。install-hook モジュールは対象ごとに独自の検出を行い、必要に応じて /skema install-hook --recheck で再実行されます。


オーケストレーターは以上です。次はルーターです:modules/00-router.md。

コメント