start について
start は ui-craft の読み取り専用の入口スキルです。プロジェクトを調べて利用可能なワークフローを示し、変更を加えずに次のコマンドを一つ提案します。
主な機能
- 01読み取り専用のプロジェクト検出
- 02フレームワークとトークンの確認
- 03brief、spec、実行環境の確認
- 04利用可能な使用レイヤーの整理
- 05次に実行するコマンドの提案
活用シーン
- 01既存プロジェクトの状況把握
- 02brief やトークン作成の要否判断
- 03適切な UI レビューまたは構築コマンドの選択
MCP 対応
Claude Code または MCP クライアントの環境外では MCP ツールを利用できない場合があると説明し、ポータブルな検証手段として ui-craft-detect CLI を案内します。
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ educlopez/ ui-craft --skill startインストール後、Claude Code で/startを入力して読み込まれたか確認します。
詳細
コンテキスト: このサブスキルは、より広範な ui-craft スキルの一つの観点です。ui-craft スキルもインストールされている場合は、まずその SKILL.md を読み、Discovery + Anti-Slop + Craft Test を確認してから、以下の特定の観点を適用してください。
ユーザーに現在の状況を案内します。ui-craft スキルを読み込み、現在のプロジェクトを確認して、ui-craft で今すぐできることを報告します。ここが入口です。ほとんどの人は、まずこれを実行します。
オーケストレーション専用ルール
このコマンドは、状態を検出して適切な処理へ案内します。フェーズのロジックを構築、編集、監査、再実装してはなりません。このコマンドが行うのは次の3点だけです。
- プロジェクトの検出(読み取り専用)。
- 3つの利用レイヤーにわたる「今できること」の一覧。
- 推奨する次のステップを1つと、それを実行するコマンド。
ユーザーが作業を希望したら、本来のコマンド(/brief、/tokens、/sddesign、/craft、/finalize、レビューエージェントなど)に引き継ぎます。各コマンドの手順をここに記載してはいけません。
ステップ1 — 検出する(読み取り専用)
プロジェクトをスキャンします。何も書き込みません。以下を確認します。
| シグナル | 検出方法 | 用途 |
|---|---|---|
| フレームワーク/スタイリング | package.json の依存関係、設定ファイル、ファイル拡張子 — Tailwind、CSS Modules、styled-components/Emotion、vanilla CSS、Vue/Svelte/Astro SFC | ui-craft がこのスタックに適応することを確認 |
| トークン基盤 | CSS 変数(--color-*、--accent-*、--font-*)、Tailwind の theme.extend、トークンファイル | /tokens が必要かを判断 |
| ブリーフ | .ui-craft/brief.md が存在するか | /brief が必要かを判断 |
| 外部デザイン規約 | リポジトリのルートにある DESIGN.md または design-tokens.json(一部のチームが使うエコシステム規約) | ブリーフとトークンの入力として扱う — 読み込み、尊重し、重複させない |
| 仕様 | .ui-craft/spec.md が存在するか。どの画面が対象か | 進行中の作業があるか |
| 実行環境 | Claude Code(プラグイン/スキル)か、.codex/.cursor/.gemini/.opencode/.agents ミラーか | どのレイヤーを利用できるか(エージェント/MCP は Claude Code/MCP クライアント専用) |
| 既存 UI | コンポーネント/ページがすでにあるか、それとも新規開発か | 新規構築かレビュー/仕上げかを判断 |
検出は手早く、目立たないように行います。読み込みは数回にとどめ、深く掘り下げません。結果は短い表で報告します。
ステップ2 — 3つのレイヤーを報告する
実際の ui-craft の使い方に合わせて、今利用できる機能を表示します。各レイヤーに ● 利用中/○ 利用可能/– この実行環境では利用不可を付けます。
ui-craft is a design engineering SYSTEM. You're set up for:
● Layer 1 — Just ask
Describe any UI and the agent designs with taste (anti-slop, system tokens,
real hierarchy). No command needed. This is the default and the point.
○ Layer 2 — Drive it
Slash commands for focused passes. Given THIS project:
<tailored list — see Step 3>
○ Layer 3 — Verify it
design-reviewer + a11y-auditor agents · ui-craft-mcp gates · UICraftScore · ui-craft-detect CLI.
<mark – if the harness can't reach agents/MCP, and say so>
検出した状態に合わせて箇条書きを調整し、一般的な機能一覧をそのまま表示しないでください。
ステップ3 — 次のステップを1つ提案する
検出した状態に基づき、最も価値の高い次のアクションを1つ選びます。以下の順に判断してください。
- ブリーフがなく、単純ではないプロジェクト →
/briefを提案する(「以降のすべての判断の基準となる、プロダクトの原則を定めましょう — 5分で完了し、.ui-craft/brief.mdを作成します」)。 - ブリーフはあるが、トークン基盤がない →
/tokensを提案する(「3層のトークン基盤を整え、インラインの推測ではなくシステムに沿った構築を実現します」)。 - ブリーフとトークンがあり、新規に何かを構築する →
/sddesign <surface>(パイプライン全体)または/craft <surface>(一括実行)を提案し、どちらにするか尋ねる。 - 改善対象の既存 UI がある → 意図に応じて案内する:レビュー →
ui-craft:design-reviewer+ui-craft:a11y-auditor(Claude Code)または/critique+/audit、仕上げ →/polish、簡素化 →/distill、平凡で一般的 →/bolder、派手でごちゃついている →/quieter、古いサイトを現代化 →/redesign。 - リリース/マージ直前 →
/finalize(10段階のゲート)を提案し、CI にはnpx ui-craft-detectまたはscore_uiMCP ツールを案内する。
次のように、明確な1行で表示します。
次の推奨アクション:
…— <理由を1文で説明>。
すべてのコマンド一覧は、尋ねられた場合にのみ提示します。「コマンド一覧を表示しますか。それとも、今すぐ推奨アクションを実行しますか?」
ステップ4 — 引き継ぐ
ユーザーが確認した場合は、推奨したコマンドを実行します。そうでなければ、そこで終了します。/start が独断で実行することはありません。ユーザーが現在地と次の行き先を把握した時点で、役目を終えます。
メモ
- 読み取り専用です。
/startは何も書き込まず、コードも変更しません。成果物(brief.md、spec.md、トークン)は、それぞれのコマンドによって書き込まれます。 - ハーネスの実情を正直に伝えてください。 プロジェクトが Claude Code 以外のハーネス(
.codex、.cursorなど)で動作している場合、そのエージェントからレイヤー 3 のエージェントや MCP サーバーにアクセスできない可能性があります。その旨を明確に伝え、ポータブルな検証方法として CLI(ui-craft-detect)を案内してください。 - Craft の意図に応じて振り分けてください。 画面全体を構築する場合(
/craft、/sddesign)は、コードを書く前に Craft Read を宣言します。ユーザーが構築済みの UI を「ありきたり」「テンプレートっぽい」「無難すぎる」と表現した場合は/bolderに、「うるさすぎる」「ごちゃごちゃしている」と表現した場合は/quieterに振り分けてください。 - Discovery をやり直さないでください。 brief または spec がすでにある場合は、ユーザーに好みを聞き直さず、成果物を読んで報告してください。
次のステップ: 今回の実行で示された段階に進んでください。/start は読み取り専用です。価値は、選ばれたコマンドを実行することで得られます。