mcpField
S
start

start

github.com/educlopezデザイン・UI407742 回インストール1 週間前に更新
リポジトリ

start について

start は ui-craft の読み取り専用の入口スキルです。プロジェクトを調べて利用可能なワークフローを示し、変更を加えずに次のコマンドを一つ提案します。

主な機能

  1. 01読み取り専用のプロジェクト検出
  2. 02フレームワークとトークンの確認
  3. 03brief、spec、実行環境の確認
  4. 04利用可能な使用レイヤーの整理
  5. 05次に実行するコマンドの提案

活用シーン

  1. 01既存プロジェクトの状況把握
  2. 02brief やトークン作成の要否判断
  3. 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点だけです。

  1. プロジェクトの検出(読み取り専用)。
  2. 3つの利用レイヤーにわたる「今できること」の一覧。
  3. 推奨する次のステップを1つと、それを実行するコマンド。

ユーザーが作業を希望したら、本来のコマンド(/brief、/tokens、/sddesign、/craft、/finalize、レビューエージェントなど)に引き継ぎます。各コマンドの手順をここに記載してはいけません。


ステップ1 — 検出する(読み取り専用)

プロジェクトをスキャンします。何も書き込みません。以下を確認します。

シグナル検出方法用途
フレームワーク/スタイリングpackage.json の依存関係、設定ファイル、ファイル拡張子 — Tailwind、CSS Modules、styled-components/Emotion、vanilla CSS、Vue/Svelte/Astro SFCui-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つ選びます。以下の順に判断してください。

  1. ブリーフがなく、単純ではないプロジェクト → /brief を提案する(「以降のすべての判断の基準となる、プロダクトの原則を定めましょう — 5分で完了し、.ui-craft/brief.md を作成します」)。
  2. ブリーフはあるが、トークン基盤がない → /tokens を提案する(「3層のトークン基盤を整え、インラインの推測ではなくシステムに沿った構築を実現します」)。
  3. ブリーフとトークンがあり、新規に何かを構築する → /sddesign <surface>(パイプライン全体)または /craft <surface>(一括実行)を提案し、どちらにするか尋ねる。
  4. 改善対象の既存 UI がある → 意図に応じて案内する:レビュー → ui-craft:design-reviewer + ui-craft:a11y-auditor(Claude Code)または /critique + /audit、仕上げ → /polish、簡素化 → /distill、平凡で一般的 → /bolder、派手でごちゃついている → /quieter、古いサイトを現代化 → /redesign。
  5. リリース/マージ直前 → /finalize(10段階のゲート)を提案し、CI には npx ui-craft-detect または score_ui MCP ツールを案内する。

次のように、明確な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 は読み取り専用です。価値は、選ばれたコマンドを実行することで得られます。

コメント