mcpField
S
scaffold-project

scaffold-project

github.com/plugin87開発3.0k141 回インストール1 日前に更新
リポジトリ

scaffold-project について

scaffold-projectは、キットのテンプレートからプロダクトデザイン用のプロジェクト骨格を作成するスキルです。Claudeスキルを使うチーム向けに、設定と検証の手順も案内します。

主な機能

  1. 01テンプレートのツリーをコピー
  2. 02npxでエンジン領域を追加
  3. 03Playwrightのレンダーゲート依存関係を導入
  4. 04概要とトークンの設定を案内
  5. 05プロジェクトテンプレートを検証

活用シーン

  1. 01プロダクトデザインプロジェクトの開始
  2. 02デザイントークンと概要の設定
  3. 03プロジェクトのレンダーゲート準備

インストール

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

$npx skills add https://github.com/plugin87/ux-ui-agent-skills --skill scaffold-project

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

詳細

ステップ 0 — キットはありますか？ このスキルはキット内のファイルを読み込みます。一度確認してください： ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING KIT_MISSING の場合は、スキルフォルダーだけがインストールされています。これは npx skills add の動作です。その旨を明確に伝え、 npx ux-ui-agent-skills init またはプラグインのインストールを案内して、そこで終了してください。開けなかったファイルの内容を 推測しないでください。

ユーザーが指定するターゲットディレクトリに、${CLAUDE_SKILL_DIR}/../../../templates/product-design/ から新しいデザインプロジェクトのひな形を生成します。

生成するレイアウト（参照構造と完全に一致）：

<target>/
  # CONTEXT CLAUDE LOADS
  CLAUDE.md              the brief Claude reads every session
  CLAUDE.local.md        your personal prefs, gitignored
  .mcp.json              Figma, Notion, Drive connections

  # TEAM TOOLKIT
  .claude/
    rules/               conventions, loaded only when relevant
    skills/              repeatable workflows, off main context
    commands/            your custom slash commands
    settings.json        shared permissions, checked into git

  # YOUR PROJECT
  design-tokens.json     source of truth: color, type, spacing
  src/components/        the real UI Claude reads and edits
  public/images/         real images so prototypes don't break
  reference/             real screens Claude studies for context

キットがインストール済み、または npx 経由でアクセス可能な場合の最短手順：

npx ux-ui-agent-skills new <target>

これにより、以下のステップ 2 と 3 を 1 回の呼び出しで実行します（テンプレートをコピーし、CLAUDE.local.md のサフィックスを取り除き、簡潔なブリーフを上書きせずにエンジン領域をインストールします）。その後、ステップ 4 に進みます。 手動手順も記載しているため、クローンから同じ結果を手作業で作成できます。

手順：

  1. ターゲットディレクトリが指定されていない場合は、ユーザーに確認します。存在しない場合は作成します。

  2. ${CLAUDE_SKILL_DIR}/../../../templates/product-design/ のすべてのファイルを、ディレクトリ構造を維持してターゲットにコピーします。 コピー時のルールは 2 つです：

    • CLAUDE.local.md.template は CLAUDE.local.md として配置します（このサフィックスは、キット自身の gitignore にファイルが 除外されないように付けられています）。
    • .gitkeep は .claude/skills/、.claude/commands/、 src/components/、public/images/、reference/ に残し、最初のコミット時にも空のフォルダーが 保持されるようにします。 テンプレートにはすでに .gitignore（CLAUDE.local.md を無視します）、 .mcp.json、.claude/settings.json、および 3 つのルールファイル （components.md、tokens.md、accessibility.md）が含まれています。

  3. ブリーフで参照しているゲートを実際に動作させるため、エンジンを隣にインストールします：

    npx ux-ui-agent-skills add tokens components taste accessibility \
    workflows content frameworks design-systems scripts skills

    init ではなく add を使います。init は完全版のエンジン CLAUDE.md で簡潔なプロジェクトブリーフも上書きしてしまいます。 プロジェクトブリーフは意図的に短くしています。タスクに応じて、コピーしたフォルダーからエンジンの知識が読み込まれます。

  4. レンダーゲートが必要とする依存関係をターゲットにインストールします：npm i -D playwright。 これを省略しても警告は出ません。すべてのレンダーゲートが SKIPPED を出力して、終了コード 0 で終了します。

  5. ユーザーと一緒に CLAUDE.md のプレースホルダーを埋めます：製品、主要ユーザー、スタック、アイコンセット、用語集。 山かっこ内に何も残さないでください。

  6. design-tokens.json をブランドに合わせます：primitive.brand のランプを置き換え、 セマンティック層とコンポーネント層は維持したうえで、引き続きパスすることを確認します：

    python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_contrast.py

  7. reference/ に実際の画面を、public/images/ に実際の画像を入れるようユーザーに伝えます。また、MCP 環境変数（FIGMA_API_KEY など）を ユーザー自身のシェルで設定するよう案内します。秘密情報を .mcp.json に書き込んではいけません。

引き渡す前に確認します：ターゲットのツリーが上記のレイアウトと一致し、次が

python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_template.py

ソーステンプレートに対してパスすることを確認してください。

コメント

Markdown 対応