feat(scaffold): add add-component script to scaffold new components

cspell.json

@@ -9,6 +9,7 @@
 		//
 		"dzbuild",
 		"kamado",
+		"scaffdog",
 
 		//
 		"kiso"

packages/@d-zero/create-frontend/__snapshots__/index.spec.js.snap

@@ -16,6 +16,8 @@ exports[`CLI > interactive basercms4 1`] = `
   "✔  ++ <tmpDir>/.postcssrc.js",
   "✔  ++ <tmpDir>/.prettierrc.mjs",
   "✔  ++ <tmpDir>/.pug-lintrc",
+  "✔  ++ <tmpDir>/.scaffdog/component.md",
+  "✔  ++ <tmpDir>/.scaffdog/config.js",
   "✔  ++ <tmpDir>/.stylelintrc",
   "✔  ++ <tmpDir>/.textlintignore",
   "✔  ++ <tmpDir>/.textlintrc.js",
@@ -99,6 +101,7 @@ exports[`CLI > interactive basercms4 1`] = `
   "✔  ++ <tmpDir>/markuplint.config.js",
   "✔  ++ <tmpDir>/package.json",
   "✔  ++ <tmpDir>/prh.yaml",
+  "✔  ++ <tmpDir>/scripts/add-component.ts",
   "✔  ++ <tmpDir>/tsconfig.json",
   "✔  Install dependencies skipped",
   "✔  Finalize finalized",
@@ -121,6 +124,8 @@ exports[`CLI > npx --type basercms4 1`] = `
   "✔  ++ <tmpDir>/.postcssrc.js",
   "✔  ++ <tmpDir>/.prettierrc.mjs",
   "✔  ++ <tmpDir>/.pug-lintrc",
+  "✔  ++ <tmpDir>/.scaffdog/component.md",
+  "✔  ++ <tmpDir>/.scaffdog/config.js",
   "✔  ++ <tmpDir>/.stylelintrc",
   "✔  ++ <tmpDir>/.textlintignore",
   "✔  ++ <tmpDir>/.textlintrc.js",
@@ -204,6 +209,7 @@ exports[`CLI > npx --type basercms4 1`] = `
   "✔  ++ <tmpDir>/markuplint.config.js",
   "✔  ++ <tmpDir>/package.json",
   "✔  ++ <tmpDir>/prh.yaml",
+  "✔  ++ <tmpDir>/scripts/add-component.ts",
   "✔  ++ <tmpDir>/tsconfig.json",
   "✔  Install dependencies skipped",
   "✔  Finalize finalized",
@@ -226,6 +232,8 @@ exports[`CLI > npx --type static 1`] = `
   "✔  ++ <tmpDir>/.postcssrc.js",
   "✔  ++ <tmpDir>/.prettierrc.mjs",
   "✔  ++ <tmpDir>/.pug-lintrc",
+  "✔  ++ <tmpDir>/.scaffdog/component.md",
+  "✔  ++ <tmpDir>/.scaffdog/config.js",
   "✔  ++ <tmpDir>/.stylelintrc",
   "✔  ++ <tmpDir>/.textlintignore",
   "✔  ++ <tmpDir>/.textlintrc.js",
@@ -292,6 +300,7 @@ exports[`CLI > npx --type static 1`] = `
   "✔  ++ <tmpDir>/markuplint.config.js",
   "✔  ++ <tmpDir>/package.json",
   "✔  ++ <tmpDir>/prh.yaml",
+  "✔  ++ <tmpDir>/scripts/add-component.ts",
   "✔  ++ <tmpDir>/tsconfig.json",
   "✔  Install dependencies skipped",
   "✔  Finalize finalized",
@@ -314,6 +323,8 @@ exports[`CLI > npx 1`] = `
   "✔  ++ <tmpDir>/.postcssrc.js",
   "✔  ++ <tmpDir>/.prettierrc.mjs",
   "✔  ++ <tmpDir>/.pug-lintrc",
+  "✔  ++ <tmpDir>/.scaffdog/component.md",
+  "✔  ++ <tmpDir>/.scaffdog/config.js",
   "✔  ++ <tmpDir>/.stylelintrc",
   "✔  ++ <tmpDir>/.textlintignore",
   "✔  ++ <tmpDir>/.textlintrc.js",
@@ -380,6 +391,7 @@ exports[`CLI > npx 1`] = `
   "✔  ++ <tmpDir>/markuplint.config.js",
   "✔  ++ <tmpDir>/package.json",
   "✔  ++ <tmpDir>/prh.yaml",
+  "✔  ++ <tmpDir>/scripts/add-component.ts",
   "✔  ++ <tmpDir>/tsconfig.json",
   "✔  Install dependencies skipped",
   "✔  Finalize finalized",

packages/@d-zero/scaffold/.scaffdog/component.md

@@ -0,0 +1,30 @@
+---
+name: 'component'
+root: '__assets/_libs'
+output: '.'
+ignore: []
+questions:
+  name: 'コンポーネント名を入力してください（例: button, modal など）'
+---
+
+# `component/c-{{ inputs.name }}.css`
+
+```css
+.c-{{ inputs.name }} {
+	/* コンポーネントルートのスタイル */
+}
+
+.c-{{ inputs.name }}__element {
+	/* 要素のスタイル */
+}
+
+```
+
+---
+
+# `component/c-{{ inputs.name }}.pug`
+
+```pug
+.c-{{ inputs.name }} c-{{ inputs.name }}
+
+```

packages/@d-zero/scaffold/.scaffdog/config.js

@@ -0,0 +1,3 @@
+export default {
+	files: ['*.md'],
+};

packages/@d-zero/scaffold/README.md

@@ -4,13 +4,33 @@
 
 ## コマンド
 
-| コマンド      | 実行される内容                                       |
-| ------------- | ---------------------------------------------------- |
-| `yarn`        | 必要なパッケージのインストール                       |
-| `yarn dev`    | 開発用ローカル環境の起動（ http://localhost:8000/ ） |
-| `yarn lint`   | リントチェック                                       |
-| `yarn build`  | ビルド                                               |
-| `yarn update` | 依存パッケージのアップデート                         |
+| コマンド                       | 実行される内容                                       |
+| ------------------------------ | ---------------------------------------------------- |
+| `yarn`                         | 必要なパッケージのインストール                       |
+| `yarn dev`                     | 開発用ローカル環境の起動（ http://localhost:8000/ ） |
+| `yarn lint`                    | リントチェック                                       |
+| `yarn build`                   | ビルド                                               |
+| `yarn update`                  | 依存パッケージのアップデート                         |
+| `yarn add-component -n <名前>` | コンポーネントのスケルトン生成と style.css への追加  |
+
+### `yarn add-component`
+
+コンポーネントの CSS / Pug スケルトンを生成し、`__assets/htdocs/css/style.css` に該当の `@import` を自動追加します。
+
+```bash
+yarn add-component --name hero
+# 短縮形
+yarn add-component -n hero
+```
+
+生成されるファイル:
+
+- `__assets/_libs/component/c-hero.css`
+- `__assets/_libs/component/c-hero.pug`
+
+`style.css` の最後の `@import '@/component/...' layer(component);` の直後に、新しい component import が追加されます。すでに同じ import 行がある場合はスキップされます。
+
+対象 CSS を追加・変更したい場合は [`scripts/add-component.ts`](./scripts/add-component.ts) の `targetCssFiles` 配列を編集してください（`__assets/htdocs/` からの相対パスで指定）。
 
 ## AIコマンド（Claude Code）
 

packages/@d-zero/scaffold/cspell.json

@@ -5,6 +5,7 @@
 		// Libraries
 		"splide",
 		"kamado",
-		"kiso"
+		"kiso",
+		"scaffdog"
 	]
 }

packages/@d-zero/scaffold/package.json

@@ -28,6 +28,7 @@
 		"lint:format": "npx prettier --write \"{*,./{.claude,__assets}/**/*}{.{js,jsx,ts,tsx,css,pug,html,json,yaml},*rc}\"",
 		"lint:spell": "npx cspell --no-progress --show-suggestions \"**\"",
 		"lint:text": "npx textlint \"./__assets/**/*.{pug,html}\"",
+		"add-component": "node --experimental-strip-types scripts/add-component.ts",
 		"test": "vitest run",
 		"bge": "npx @burger-editor/local",
 		"print": "npx @d-zero/print -f __info/print.txt --type note",
@@ -65,6 +66,7 @@
 		"husky": "9.1.7",
 		"kamado": "1.3.0",
 		"npm-run-all2": "8.0.4",
+		"scaffdog": "4.1.0",
 		"typescript": "5.9.3",
 		"vitest": "4.0.18"
 	},

packages/@d-zero/scaffold/scripts/add-component.ts

@@ -0,0 +1,67 @@
+import { writeFileSync, readFileSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { parseArgs } from 'node:util';
+
+import { loadScaffdog } from 'scaffdog';
+
+const packageRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const htdocsDir = path.resolve(packageRoot, '__assets/htdocs');
+
+const targetCssFiles = ['css/style.css'];
+
+const { values } = parseArgs({
+	options: { name: { type: 'string', short: 'n' } },
+});
+
+const name = values.name;
+if (!name) {
+	process.stderr.write('使い方: yarn add-component --name <コンポーネント名>\n');
+	process.exit(1);
+}
+
+const scaffdog = await loadScaffdog(path.resolve(packageRoot, '.scaffdog'));
+const documents = await scaffdog.list();
+const document = documents.find((d) => d.name === 'component');
+if (!document) {
+	process.stderr.write('エラー: component テンプレートが見つかりませんでした\n');
+	process.exit(1);
+}
+
+const files = await scaffdog.generate(
+	document,
+	path.resolve(packageRoot, '__assets/_libs'),
+	{
+		inputs: { name },
+	},
+);
+
+for (const file of files) {
+	if (!file.skip) writeFileSync(file.path, file.content);
+	process.stdout.write(`生成: ${file.path}\n`);
+}
+
+const importLine = `@import '@/component/c-${name}.css' layer(component);`;
+const componentRe = /^@import '@\/component\/[^']+' layer\(component\);$/;
+
+for (const cssFile of targetCssFiles) {
+	const cssPath = path.resolve(htdocsDir, cssFile);
+	const lines = readFileSync(cssPath, 'utf8').split('\n');
+
+	if (lines.includes(importLine)) {
+		process.stdout.write(`スキップ (${cssPath}): "${importLine}" はすでに存在します\n`);
+		continue;
+	}
+
+	const lastComponentIdx = lines.findLastIndex((l) => componentRe.test(l));
+	if (lastComponentIdx === -1) {
+		process.stderr.write(
+			`エラー (${cssPath}): 既存の component import が見つからないため挿入位置を特定できませんでした\n`,
+		);
+		process.exit(1);
+	}
+
+	lines.splice(lastComponentIdx + 1, 0, importLine);
+	writeFileSync(cssPath, lines.join('\n'), 'utf8');
+	process.stdout.write(`追加 (${cssPath}): ${importLine}\n`);
+}