@d-zero/scaffold 5.0.0-alpha.44 → 5.0.0-alpha.46

package/.clineignore

@@ -0,0 +1,6 @@
+node_modules
+yarn.lock
+package-lock.json
+.env
+.cursor
+ai-tasks

package/.clinerules

@@ -0,0 +1,17 @@
+# コーディングに関するAIエージェントの規定
+
+## プロンプトに対する振る舞い
+
+### コード生成
+
+#### Figmaからコンポーネント生成
+
+Figmaからコード生成に関する指令を受たら`use_mcp_tool:frontend_env:get_task_step(./ai-tasks/create-component.md)`を実行し、サーバが返す指示を一言一句漏らさず確認してそのとおりに従え。
+
+#### BurgerEditorコンテンツ生成
+
+特定のウェブページをBurgerEditorコンテンツ化するように指令を受たら`use_mcp_tool:frontend_env:get_task_step(./ai-tasks/page-to-burger.md)`を実行し、サーバが返す指示を一言一句漏らさず確認してそのとおりに従え。
+
+#### ページ生成
+
+何かしらのページを作成するように指令を受たらファイルを`read_file`する前に`use_mcp_tool:frontend_env:get_task_step(./ai-tasks/create-page.md)`を実行し、サーバが返す指示を一言一句漏らさず確認してそのとおりに従え。

package/.gitignore

@@ -3,6 +3,7 @@ node_modules
 npm-error.log
 yarn-error.log
 .env
+.husky/_/*
 
 # Huge File
 *.zip
@@ -19,6 +20,7 @@ yarn-error.log
 # Temporary
 .11ty
 .serve
+.cache
 
 # Document Root
 htdocs/*

package/.stylelintrc

@@ -1,5 +1,13 @@
 {
 	"extends": ["@d-zero/stylelint-config"],
+	"rules": {
+		"selector-type-no-unknown": [
+			true,
+			{
+				"ignoreTypes": ["/^c-.+$/"]
+			}
+		]
+	},
 	"overrides": [
 		{
 			"files": ["c-*.scss"],

package/.vscode/settings.json

@@ -11,6 +11,7 @@
 	"stylelint.validate": ["css", "scss"],
 	"files.associations": {
 		"*.mdc": "markdown",
+		".clinerules": "markdown",
 		".stylelintrc": "json",
 		".markuplintrc": "json",
 		".pug-lintrc": "json"
@@ -33,10 +34,5 @@
 	"editor.codeActionsOnSave": {
 		"source.fixAll.eslint": "explicit",
 		"source.fixAll.stylelint": "explicit"
-	},
-
-	// GitHub Copilot
-	"github.copilot.enable": {
-		"*": false
 	}
 }

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.46](https://github.com/d-zero-dev/frontend-env/compare/v5.0.0-alpha.45...v5.0.0-alpha.46) (2025-05-19)
+
+### Features
+
+- **scaffold:** add ai tasks and enhance rules ([db109a8](https://github.com/d-zero-dev/frontend-env/commit/db109a8d268dee572431d1865d870a5bb30c7193))
+
+# [5.0.0-alpha.45](https://github.com/d-zero-dev/frontend-env/compare/v5.0.0-alpha.44...v5.0.0-alpha.45) (2025-04-11)
+
+### Features
+
+- **custom-components:** add `custom-components` ([1eb7b04](https://github.com/d-zero-dev/frontend-env/commit/1eb7b04b12d0aeec457a32e8c2b398374b8bca89))
+- **scaffold:** clinerulesの改善 ([154348b](https://github.com/d-zero-dev/frontend-env/commit/154348bbd6e59adc60a0d43fc404de3225665c82))
+- **scaffold:** remove SASS variables and theme files ([f48f60f](https://github.com/d-zero-dev/frontend-env/commit/f48f60f243b19ad7aac704f59fb473eb3842b568))
+
+### BREAKING CHANGES
+
+- **scaffold:** remove SASS variables
+
 # [5.0.0-alpha.44](https://github.com/d-zero-dev/frontend-env/compare/v5.0.0-alpha.43...v5.0.0-alpha.44) (2025-03-12)
 
 ### Features

package/__assets/_libs/component/c-card-list.scss

@@ -1,5 +1,3 @@
-@use '../style/theme' as *;
-
 .c-card-list {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(calc(200 / 17 * 1em), 1fr));

package/__assets/_libs/component/c-card.scss

@@ -1,5 +1,3 @@
-@use '../style/theme' as *;
-
 .c-card {
 	position: relative;
 	block-size: 100%;

package/__assets/_libs/component/c-content-index.scss

@@ -1,5 +1,3 @@
-@use '../style/theme' as *;
-
 .c-content-index {
 	&__body {
 		margin-block: 0;

package/__assets/_libs/component/c-content-main.scss

@@ -1,5 +1,3 @@
-@use '../style/theme' as *;
-
 // 🃏 このファイルのStylelintルールはoverridesによって特別に変更されています
 
 // メインコンテンツ（content-mainコンポーネント）の内容はCMSなどで管理されるHTMLを含んだり、

package/__assets/_libs/component/c-footer.scss

@@ -1,5 +1,3 @@
-@use '../style/theme' as *;
-
 .c-footer {
 	padding-block-end: 2em;
 

package/__assets/_libs/component/c-header.scss

@@ -1,5 +1,3 @@
-@use '../style/theme' as *;
-
 .c-header {
 	padding-block: 1.5em 1.7em;
 	padding-inline: 2em;

package/__assets/_libs/component/c-media-list.scss

@@ -1,5 +1,3 @@
-@use '../style/theme' as *;
-
 .c-media-list {
 	display: grid;
 	grid-template-columns: 1fr;

package/__assets/_libs/component/c-media.scss

@@ -1,5 +1,3 @@
-@use '../style/theme' as *;
-
 .c-media {
 	position: relative;
 	block-size: 100%;

package/__assets/_libs/component/c-nav-breadcrumb.scss

@@ -1,5 +1,3 @@
-@use '../style/theme' as *;
-
 .c-nav-breadcrumb {
 	@media (--md-lte) {
 		display: none;

package/__assets/_libs/component/c-nav-global.scss

@@ -1,5 +1,3 @@
-@use '../style/theme' as *;
-
 .c-nav-global {
 	position: relative;
 	margin-block-end: 1em;

package/__assets/_libs/component/c-nav-sitemap.scss

@@ -1,5 +1,3 @@
-@use '../style/theme' as *;
-
 .c-nav-sitemap {
 	padding-block: 2em;
 	padding-inline: 0;

package/__assets/_libs/component/c-page-home.scss

@@ -1,5 +1,3 @@
-@use '../style/theme' as *;
-
 .c-page-home {
 	inline-size: 100%;
 	block-size: 100%;

package/__assets/_libs/component/c-page-sub.scss

@@ -1,5 +1,3 @@
-@use '../style/theme' as *;
-
 .c-page-sub {
 	inline-size: 100%;
 	block-size: 100%;

package/__assets/_libs/component/c-pagination.scss

@@ -1,5 +1,3 @@
-@use '../style/theme' as *;
-
 .c-pagination {
 	clear: both;
 	display: flex;

package/__assets/_libs/component/c-title-page.scss

@@ -1,5 +1,3 @@
-@use '../style/theme' as *;
-
 .c-title-page {
 	h1 {
 		margin: 0;

package/__assets/_libs/style/base/root.scss

@@ -1,20 +1,18 @@
-@use 'sass:math';
-@use '../theme' as *;
-
 :root {
+	--lightest-color: #fff;
+	--darkest-color: #333;
+
 	// 配色
-	--base-font-color: #{$darkest-color};
-	--base-font-size: #{$base-font-size * 1px};
-	--base-line-height: #{$base-line-height};
-	--border-color: #{$darkest-color};
+	--base-font-color: var(--darkest-color);
+	--border-color: var(--darkest-color);
 
-	// コンテンツ幅
-	--content-width: #{math.div($breakpoint-sm, $base-font-size) * 1rem};
-	--wide-layout-width: #{math.div($breakpoint-md, $base-font-size) * 1rem};
+	// タイポグラフィ
+	--base-font-size: 16px;
+	--base-line-height: 1.8;
 
 	// フォントファミリー
-	--font-family-body: #{$font-family-body};
-	--font-family-heading: #{$font-family-heading};
+	--font-family-body: sans-serif;
+	--font-family-heading: helvetica, var(--font-family-body);
 
 	// 見出し調和数列スケーリング
 	// @see https://standard.shiftbrain.com/blog/music-math-typography
@@ -24,7 +22,55 @@
 	--font-size-h4: calc(1em * 8 / 5);
 	--font-size-h5: calc(1em * 8 / 6);
 	--font-size-h6: calc(1em * 8 / 7);
-
-	// 定義
-	font-size: var(--base-font-size);
 }
+
+// ----------------------------------------
+//
+// カスタムメディア
+//
+// ----------------------------------------
+$breakpoint-xs: 576;
+$breakpoint-sm: 768;
+$breakpoint-md: 992;
+$breakpoint-lg: 1200;
+// xsのみ
+@custom-media --xs (max-width: #{$breakpoint-xs * 1px});
+
+// smのみ
+@custom-media --sm (min-width: #{$breakpoint-xs * 1px}) and (max-width: #{$breakpoint-sm * 1px - 1px});
+
+// mdのみ
+@custom-media --md (min-width: #{$breakpoint-sm * 1px}) and (max-width: #{$breakpoint-md * 1px - 1px});
+
+// lgのみ
+@custom-media --lg (min-width: #{$breakpoint-md * 1px}) and (max-width: #{$breakpoint-lg * 1px - 1px});
+
+// xlのみ
+@custom-media --xl (min-width: #{$breakpoint-lg * 1px});
+
+// xs以下 = xsのみ
+@custom-media --xs-lte (max-width: #{$breakpoint-xs * 1px - 1px});
+
+// sm以下
+@custom-media --sm-lte (max-width: #{$breakpoint-sm * 1px - 1px});
+
+// md以下
+@custom-media --md-lte (max-width: #{$breakpoint-md * 1px - 1px});
+
+// lg以下
+@custom-media --lg-lte (max-width: #{$breakpoint-lg * 1px - 1px});
+
+// xs超え
+@custom-media --xs-gt (min-width: #{$breakpoint-xs * 1px});
+
+// sm超え
+@custom-media --sm-gt (min-width: #{$breakpoint-sm * 1px});
+
+// md超え
+@custom-media --md-gt (min-width: #{$breakpoint-md * 1px});
+
+// lg超え
+@custom-media --lg-gt (min-width: #{$breakpoint-lg * 1px});
+
+// high resolution
+@custom-media --hr (min-resolution: 2dppx);

package/__assets/_libs/style/general/all.scss

@@ -1,5 +1,3 @@
-@use '../theme' as *;
-
 /* stylelint-disable selector-max-universal -- this is universal selector rules */
 * {
 	&,

package/__assets/_libs/style/general/body.scss

@@ -1,10 +1,8 @@
-@use '../theme' as *;
-
 body {
 	padding: 0;
 	margin: 0;
 	font-family: var(--font-family-body);
-	font-size: 1rem;
+	font-size: var(--base-font-size);
 	line-height: var(--base-line-height);
 	color: var(--base-font-color);
 }

package/__assets/_libs/style/general/button.scss

@@ -1,5 +1,3 @@
-@use '../theme' as *;
-
 button {
 	border-radius: 0;
 }

package/__assets/_libs/style/general/img.scss

@@ -1,5 +1,3 @@
-@use '../theme' as *;
-
 img {
 	min-inline-size: 0;
 	min-block-size: 0;

package/ai-tasks/create-component.md

@@ -0,0 +1,127 @@
+# 1
+
+`use_mcp_tool:burger_editor`関連の実行を禁止する。
+FigmaデータのURLをユーザーに要求せよ。
+ユーザーから受け取ったURLで`use_mcp_tool:frontend_env:get_figma_data`せよ。
+得られたファイルパスを`execute_command:mv`で`.cache/figma-data.yaml`に保存し、ステップ2を実行せよ。
+ユーザーがURLを入力しなかったら、ステップ4を実行せよ。
+
+# 2
+
+ステップ1で得られたFigmaデータを`read_file`で読み込め。
+ここでどんなコンポーネントを作るのか記憶せよ。
+Figmaデータのトップレイヤーのフレーム名をコンポーネント名にせよ。
+カスタム要素が含まれていてもそれはコンポーネントの一部であり、別々で生成する必要はない。
+コンポーネントが不明瞭な場合、Figmaのレイヤー名を変更するようにユーザーに警告、ステップは継続せず全タスクを終了せよ。
+コンポーネントが名が判明したらステップ3を実行せよ。
+
+# 3
+
+FigmaのFileデータから全体のnodeIdで`use_mcp_tool:frontend_env:get_figma_image`から全体の画像を取得せよ。
+MCPサーバから返却されたURLを`execute_command:curl`して、`.cache/コンポーネント名.png`として保存。
+URLをブラウザで開いてはいけない。
+これらのタスクが完了したら、ステップ4を実行せよ。
+
+# 4
+
+`.cache/コンポーネント名.png`を解析し全体デザインを確認し、構造やスタイルを分析せよ。
+Figmaデータに`boundVariables`ノードをもつ場合、ユーザーにVariablesの詳細情報を要求せよ。
+`__assets/_libs/style/base/root.scss`を`read_file`し、既にCSSカスタムプロパティが存在してたらスキップしてステップ6へ。
+ユーザーからVariablesの詳細情報を得られたら、ステップ5を実行せよ。拒否されたら、ステップ6を実行せよ。
+
+# 5
+
+`__assets/_libs/style/base/root.scss`を`read_file`せよ。
+たとえば`--primary-color[VariableCollectionId:5:13/VariableID:5:14]={"r":0.9529411792755127,"g":0.572549045085907,"b":0,"a":1}`を受け取っていれば`--primary-color: rgb(243 156 18 / 100%);`のように変換せよ。
+Variables変換したCSSカスタムプロパティとして`:root`に上書きせずに追記せよ。
+`--primary-color: rgb(243 156 18 / 100%); /* VariableID:5:14 */`のようにコメントもつけろ。
+「カラーシンタックスがフォーマットと異なる」類のstylelintエラーはこのステップでは無視してよい。
+これらのタスクが完了したら、ステップ6を実行せよ。
+
+# 6
+
+Figmaのデータにカスタム要素が存在するか確認せよ。
+`use_mcp_tool:frontend_env:get_coding_guidelines(web-components)`を確認し、**プレフィックスは`c`としてカスタム要素名を記憶せよ**。
+**注意**: カスタム要素が含まれたとしてもコンポーネントの一部であり別々で生成する必要はない。
+これらのタスクが完了したら、ステップ7を実行せよ。
+
+# 7
+
+ステップ1で`.cache/コンポーネント名.yaml`に保存していた場合データを読み込め。
+ステップ2で`.cache/コンポーネント名.png`に保存していた場合画像を画像解析せよ。
+画像化する必要があるFigmaノードを特定せよ。
+カスタム要素に相当するノード内は無視すること。
+`use_mcp_tool:frontend_env:get_figma_image`で画像のURLを取得し、`execute_command:curl`で`htdocs/img/`に保存せよ。
+`use_mcp_tool:frontend_env:get_coding_guidelines(media)`の規定に従うこと。
+サブディレクトリは作らないこと。
+SVGもsvgファイル画像として保存すること。
+これらのタスクが完了したら、ステップ8を実行せよ。
+
+# 8
+
+HTMLを作成する。
+作成するのはFigmaのトップレイヤーのコンポーネントのみである。
+`use_mcp_tool:frontend_env:get_coding_guidelines(html)`の規定に従い設計せよ。
+作成するコンポーネントの名前でpugファイルを作成（場所は`__assets/_libs/component/コンポーネント名.pug`）せよ。
+既にファイルが存在する場合は、そのファイルを上書きせよ。
+要素の順番はスクリーンリーダーやフォーカスの順番に依存し重要であるため、Figmaレイヤーの順番にはこだわらず、情報設計的な在り方を最優先に視覚的な配置を加味して順番を決定すること。
+**カスタム要素の要素名のプレフィックスは`c-`をつけること。**
+インラインSVGは作ってはならない。必要なのであればステップ7に戻って再作成すること。
+これらのタスクが完了したら、ステップ9を実行せよ。
+
+# 9
+
+作成したコンポーネントファイルで代替テキストが必要か確認せよ。
+必要な場合は、コーディングガイドラインで代替テキストの情報を確認せよ。
+確認ができたら、ファイルを修正せよ。
+これらのタスクが完了したら、ステップ10を実行せよ。
+
+# 10
+
+CSSを作成する。
+一般的なCSSの実装方法を一切忘れてのぞめ。
+`use_mcp_tool:frontend_env:get_coding_guidelines(css)`に従い設計せよ。
+ステップ1で`.cache/コンポーネント名.yaml`に保存していた場合データを読み込め。
+ステップ2で`.cache/コンポーネント名.png`に保存していた場合画像を画像解析せよ。
+ステップ8で作成したpugファイルを読み込め。
+確認ができたら、作成するコンポーネントの名前でscssファイルを作成（場所は`__assets/_libs/component/コンポーネント名.scss`）せよ。
+これらJSONと画像とHTMLを解析して、コンポーネントのスタイルを生成せよ。
+**レスポンシブが想定されていてもメディアクエリを使用して非表示の要素を作らないこと。**
+**レスポンシブが想定されていてもメディアクエリを使用して非表示の要素を作らないこと！**
+**レスポンシブが想定されていてもメディアクエリを使用して非表示の要素を作らないこと！！！**
+**Figmaデータからあるがままスタイルに変換すること。**
+**カスタム要素のカスタムプロパティは反映すること。**
+**カスタム要素が固定のサイズを持つ場合は、`inline-size`などで指定すること。**
+HTMLと同様にカスタム要素のプレフィックスは`c-`である。
+stylelintのエラーが発生した場合は、直接編集せず、`npx stylelint --fix <fileName>`を実行せよ。
+stylelintのselector-type-no-unknownエラーが発生している場合、カスタム要素の命名が間違っているので、ステップ7に戻って必要な部分だけ修正せよ。
+これらのタスクが完了したら、ステップ11を実行せよ。
+
+# 11
+
+カスタム要素を使用していた場合は、JSに`@d-zero/custom-components`を読み込め。
+
+```ts
+import { defineXXXXX } from '@d-zero/custom-components/XXXXX';
+defineXXXXX('c'); // プレフィックスは"c-"
+```
+
+としろ。
+`__assets/htdocs/js/script.ts`に上書きせずに追記せよ。
+**他の実装は不要。**
+**他の実装は不要！**
+**他の実装は不要！！！**
+これらのタスクが完了したら、ステップ12を実行せよ。
+
+# 12
+
+コンポーネントがどのページに影響するかを報告せよ。
+どのページかどうかは`__assets/htdocs/`ディレクトリ内から`@include`もしくはクラス名を検索して特定せよ。
+CLIを使って検索しても構わない。
+これらのタスクが完了したら、ステップ13を実行せよ。
+
+# 13
+
+`git status`を実行して、変更があったファイルとその内容を確認せよ。
+差分は`git --no-pager diff <fileName>`で実行せよ。
+内容に問題があれば、各ステップに戻り修正せよ。

package/ai-tasks/create-page.md

@@ -0,0 +1,110 @@
+# 1
+
+`use_mcp_tool:burger_editor`関連の実行を禁止する。
+指示があるまで一切の`list_files`、`search_files`、`read_file`および`write_to_file`を禁止する。
+その他余計な推論やファイル読み込み操作はせずに次のステップに進め。
+
+# 2
+
+対象のページと利用するコンポーネントをユーザーに要求せよ。
+
+得られた情報を次のYAMLのように整理し、スレッドに出力しユーザーの承認を待て。
+この情報整理をこなすのには`use_mcp_tool:frontend_env:get_coding_guidelines(html)`の知識が必要である。
+
+例1:
+
+```yaml
+pagePath: 000_home.pug
+pageType: c-page-home
+components:
+  - c-header
+  - c-hero
+  - c-section01
+  - c-section02
+  - c-banners
+  - c-footer
+```
+
+例2:
+
+```yaml
+pageName: 100_sub.pug
+pageType: c-page-sub
+components:
+  - c-header
+  - c-page-title
+  - c-content-main
+  - c-banners
+  - c-footer
+```
+
+承認を得たら次のステップに進め。
+
+# 3
+
+`list_files`で`__assets/htdocs/_libs/component/`にファイルが存在するか確認せよ。
+コンポーネントがない場合はタスクの一切を強制中止せよ。
+コンポーネントがすべて揃っていれば次のステップに進め。
+
+# 4
+
+前ステップで得た情報を元に、以下のようなpugファイルを`write_to_file`せよ。
+
+```pug
+html(lang="ja")
+	head
+		include /mixin/meta.pug
+		+meta('__サイトタイトル__')
+	body.c-page-home
+		.c-page-home__base
+			.c-page-home__header
+				include /component/c-header.pug
+			.c-page-home__hero
+				include /component/c-hero.pug
+			.c-page-home__section01
+				include /component/c-section01.pug
+			.c-page-home__section02
+				include /component/c-section02.pug
+			.c-page-home__banners
+				include /component/c-banners.pug
+			.c-page-home__footer
+				include /component/c-footer.pug
+```
+
+```pug
+html(lang="ja")
+	head
+		include /mixin/meta.pug
+		+meta('__サイトタイトル__')
+	body.c-page-sub
+		.c-page-sub__base
+			.c-page-sub__header
+				include /component/c-header.pug
+			.c-page-sub__page-title
+				include /component/c-page-title.pug
+			.c-page-sub__content-main
+				include /component/c-content-main.pug
+			.c-page-sub__banners
+				include /component/c-banners.pug
+			.c-page-sub__footer
+				include /component/c-footer.pug
+```
+
+既に同名のファイルが存在する場合は、**既存のコードは一切参考にせずすべて削除し**指示された構造をそのまま反映せよ。
+作成したら、`__assets/htdocs/__tmpl/`に保存せよ。`__assets/htdocs/__tmpl/`の外に作ってはならない。
+パスはViteの機能に従い`/component/`で始めことができる。
+ファイルのナンバリングは重要である。
+保存したら次のステップに進め。
+
+# 5
+
+`__assets/htdocs/_libs/component/`のコンポーネントと対になっているSASSファイルが同フォルダに存在するので、それを`__assets/htdocs/css/style.scss`に追記せよ。
+保存したら次のステップに進め。
+
+# 6
+
+タスクは完了である。以下は不要。
+
+- ビルド
+- ブラウザチェック
+- テスト

package/ai-tasks/page-to-burger.md

@@ -0,0 +1,68 @@
+# 1
+
+URLをユーザーに尋ねて`execute_command:curl`を実行し構造を把握せよ。
+文字コードがUTF-8でない場合は変換コマンドをパイプして構造を把握せよ。
+ページサイズが5MBを超えないのであれば`head`コマンド使わずに一度に取得せよ。
+把握できたらステップ2に進め。
+
+# 2
+
+`browser_action`を実行しメインコンテンツのレイアウトと内容を視覚的に解析せよ。
+画面固定されているバナーがあれば閉じよ。
+予期せぬページ移動や画面遷移があれば直ちに停止しユーザーに指示を仰げ。
+把握できたらステップ3に進め。
+
+# 3
+
+取得したメインコンテンツの各ブロック（セクションではない）をレイアウトタイプと内容をMarkdown+frontmatter形式の単一のファイルに書き出せ。
+保存先は`.cache`ディレクトリで、ブロックごとにファイルを分けること。
+ファイル名はURLとブロック名を組み合わせて、ブロックの順番に連番にせよ。
+内容のフォーマットは次の通り。
+
+```markdown
+---
+url: https://example.com/path/to/page
+blockType: '{{block_type}}'
+---
+
+{{section_content_body}}
+```
+
+Frontmatterの情報は`url`と`blockType`の2つのみ。他の指定は禁止。
+
+## block_type
+
+`use_mcp_tool:burger_editor:get_block_type`
+
+## section_content_body
+
+- Markdown形式
+- 画像はURLをそのまま記載
+- 画像のalt属性は抽出する
+- 画像のキャプションはalt属性と明確に区別し抽出
+- layout_typeに基づくカラムの区切りは`<!-- column-separator -->\n---\n<!-- column-separator -->`で記載
+- Markdownで表現できない特性があれば`<!-- -->`の形式でコメントとして記載
+  - 例:
+    - `<!-- 見出しレベルは見た目と矛盾している -->`
+    - `<!-- 画像はアニメーションGIF -->`
+    - `<!-- iframeのURL -->`
+    - `<!-- YouTubeのURL -->`
+    - `<!-- Google MapsのURLもしくは緯度経度 -->`
+- カルーセルは画像をリストとして記載
+
+# 4
+
+生成した各ファイルに対して次を実行せよ。
+`use_mcp_tool:burger_editor:get_block_data_params_v3`を実行し、`blockType`を`blockName`に渡して必要パラメータを取得せよ。
+取得したパラメータを元に`use_mcp_tool:burger_editor:create_block_v3`を実行し、`blockName`を`data`に渡して、HTMLを取得せよ。
+取得したHTMLを同名で拡張子を`.html`にして保存せよ。
+
+# 5
+
+生成したHTMLを`execute_command:cat`で1つのファイルにまとめよ。
+取得したURLと同様のパスとファイル名で`./htdocs`に保存せよ。
+URLが`https://example.com/path/to/page`であれば、保存先は`./htdocs/path/to/page.html`となる。
+
+# 6
+
+完了

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@d-zero/scaffold",
-	"version": "5.0.0-alpha.44",
+	"version": "5.0.0-alpha.46",
 	"description": "Frontend scaffold files of D-ZERO Co., Ltd.",
 	"repository": "https://github.com/d-zero-dev/frontend-env.git",
 	"author": "D-ZERO Co., Ltd.",
@@ -37,27 +37,28 @@
 		"last 2 ios_saf version"
 	],
 	"devDependencies": {
-		"@d-zero/builder": "5.0.0-alpha.44",
-		"@d-zero/linters": "5.0.0-alpha.61",
-		"@d-zero/postcss-config": "5.0.0-alpha.44",
+		"@d-zero/builder": "5.0.0-alpha.46",
+		"@d-zero/linters": "5.0.0-alpha.63",
+		"@d-zero/postcss-config": "5.0.0-alpha.46",
 		"@d-zero/tsconfig": "0.4.1",
-		"@types/node": "22.13.10",
+		"@types/node": "22.15.19",
 		"cross-env": "7.0.3",
 		"husky": "9.1.7",
-		"npm-run-all2": "7.0.2",
-		"sass": "1.85.1",
-		"typescript": "5.8.2",
-		"vitest": "3.0.8"
+		"npm-run-all2": "8.0.2",
+		"sass": "1.89.0",
+		"typescript": "5.8.3",
+		"vitest": "3.1.3"
 	},
 	"dependencies": {
+		"@d-zero/custom-components": "5.0.0-alpha.46",
 		"destyle.css": "4.0.1",
-		"dialog-toggle-events-polyfill": "1.1.2",
-		"invokers-polyfill": "0.5.2",
+		"dialog-toggle-events-polyfill": "1.1.4",
+		"invokers-polyfill": "0.5.4",
 		"tslib": "2.8.1"
 	},
 	"volta": {
-		"node": "22.14.0",
+		"node": "22.15.1",
 		"yarn": "1.22.22"
 	},
-	"gitHead": "203bd77b8ad7bb5b4eefd69302ccb4770ffc32c2"
+	"gitHead": "5739429584e4a491fc93662a25948539bb87c550"
 }

package/__assets/_libs/style/theme/color.scss

@@ -1,4 +0,0 @@
-// サイトで最も明るい色
-$lightest-color: #fff;
-// サイトで最も暗い色
-$darkest-color: #333;

package/__assets/_libs/style/theme/dimension.scss

@@ -1,53 +0,0 @@
-// # タイポグラフィ
-// @see https://techblog.yahoo.co.jp/entry/2023052430423559/
-$base-font-size: 17;
-$base-line-height: 1.8;
-
-// # 寸法
-//
-$breakpoint-xs: 576;
-$breakpoint-sm: 768;
-$breakpoint-md: 992;
-$breakpoint-lg: 1200;
-
-// xsのみ
-@custom-media --xs (max-width: #{$breakpoint-xs * 1px});
-
-// smのみ
-@custom-media --sm (min-width: #{$breakpoint-xs * 1px}) and (max-width: #{$breakpoint-sm * 1px - 1px});
-
-// mdのみ
-@custom-media --md (min-width: #{$breakpoint-sm * 1px}) and (max-width: #{$breakpoint-md * 1px - 1px});
-
-// lgのみ
-@custom-media --lg (min-width: #{$breakpoint-md * 1px}) and (max-width: #{$breakpoint-lg * 1px - 1px});
-
-// xlのみ
-@custom-media --xl (min-width: #{$breakpoint-lg * 1px});
-
-// xs以下 = xsのみ
-@custom-media --xs-lte (max-width: #{$breakpoint-xs * 1px - 1px});
-
-// sm以下
-@custom-media --sm-lte (max-width: #{$breakpoint-sm * 1px - 1px});
-
-// md以下
-@custom-media --md-lte (max-width: #{$breakpoint-md * 1px - 1px});
-
-// lg以下
-@custom-media --lg-lte (max-width: #{$breakpoint-lg * 1px - 1px});
-
-// xs超え
-@custom-media --xs-gt (min-width: #{$breakpoint-xs * 1px});
-
-// sm超え
-@custom-media --sm-gt (min-width: #{$breakpoint-sm * 1px});
-
-// md超え
-@custom-media --md-gt (min-width: #{$breakpoint-md * 1px});
-
-// lg超え
-@custom-media --lg-gt (min-width: #{$breakpoint-lg * 1px});
-
-// high resolution
-@custom-media --hr (min-resolution: 2dppx);

package/__assets/_libs/style/theme/font.scss

@@ -1,2 +0,0 @@
-$font-family-body: sans-serif;
-$font-family-heading: Helvetica, $font-family-body;

package/__assets/_libs/style/theme/index.scss

@@ -1,3 +0,0 @@
-@forward 'color';
-@forward 'dimension';
-@forward 'font';

package/coding-rule.mdc

@@ -1,163 +0,0 @@
-# コーディングに関するAIエージェントの規定
-
-## プロンプトに対する振る舞い
-
-### コード生成
-
-コード生成に関する指令を受けたときは、以下の手順で基本的に対応する。
-
-<!-- ユーザー向け情報: @d-zero/mcp-serverをCLINEに設定している前提 -->
-
-- コーディングガイドラインをMCPサーバ経由で読み、一旦内容を記憶する
-- FigmaのURLを受け取り、MCPサーバ経由でFigmaのFileデータを取得する
-- FigmaのFileデータを解析し、指令に対応するコンポーネントの準備をする
-- 必要なコンポーネントファイルを作成する
-  - マークアップの形式はPugが良いかHTMLが良いかは最初は尋ねる
-  - 要素の順番はスクリーンリーダーやフォーカスの順番に依存し重要であるため、Figmaレイヤーの順番にはこだわらず、情報設計的な在り方を最優先に視覚的な配置を加味して順番を決定する
-  - マークアップは暗黙のロールに気をつけて、然るべきHTML要素を採用すること
-    - 選択肢がいくつもある場合はユーザーに尋ねること
-  - CSSを変更した際にStylelintの警告が発生するが、保存と同時に自動修正がかかる場合があるので、保存実行後は内容を再読み込みしてから必要な警告は再把握すること
-
-## 実装方針
-
-コード生成にあたってコーディングガイドラインにない細かい実装方針を記す。
-
-### 全般
-
-- Linterの警告は数回トライして直せない場合は、無効化するかどうかユーザーに尋ねる
-- cSpellの警告は単純なスペルミスは修正し、固有名詞と思われるものであれば`cspell.json`に単語を追加する
-  - 省略可能単語はコーディングガイドラインに準ずる
-
-### HTML
-
-- ページ遷移しない（リンクでない）インタラクションにa要素を使わない
-- WAI-ARIAを用いる必要があるときは適宜ユーザーに確認する
-  - WAI-ARIAを必要とする基準はARIA Authoring Practice Guideのコンポーネント
-  - APG以外に必要とする例外
-    - aria-currentはパンくず、フォームのプロセスなどに用いる
-- data属性はJSでインタラクティブな状態変化をつけるときのみに用いて静的なスタイルを適用しない
-- 改行でbr要素使わず、span要素とdisplay:block/inline-blockを活用する
-  - 詩・ポエムは除く
-
-### CSS
-
-- ウィンドウ幅がどの幅でも横スクロールを発生させない
-- data属性はJSでインタラクティブな状態変化をつけるときのみに用いて静的なスタイルを適用しない
-- 色を使用する場合は、:rootにカスタムプロパティを定義して使用する
-  - 参照する際に `var(--primary-color, #000)` のようなフォールバック用の第2引数は用いない
-
-### JavaScript
-
-- TypeScriptで書く
-- if/elseifよりもswitch/caseやハッシュマップを用いる
-- なるべく早期returnを用いてネストを深くしない
-- 関数はひとつのファイルに切り出す
-- 純粋関数はテストコードを書くかどうかユーザーに尋ねる
-- テストはvitestを用いる
-- テストファイルは `*.spec.ts` という命名にする
-- 一般的なデザインパターンに当てはまらないならclassは用いずに関数ベースの実装をする
-- JSDocsは日本語で書く
-- `<script type="module">`を用いてモジュール化しているので`DOMContentLoaded`イベントは**不要**
-- document.querySelectorなどで要素の型をジェネリクスで受け取る場合、`HTMLElement`型を用いてよい
-  - HTMLやCSSクラスと照らし合わせて、セレクタの対象要素の種類が明らかな場合は`HTMLInputElement`型などを用いてよい
-- `any`型に関して
-  - `any`型を定義する場合は`unknown`型に置き換える
-  - モジュールの型定義がない場合は、暗黙の`any`型として実装するが、プロパティやメソッドを利用する際に明示的に型を指定する
-- 型エラーに関して
-  - 定義されていないプロパティやメソッドを利用する際には、型エラーが発生するが、その場合はユーザーに確認を取り以下のいずれかの対応を取る
-    - `@ts-ignore`を利用してエラーを無視する
-    - `in`演算子を利用してプロパティの存在を確認する
-    - 型を新たに定義してエラーを回避する
-- ESLintの警告はWarningレベルでも修正する
-
-### コンポーネント
-
-#### ランドマーク
-
-- ランドマークはページコンポーネント（`c-page-*`）に実装し、UIコンポーネントには使用しない
-- ここでいうランドマークはLandmark Roleを持つ要素のことで以下の要素を指す
-  - `<header>`
-  - `<footer>`
-  - `<nav>`
-  - `<main>`
-  - `<aside>`
-
-#### インタラクティブコンポーネント
-
-- インタラクティブな呼び出し元ボタンはbutton要素を用いる
-- アクションはcommand属性を用いる
-  - command属性に規定されているアクションはそのまま活用する
-    - `command="toggle-popover"`はポップオーバーUIの開閉を行う
-    - `command="show-popover"`はポップオーバーUIの展開を行う
-    - `command="hide-popover"`はポップオーバーUIの収納を行う
-    - `command="show-modal"`はモーダルUIの展開を行う
-    - `command="close"`はモーダルUIの収納を行う
-  - 上記以外はカスタムコマンドを用意する
-    - カスタムコマンドは`command="--command-name"`のように記述して、実装はJavaScriptに記述する
-  - 規定アクション中に内部的な処理を施す場合はCommandEventを利用してJavaScriptに記述する
-    - 状況によっては`beforetoggle`や`toggle`、`close`などのイベントが適切なので適宜利用する
-
-### カスタムコマンドの実装例
-
-```html
-<button command="--custom-command" commandfor="target01">カスタムコマンド</button>
-
-<div id="target01">カスタムコマンドの対象</div>
-```
-
-```typescript
-for (button of document.querySelectorAll<HTMLButtonElement>('[command]')) {
-	const targetId = button.getAttribute('commandfor') ?? null;
-	if (!targetId) {
-		continue;
-	}
-	const target = document.getElementById(targetId);
-	target?.addEventListener('command', (e) => {
-		switch (e.command) {
-			case '--custom-command': {
-				const invoker: HTMLButtonElement = e.source; // 呼び出し元ボタンの特定
-				// カスタムコマンドの処理
-				console.log(`Hello, Custom Command: ${e.command}`);
-				break;
-			}
-		}
-	});
-}
-```
-
-### 規定アクションのイベントフックの実装例
-
-```html
-<button type="button" command="show-modal" commandfor="dialog01">メニュー</button>
-
-<dialog id="dialog01" aria-labelledby="dialog01-title">
-	<h2 id="dialog01-title">メニュー</h2>
-	<p>メニューの内容</p>
-</dialog>
-```
-
-```typescript
-for (button of document.querySelectorAll<HTMLButtonElement>('[command]')) {
-	const targetId = button.getAttribute('commandfor') ?? null;
-	if (!targetId) {
-		continue;
-	}
-	const target = document.getElementById(targetId);
-	target?.addEventListener('command', (e) => {
-		switch (e.command) {
-			case 'show-modal': {
-				const invoker: HTMLButtonElement = e.source; // 呼び出し元ボタンの特定
-				// フック処理
-				console.log(`Invoked: ${e.command}`);
-				break;
-			}
-		}
-	});
-
-	// もしくは<dialog>要素であればbeforetoggleやtoggleイベントなどを利用できる
-	target?.addEventListener('beforetoggle', (e) => {
-		// フック処理
-		console.log(`Fired: beforetoggle`);
-	});
-}
-```