building-design について
building-design のセットアップと設計ワークフローを案内するスキルです。設計ルートの決定やプロジェクトの契約・レシピに沿った作業を支援します。
主な機能
- 01設計ルートとビューアーの設定
- 02ビューアー依存関係のインストール
- 03設計・プレビュー契約の確認
- 04意図に応じたレシピの選択
活用シーン
- 01building-design の準備状況の確認
- 02機能の設計作成
- 03既存設計の変更
- 04.design.ts ファイルを基にした作業
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ cedmandocdoc/ awesome-skills --skill building-designインストール後、Claude Code で/building-designを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
agents/openai.yamlassets/design.mdindex.mdassets/app/.gitignoreindex.htmlpackage.jsontsconfig.jsonvite.config.tsassets/app/system/define.tsmotion.cssmotion.tstype.cssassets/app/viewer/App.tsxcanvas.tsxchrome.tsxframe.cssFrame.tsxmain.tsxmeta.tsregistry.tsviewer.cssassets/surface/feature/feature.design.tsscreen.cssscreen.design.tsScreen.tsxassets/surface/ui/component.csscomponent.design.tsComponent.tsxreferences/creating-design.mddesign-contract.md詳細
Building Design
セットアップ
| 項目 | 種類 | 必須 | タイミング | 完了条件 | 方法 |
|---|---|---|---|---|---|
| npm を含む Node.js 22.12+ | ユーザー | 必須 | すべて | node --version が 22.12 以降を報告する | https://nodejs.org |
| ルートパスと意図 | 質問 | 必須 | すべて | design-contract.md → デザインルートの解決で、依頼の意図に合ったルートが見つかる | フォルダーを尋ね(デフォルトは design-contract.md → デザインルートに従う)、意図(短いフレーズを1つ)を尋ねます。未入力または空の場合はその値を使用し、それ以外の場合は別のパスを尋ねます。ルートの場所と index.md → intention に記録します |
| ルートマーカー | 静的 | 必須 | すべて | <design-root>/index.md が design-contract.md → 作成者署名を含む | intention を指定して assets/index.md から index.md を作成します |
| ビューアーアプリ | 静的 | 必須 | すべて | ビューアーファイルと index.md → ビューアーキーが assets/ と一致する | assets/app/ 内のすべてのファイルをコピーします。ドットファイルも含みます(cp -R <skill>/assets/app/. <design-root>/)。assets/index.md から index.md → ビューアーキーを置き換えます |
| ビューアーのインストール | 自動 | 必須 | すべて | <design-root>/node_modules/ が存在する | デザインルートで npm install を実行します |
ワークフロー
- セットアップ — 依頼に該当する各 セットアップ 行を順に処理します。完了条件を満たす場合はスキップします。
userの場合は、必須なら方法を出力して停止し、任意ならそれなしで続行します。askの場合は、依頼に含まれる情報を入力し、残りを1つのメッセージでまとめて尋ね、各回答を記録します。autoとstaticの場合は実行します。 - コントラクト — design-contract.md と preview-contract.md を読みます。
- レシピ — レシピの行を1つ選び、[Read]列にあるすべてのドキュメントを開きます。
レシピ
| 意図 | 表現例 | 読むもの |
|---|---|---|
| セットアップ | 「building-design をセットアップして」「building-design の準備はできていますか?」 | セットアップ — ワークフローのステップ1ですべての行を処理し、各行の状態を報告します |
| 作成または修正 | 「チェックアウト機能をデザインして」「ヒーローの見出しを短くして」、@design/design.md または .design.ts ファイルへの参照 | creating-design.md |
コメント
Markdown 対応