');
+ process.exit(1);
+ }
+ if (!fs.existsSync(file)) {
+ console.error(`❌ File not found: ${file}`);
+ process.exit(1);
+ }
+ const input = fs.readFileSync(file, 'utf8');
+ let result;
+ try {
+ result = applyPipeline(input);
+ } catch (err) {
+ console.error(`❌ ${err instanceof Error ? err.message : String(err)}`);
+ process.exit(1);
+ }
+ result.report.forEach((line) => console.log(' - ' + line));
+ if (result.html !== input) {
+ fs.writeFileSync(file, result.html, 'utf8');
+ console.log(`\n✅ Applied: ${file}`);
+ } else {
+ console.log(`\n✅ No changes (already applied): ${file}`);
+ }
+}
diff --git a/.agents/skills/fix-mermaid/scripts/apply_render_pipeline.test.ts b/.agents/skills/fix-mermaid/scripts/apply_render_pipeline.test.ts
new file mode 100644
index 000000000..ff51430b9
--- /dev/null
+++ b/.agents/skills/fix-mermaid/scripts/apply_render_pipeline.test.ts
@@ -0,0 +1,249 @@
+import { expect, test, describe } from "vitest";
+import {
+ injectIds,
+ ensureInitFlags,
+ injectRenderLoop,
+ injectCenteringCss,
+ applyPipeline,
+} from "./apply_render_pipeline.mjs";
+
+// 最小フィクスチャ: div.mermaid 1 つ + startOnLoad:true の初期化 + DIAGRAMS 定義
+const FIXTURE = `
+
+
+
+
+
+
+
+
flowchart TD
+A --> B
+
flowchart TD');
+ });
+
+ test("既に id 付きの div は再変換しない(冪等)", () => {
+ const { html } = injectIds(FIXTURE);
+ const second = injectIds(html);
+ expect(second.count).toBe(0);
+ expect(second.html).toBe(html);
+ });
+});
+
+describe("ensureInitFlags", () => {
+ test("startOnLoad:true を false にし securityLevel:'loose' を付与する", () => {
+ const out = ensureInitFlags(FIXTURE);
+ expect(out).toContain("startOnLoad: false");
+ expect(out).toContain("securityLevel: 'loose'");
+ expect(out).not.toContain("startOnLoad: true");
+ });
+
+ test("カンマ無しの startOnLoad:true でも false 化し securityLevel を付与する", () => {
+ const input = "mermaid.initialize({ startOnLoad: true });";
+ const out = ensureInitFlags(input);
+ expect(out).toContain("startOnLoad: false");
+ expect(out).toContain("securityLevel: 'loose'");
+ expect(out).not.toContain("startOnLoad: true");
+ });
+
+ test("startOnLoad 不在でも securityLevel:'loose' を注入する", () => {
+ const input = "mermaid.initialize({ theme: 'dark' });";
+ const out = ensureInitFlags(input);
+ expect(out).toContain("securityLevel: 'loose'");
+ });
+
+ test("securityLevel 既存なら重複注入しない(冪等)", () => {
+ const input = "mermaid.initialize({ startOnLoad: false, securityLevel: 'loose' });";
+ const out = ensureInitFlags(input);
+ expect(out.match(/securityLevel/g)?.length).toBe(1);
+ });
+
+ test.each(["'startOnLoad'", '"startOnLoad"'])(
+ "quoted key %s の true を false にする",
+ (key) => {
+ const input = `mermaid.initialize({ ${key}: true, theme: 'dark' });`;
+ const out = ensureInitFlags(input);
+ expect(out).toContain(`${key}: false`);
+ expect(out).not.toContain(`${key}: true`);
+ },
+ );
+
+ test.each(["'securityLevel'", '"securityLevel"'])(
+ "quoted key %s が既存なら securityLevel を注入しない",
+ (key) => {
+ const input = `mermaid.initialize({ startOnLoad: false, ${key}: 'strict' });`;
+ const out = ensureInitFlags(input);
+ expect(out.match(/securityLevel/g)?.length).toBe(1);
+ expect(out).toContain(`${key}: 'strict'`);
+ expect(out).not.toContain("securityLevel: 'loose'");
+ },
+ );
+
+ test("後方の quoted securityLevel を注入値で上書きしない", () => {
+ const input = `mermaid.initialize({
+ startOnLoad: false,
+ theme: 'dark',
+ "securityLevel": 'strict',
+ });`;
+ const out = ensureInitFlags(input);
+ expect(out.match(/securityLevel/g)?.length).toBe(1);
+ expect(out).toContain('"securityLevel": \'strict\'');
+ });
+
+ test("nested startOnLoad は変更せず top-level securityLevel を注入する", () => {
+ const input = "mermaid.initialize({ flowchart: { startOnLoad: true } });";
+ const out = ensureInitFlags(input);
+ expect(out).toContain("flowchart: { startOnLoad: true }");
+ expect(out).toContain("securityLevel: 'loose'");
+ });
+
+ test.each([
+ '// mermaid.initialize({ startOnLoad: true });',
+ 'const example = "mermaid.initialize({ startOnLoad: true });";',
+ ])("コメントや文字列の初期化候補を無視する: %s", (falseMatch) => {
+ const input = `${falseMatch}\nmermaid.initialize({ startOnLoad: true });`;
+ const out = ensureInitFlags(input);
+
+ expect(out).toContain(falseMatch);
+ expect(out).toMatch(/\nmermaid\.initialize\(\{[^}]*startOnLoad: false/);
+ expect(out.match(/securityLevel: 'loose'/g)?.length).toBe(1);
+ });
+
+ test("customMermaid.initialize を無視して実際の mermaid.initialize を更新する", () => {
+ const input = `customMermaid.initialize({ startOnLoad: true });
+custommermaid.initialize({ startOnLoad: true });
+mermaid.initialize({ startOnLoad: true });`;
+ const out = ensureInitFlags(input);
+
+ expect(out).toContain("customMermaid.initialize({ startOnLoad: true });");
+ expect(out).toContain("custommermaid.initialize({ startOnLoad: true });");
+ expect(out).toMatch(/\nmermaid\.initialize\(\{[^}]*startOnLoad: false/);
+ expect(out.match(/securityLevel: 'loose'/g)?.length).toBe(1);
+ });
+});
+
+describe("injectRenderLoop", () => {
+ test("applySvgFixups と render ループを注入する", () => {
+ const out = injectRenderLoop(FIXTURE);
+ expect(out).toContain("function applySvgFixups");
+ expect(out).toContain("mermaid.render('svg-' + id");
+ });
+
+ test("SVG 幅は viewBox 由来の自然 px + maxWidth:100% を使う(width:'100%'/'auto' は使わない)", () => {
+ const out = injectRenderLoop(FIXTURE);
+ // 異常拡大の原因になる固定値は使わない
+ expect(out).not.toContain("style.width = '100%'");
+ expect(out).not.toContain("style.width = 'auto'");
+ // 自然幅(px)と maxWidth:100% を使う
+ expect(out).toContain("maxWidth = '100%'");
+ expect(out).toMatch(/style\.width\s*=\s*w\s*\+\s*'px'/);
+ // viewBox 高さ拡張(下端見切れ対策)
+ expect(out).toContain("setAttribute('viewBox'");
+ });
+
+ test("既に注入済みなら再注入しない(冪等)", () => {
+ const once = injectRenderLoop(FIXTURE);
+ const twice = injectRenderLoop(once);
+ expect(twice).toBe(once);
+ });
+
+ test("customMermaid.initialize より後の実際の初期化スクリプトへ注入する", () => {
+ const input = `
+
+`;
+ const out = injectRenderLoop(input);
+
+ expect(out.indexOf("function applySvgFixups")).toBeGreaterThan(
+ out.indexOf("mermaid.initialize({ startOnLoad: false })"),
+ );
+ });
+
+ test.each(["", ""])(
+ "閉じタグの表記ゆれ %s の直前へ注入する",
+ (closingTag) => {
+ const input = ``;
+ const { diagrams } = extractDiagramsDefinition(html);
+ expect(diagrams["diag-1"]).toBe("flowchart TD\nA --> B");
+ });
+
+ test("既存のテンプレートリテラル形式との互換性を維持する", () => {
+ const html = ``;
+ const { diagrams } = extractDiagramsDefinition(html);
+ expect(diagrams["diag-1"]).toBe("flowchart TD\nA --> B");
+ });
+
+ test("クォートされていないキーを固有メッセージで拒否する", () => {
+ const html = ``;
+
+ expect(() => extractDiagramsDefinition(html)).toThrow(
+ "DIAGRAMS のキーはクォートされた文字列リテラルで指定してください。",
+ );
+ });
+
+ test("コメントと文字列の false match を飛ばして実宣言を抽出する", () => {
+ const html = ``;
+ const { diagrams } = extractDiagramsDefinition(html);
+ expect(diagrams).toEqual({ "diag-1": "flowchart TD\nA --> B" });
+ });
+
+ test("オブジェクト内コメントの波括弧と DIAGRAMS 候補を無視する", () => {
+ const html = ``;
+ const { diagrams } = extractDiagramsDefinition(html);
+
+ expect(diagrams).toEqual({
+ "diag-1": "flowchart TD\nA --> B",
+ "diag-2": "flowchart LR\nB --> C",
+ });
+ });
+
+ test("正規表現リテラル内の false match を飛ばして実宣言を抽出する", () => {
+ const html = ``;
+ const { diagrams } = extractDiagramsDefinition(html);
+
+ expect(diagrams).toEqual({ "diag-1": "flowchart TD\nA --> B" });
+ });
+
+ test("制御文の閉じ括弧後にある正規表現を飛ばして実宣言を抽出する", () => {
+ const html = ``;
+ const { diagrams } = extractDiagramsDefinition(html);
+
+ expect(diagrams).toEqual({ "diag-1": "flowchart TD\nA --> B" });
+ });
+
+ test("制御キーワードとコメントの間にある括弧でも正規表現を飛ばす", () => {
+ const html = ``;
+ const { diagrams } = extractDiagramsDefinition(html);
+
+ expect(diagrams).toEqual({ "diag-1": "flowchart TD\nA --> B" });
+ });
+
+ test("メンバー名 return を正規表現開始キーワードとして扱わない", () => {
+ const html = ``;
+ const { diagrams } = extractDiagramsDefinition(html);
+
+ expect(diagrams).toEqual({ "diag-1": "flowchart TD\nA --> B" });
+ });
+
+ test("要素間のカンマがない DIAGRAMS 定義を拒否する", () => {
+ const html = ``;
+
+ expect(() => extractDiagramsDefinition(html)).toThrow(
+ "DIAGRAMS の値の後には ',' または '}' が必要です。",
+ );
+ });
+
+ test("要素間の連続したカンマを拒否する", () => {
+ const html = ``;
+
+ expect(() => extractDiagramsDefinition(html)).toThrow(
+ "DIAGRAMS のキーはクォートされた文字列リテラルで指定してください。",
+ );
+ });
+
+ test.each([
+ "// const DIAGRAMS = {};",
+ "/* const DIAGRAMS = {}; */",
+ "const example = 'const DIAGRAMS = {};'",
+ 'const example = "const DIAGRAMS = {};"',
+ "const example = `const DIAGRAMS = {};`",
+ ])("コメントや文字列だけの宣言候補を拒否する: %s", (falseMatch) => {
+ expect(() => extractDiagramsDefinition(``)).toThrow(
+ "const DIAGRAMS の定義が見つかりません",
+ );
+ });
+});
+
+describe("serializeDiagramsDefinition", () => {
+ test("実改行を正準 JSON の単一エスケープで出力する", () => {
+ const serialized = serializeDiagramsDefinition({
+ "diag-1": "flowchart TD\nA --> B",
+ });
+ expect(serialized).toContain(String.raw`flowchart TD\nA --> B`);
+ expect(serialized).not.toContain(String.raw`flowchart TD\\nA --> B`);
+ });
+});
diff --git a/.agents/skills/html-to-nextjs-migration/SKILL.md b/.agents/skills/html-to-nextjs-migration/SKILL.md
new file mode 100644
index 000000000..5497161a5
--- /dev/null
+++ b/.agents/skills/html-to-nextjs-migration/SKILL.md
@@ -0,0 +1,413 @@
+---
+name: infra-html-to-nextjs-migration
+description: >
+ Complete workflow for migrating static HTML pages to Next.js App Router page.tsx
+ in this repository (GCP/AWS 資格試験対策 Next.js 学習アプリ). Covers CSS variable
+ mapping (HTML vars to Tailwind v4 @theme tokens), page-specific CSS extraction,
+ EXAMS-driven Header navigation, MermaidDiagram reuse, and CLAUDE.md documentation.
+ Extends the global html-to-nextjs-migration skill with project-specific knowledge:
+ the canonical guide-page structure, GCP design-token map, sidebar layout recipe,
+ and a token-efficient reading protocol.
+ Trigger: HTMLマイグレーション, ページ移行, HTML変換, 静的HTML移行, CSS変数マッピング,
+ new page creation from HTML, HTMLからpage.tsx, ガイドページ移行, Mermaid 図移行.
+---
+
+# HTML → Next.js Migration Workflow（本リポジトリ専用）
+
+(最終更新日: 2026-08-09)
+
+## Goal
+
+Provide the complete, ordered workflow for converting a standalone HTML page (with embedded `|` ブロック・本文・末尾 ` 直前に注入する。
* 既に注入済み (マーカー検出) なら不変。
*/
export function injectRenderLoop(html) {
if (html.includes(RENDER_LOOP_MARKER)) return html;
- const initIdx = html.indexOf('mermaid.initialize(');
- if (initIdx === -1) {
+ const initializeCall = findMermaidInitialize(html);
+ if (!initializeCall) {
throw new Error('mermaid.initialize( が見つかりません。初期化ブロックを先に用意してください。');
}
- const closeIdx = html.indexOf('', initIdx);
- if (closeIdx === -1) {
+ const initIdx = initializeCall.index;
+ const closingScriptPattern = /<\/script\s*>/gi;
+ closingScriptPattern.lastIndex = initIdx;
+ const closingScript = closingScriptPattern.exec(html);
+ if (!closingScript) {
throw new Error('mermaid.initialize 以降に が見つかりません。');
}
+ const closeIdx = closingScript.index;
return html.slice(0, closeIdx) + '\n' + RENDER_LOOP + ' ' + html.slice(closeIdx);
}
@@ -174,6 +292,10 @@ export function injectCenteringCss(html) {
export function applyPipeline(html) {
const report = [];
+ if (!findDiagramsDeclaration(html)) {
+ throw new Error('DIAGRAMS が定義されていません。図ソースを定義してから再実行してください。');
+ }
+
const ids = injectIds(html);
let out = ids.html;
report.push(
@@ -182,15 +304,6 @@ export function applyPipeline(html) {
: 'div→id 置換: 対象なし (適用済みか div.mermaid 不在)',
);
- if (!/const\s+DIAGRAMS\s*=/.test(out)) {
- // DIAGRAMS 未定義: 空スタブを初期化ブロック直前に挿入して警告
- const initIdx = out.indexOf('mermaid.initialize(');
- if (initIdx !== -1) {
- out = out.slice(0, initIdx) + 'const DIAGRAMS = {};\n ' + out.slice(initIdx);
- }
- report.push('⚠️ DIAGRAMS 未定義: 空スタブを挿入。各図のソースを手動で定義してください。');
- }
-
const beforeFlags = out;
out = ensureInitFlags(out);
report.push(out !== beforeFlags ? 'init フラグ: 更新' : 'init フラグ: 変更なし');
diff --git a/.gemini/skills/fix-mermaid/scripts/apply_render_pipeline.test.ts b/.gemini/skills/fix-mermaid/scripts/apply_render_pipeline.test.ts
index db6e9da41..ff51430b9 100644
--- a/.gemini/skills/fix-mermaid/scripts/apply_render_pipeline.test.ts
+++ b/.gemini/skills/fix-mermaid/scripts/apply_render_pipeline.test.ts
@@ -1,4 +1,4 @@
-import { expect, test, describe } from "bun:test";
+import { expect, test, describe } from "vitest";
import {
injectIds,
ensureInitFlags,
@@ -75,6 +75,69 @@ describe("ensureInitFlags", () => {
const out = ensureInitFlags(input);
expect(out.match(/securityLevel/g)?.length).toBe(1);
});
+
+ test.each(["'startOnLoad'", '"startOnLoad"'])(
+ "quoted key %s の true を false にする",
+ (key) => {
+ const input = `mermaid.initialize({ ${key}: true, theme: 'dark' });`;
+ const out = ensureInitFlags(input);
+ expect(out).toContain(`${key}: false`);
+ expect(out).not.toContain(`${key}: true`);
+ },
+ );
+
+ test.each(["'securityLevel'", '"securityLevel"'])(
+ "quoted key %s が既存なら securityLevel を注入しない",
+ (key) => {
+ const input = `mermaid.initialize({ startOnLoad: false, ${key}: 'strict' });`;
+ const out = ensureInitFlags(input);
+ expect(out.match(/securityLevel/g)?.length).toBe(1);
+ expect(out).toContain(`${key}: 'strict'`);
+ expect(out).not.toContain("securityLevel: 'loose'");
+ },
+ );
+
+ test("後方の quoted securityLevel を注入値で上書きしない", () => {
+ const input = `mermaid.initialize({
+ startOnLoad: false,
+ theme: 'dark',
+ "securityLevel": 'strict',
+ });`;
+ const out = ensureInitFlags(input);
+ expect(out.match(/securityLevel/g)?.length).toBe(1);
+ expect(out).toContain('"securityLevel": \'strict\'');
+ });
+
+ test("nested startOnLoad は変更せず top-level securityLevel を注入する", () => {
+ const input = "mermaid.initialize({ flowchart: { startOnLoad: true } });";
+ const out = ensureInitFlags(input);
+ expect(out).toContain("flowchart: { startOnLoad: true }");
+ expect(out).toContain("securityLevel: 'loose'");
+ });
+
+ test.each([
+ '// mermaid.initialize({ startOnLoad: true });',
+ 'const example = "mermaid.initialize({ startOnLoad: true });";',
+ ])("コメントや文字列の初期化候補を無視する: %s", (falseMatch) => {
+ const input = `${falseMatch}\nmermaid.initialize({ startOnLoad: true });`;
+ const out = ensureInitFlags(input);
+
+ expect(out).toContain(falseMatch);
+ expect(out).toMatch(/\nmermaid\.initialize\(\{[^}]*startOnLoad: false/);
+ expect(out.match(/securityLevel: 'loose'/g)?.length).toBe(1);
+ });
+
+ test("customMermaid.initialize を無視して実際の mermaid.initialize を更新する", () => {
+ const input = `customMermaid.initialize({ startOnLoad: true });
+custommermaid.initialize({ startOnLoad: true });
+mermaid.initialize({ startOnLoad: true });`;
+ const out = ensureInitFlags(input);
+
+ expect(out).toContain("customMermaid.initialize({ startOnLoad: true });");
+ expect(out).toContain("custommermaid.initialize({ startOnLoad: true });");
+ expect(out).toMatch(/\nmermaid\.initialize\(\{[^}]*startOnLoad: false/);
+ expect(out.match(/securityLevel: 'loose'/g)?.length).toBe(1);
+ });
});
describe("injectRenderLoop", () => {
@@ -101,6 +164,32 @@ describe("injectRenderLoop", () => {
const twice = injectRenderLoop(once);
expect(twice).toBe(once);
});
+
+ test("customMermaid.initialize より後の実際の初期化スクリプトへ注入する", () => {
+ const input = `
+
+`;
+ const out = injectRenderLoop(input);
+
+ expect(out.indexOf("function applySvgFixups")).toBeGreaterThan(
+ out.indexOf("mermaid.initialize({ startOnLoad: false })"),
+ );
+ });
+
+ test.each(["", ""])(
+ "閉じタグの表記ゆれ %s の直前へ注入する",
+ (closingTag) => {
+ const input = ``;
+ const { diagrams } = extractDiagramsDefinition(html);
+ expect(diagrams["diag-1"]).toBe("flowchart TD\nA --> B");
+ });
+
+ test("既存のテンプレートリテラル形式との互換性を維持する", () => {
+ const html = ``;
+ const { diagrams } = extractDiagramsDefinition(html);
+ expect(diagrams["diag-1"]).toBe("flowchart TD\nA --> B");
+ });
+
+ test("クォートされていないキーを固有メッセージで拒否する", () => {
+ const html = ``;
+
+ expect(() => extractDiagramsDefinition(html)).toThrow(
+ "DIAGRAMS のキーはクォートされた文字列リテラルで指定してください。",
+ );
+ });
+
+ test("コメントと文字列の false match を飛ばして実宣言を抽出する", () => {
+ const html = ``;
+ const { diagrams } = extractDiagramsDefinition(html);
+ expect(diagrams).toEqual({ "diag-1": "flowchart TD\nA --> B" });
+ });
+
+ test("オブジェクト内コメントの波括弧と DIAGRAMS 候補を無視する", () => {
+ const html = ``;
+ const { diagrams } = extractDiagramsDefinition(html);
+
+ expect(diagrams).toEqual({
+ "diag-1": "flowchart TD\nA --> B",
+ "diag-2": "flowchart LR\nB --> C",
+ });
+ });
+
+ test("正規表現リテラル内の false match を飛ばして実宣言を抽出する", () => {
+ const html = ``;
+ const { diagrams } = extractDiagramsDefinition(html);
+
+ expect(diagrams).toEqual({ "diag-1": "flowchart TD\nA --> B" });
+ });
+
+ test("制御文の閉じ括弧後にある正規表現を飛ばして実宣言を抽出する", () => {
+ const html = ``;
+ const { diagrams } = extractDiagramsDefinition(html);
+
+ expect(diagrams).toEqual({ "diag-1": "flowchart TD\nA --> B" });
+ });
+
+ test("制御キーワードとコメントの間にある括弧でも正規表現を飛ばす", () => {
+ const html = ``;
+ const { diagrams } = extractDiagramsDefinition(html);
+
+ expect(diagrams).toEqual({ "diag-1": "flowchart TD\nA --> B" });
+ });
+
+ test("メンバー名 return を正規表現開始キーワードとして扱わない", () => {
+ const html = ``;
+ const { diagrams } = extractDiagramsDefinition(html);
+
+ expect(diagrams).toEqual({ "diag-1": "flowchart TD\nA --> B" });
+ });
+
+ test("要素間のカンマがない DIAGRAMS 定義を拒否する", () => {
+ const html = ``;
+
+ expect(() => extractDiagramsDefinition(html)).toThrow(
+ "DIAGRAMS の値の後には ',' または '}' が必要です。",
+ );
+ });
+
+ test("要素間の連続したカンマを拒否する", () => {
+ const html = ``;
+
+ expect(() => extractDiagramsDefinition(html)).toThrow(
+ "DIAGRAMS のキーはクォートされた文字列リテラルで指定してください。",
+ );
+ });
+
+ test.each([
+ "// const DIAGRAMS = {};",
+ "/* const DIAGRAMS = {}; */",
+ "const example = 'const DIAGRAMS = {};'",
+ 'const example = "const DIAGRAMS = {};"',
+ "const example = `const DIAGRAMS = {};`",
+ ])("コメントや文字列だけの宣言候補を拒否する: %s", (falseMatch) => {
+ expect(() => extractDiagramsDefinition(``)).toThrow(
+ "const DIAGRAMS の定義が見つかりません",
+ );
+ });
+});
+
+describe("serializeDiagramsDefinition", () => {
+ test("実改行を正準 JSON の単一エスケープで出力する", () => {
+ const serialized = serializeDiagramsDefinition({
+ "diag-1": "flowchart TD\nA --> B",
+ });
+ expect(serialized).toContain(String.raw`flowchart TD\nA --> B`);
+ expect(serialized).not.toContain(String.raw`flowchart TD\\nA --> B`);
+ });
+});
diff --git a/.gemini/skills/html-to-nextjs-migration/SKILL.md b/.gemini/skills/html-to-nextjs-migration/SKILL.md
index 02d4fac61..5497161a5 100644
--- a/.gemini/skills/html-to-nextjs-migration/SKILL.md
+++ b/.gemini/skills/html-to-nextjs-migration/SKILL.md
@@ -1,42 +1,179 @@
---
-name: qa-studies-html-to-nextjs-migration
+name: infra-html-to-nextjs-migration
description: >
Complete workflow for migrating static HTML pages to Next.js App Router page.tsx
- in the QA_Studies project. Covers CSS variable mapping (HTML vars to Tailwind v4
- @theme tokens), page-specific CSS extraction, Header.tsx navigation updates,
- and CLAUDE.md documentation. Extends the global html-to-nextjs-migration skill
- with project-specific knowledge including font loading via next/font/google,
- design token alignment, and accessibility patterns.
+ in this repository (GCP/AWS 資格試験対策 Next.js 学習アプリ). Covers CSS variable
+ mapping (HTML vars to Tailwind v4 @theme tokens), page-specific CSS extraction,
+ EXAMS-driven Header navigation, MermaidDiagram reuse, and CLAUDE.md documentation.
+ Extends the global html-to-nextjs-migration skill with project-specific knowledge:
+ the canonical guide-page structure, GCP design-token map, sidebar layout recipe,
+ and a token-efficient reading protocol.
Trigger: HTMLマイグレーション, ページ移行, HTML変換, 静的HTML移行, CSS変数マッピング,
- unit-testing-guide.html migration, new page creation from HTML, HTMLからpage.tsx,
- mat/mbt/tas guide migration.
+ new page creation from HTML, HTMLからpage.tsx, ガイドページ移行, Mermaid 図移行.
---
-# QA_Studies HTML → Next.js Migration Workflow
+# HTML → Next.js Migration Workflow（本リポジトリ専用）
+
+(最終更新日: 2026-08-09)
## Goal
-Provide the complete, ordered workflow for converting a standalone HTML page (with embedded `|` ブロック・本文・末尾 `
+
+