Add CTEL-TM-MTT migration and Mermaid fix utilities#72
Conversation
…uadrantChart to prevent text overlaps
…ion and layout formatting errors
…nd centering guidelines to fix-mermaid skill
- Updated CLAUDE.md, GEMINI.md, README.md, and MIGRATION_PROGRESS.md to 2026-06-04. - Updated test counts (144 specs) and route counts (30) in coverage-dashboard.html. - Synced 'fix-mermaid' skill from .claude to .gemini. - Verified absence of PII (absolute paths) in staged changes.
✅ Deploy Preview for quality-assurance-studies ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
📝 WalkthroughSummary by CodeRabbitリリースノート
WalkthroughMermaid v10 構文エラー修正スキル(文書・参照ガイド・自動修正スクリプト・テスト)を追加し、同時に ISTQB CTEL-TM-MTT ガイドを Next.js に移行してページ用 CSS、NavBar コンポーネント、表示テスト、E2E/カバレッジ情報の同期を行った。 ChangesMermaid v10 エラー修正スキルとツール
CTEL-TM-MTT Expert Level ガイドページ移行
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint install failed. For unrecoverable errors, disable the tool in CodeRabbit configuration. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
… config, and dashboards
- nav -> sticky-nav 系クラスに修正(NavBar.tsxとの整合) - top: 0 -> top: 60px に修正(グローバルHeaderのオフセット) - sticky-nav-link.active スタイルを追加 - .mermaid svg に width: 100% !important を追加(小さく表示される問題を修正) - .mermaid-wrap/.mermaid のインデント崩れを修正
- page.tsx: Fragment<> を .istqb-ctel-tm-mtt-page divでラップ
→ globals.cssの.hero(min-height: 100vh, display:flex)との衝突を回避
- CSS: .istqb-ctel-tm-mtt-page スコープのオーバーライドルールを追加
- .hero の min-height/display をリセット
- .hero-badge に align-self: center を追加(flex伸張防止)
- .mermaid-wrapper(Mermaid.tsx生成のdiv)をリセットしSVGに width:100%を付与
→ Mermaid SVGが異常に小さく表示される問題を根本修正
There was a problem hiding this comment.
Actionable comments posted: 9
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
.claude/skills/fix-mermaid/SKILL.md (1)
205-205:⚠️ Potential issue | 🟡 Minor | ⚡ Quick win日本語テキスト内の英単語 "of" を修正してください。
"共通 of
MermaidDiagram" は日本語として不自然です。"共通のMermaidDiagramコンポーネント" または "共通MermaidDiagramコンポーネント" に修正してください。同様の問題が Line 217 にもあります: "下位 of グローバルな" → "下位のグローバルな" に修正してください。
✏️ 修正案
-共通 of `MermaidDiagram` は出力時にグローバルクラス `"mermaid"` を付与します。 +共通の `MermaidDiagram` コンポーネントは出力時にグローバルクラス `"mermaid"` を付与します。Line 217:
-1. **CSS 側**: ハッシュ化クラスから下位 of グローバルな `svg` をターゲットするため、`:global` セレクタを使用します。 +1. **CSS 側**: ハッシュ化クラスから下位のグローバルな `svg` をターゲットするため、`:global` セレクタを使用します。🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In @.claude/skills/fix-mermaid/SKILL.md at line 205, Replace the incorrect English "of" within the Japanese sentences: change "共通 of `MermaidDiagram`" to "共通の `MermaidDiagram` コンポーネント" and change "下位 of グローバルな" to "下位のグローバルな" so the text reads naturally; locate these phrases around the `MermaidDiagram` discussion and update the two occurrences accordingly.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.gemini/skills/fix-mermaid/scripts/fix_mermaid.test.ts:
- Around line 22-38: The test incorrectly expects an empty report even though
fixHtmlMermaid (see fix_mermaid.ts logic around the commonIndent removal that
sets localFixedCount > 0) will add a report entry for mindmap; update the test
in fix_mermaid.test.ts to assert the correct report entry instead of
expect(report).toEqual([]) — for example, assert that report contains an entry
matching "[mindmap]:" (or the exact string produced by fixHtmlMermaid) or that
report.length > 0, while keeping the other indentation assertions unchanged.
In @.gemini/skills/fix-mermaid/scripts/fix_mermaid.ts:
- Around line 85-105: The local boolean changed in the block that handles
leading > 0 is redundant because it is set to true in both branches; remove
changed and instead increment fixedCount directly when you modify fixed: inside
the if (isCont && fixed.length > 0) branch update fixed[fixed.length - 1] = prev
+ ' ' + stripped and then fixedCount++; in the else branch push stripped onto
fixed and then fixedCount++; ensure other behavior (prev, isCont, seqFragRe,
newStmtRe, fixed, fixedCount) remains unchanged and no other references to
changed remain.
- Around line 33-117: In fixMermaidContent, avoid calling getDiagramType(inner)
multiple times by calling it once near the top and caching the result (e.g.,
const diagramType = getDiagramType(inner)); rename the existing local variable
that holds the full first line to diagramTypeLine so names don’t clash; update
isMindmap to use the cached diagramType (e.g., const isMindmap =
diagramType.toLowerCase().startsWith('mindmap')), and replace the two later
getDiagramType(inner) calls (used when pushing to report) with the cached
diagramType variable; ensure all references to the original full-line variable
use the new diagramTypeLine name.
In @.gemini/skills/fix-mermaid/SKILL.md:
- Line 162: 本文中の英語 "of" を日本語表現に置き換えてください: "共通 of `MermaidDiagram`" を "共通の
`MermaidDiagram` コンポーネント" または "共通 `MermaidDiagram` コンポーネント" に修正し、同様に "下位 of
グローバルな" を "下位のグローバルな" に修正してください(該当箇所は `MermaidDiagram` を説明している文と "下位 of グローバルな"
を含む文をそれぞれ置換してください)。
In `@app/istqb-ctel-tm-mtt-complete-guide.css`:
- Around line 72-75: The .sticky-nav rule uses a fixed top value that causes
overlap with the Disclaimer banner; update the CSS for the .sticky-nav selector
to set top to calc(60px + var(--disclaimer-height, 0px)) (keeping position:
sticky and z-index: 40) so the navbar shifts down by the disclaimer height when
present. Ensure you update the .sticky-nav declaration block (the selector named
.sticky-nav) to use that calc expression exactly.
- Around line 1-42: Styles are currently applied globally via
body::before/body::after, `@keyframes` scanMove and selectors like main, nav,
footer, section, .hero; scope them under the page-specific root class (wrap
selectors with .istqb-ctel-tm-mtt-page, e.g. .istqb-ctel-tm-mtt-page::before,
.istqb-ctel-tm-mtt-page main, .istqb-ctel-tm-mtt-page nav, etc.) and change the
texture pseudo-element z-index from 1 to 0 (or -1) on the ::before rule so the
decoration does not overlap interactive content; keep pointer-events: none and
retain `@keyframes` scanMove as-is but referenced by the scoped pseudo-element.
In `@docs/coverage-dashboard.html`:
- Line 505: The CSS has a closing brace and the next selector on the same line
("} [data-state=\"partial\"] .lbl { ... }"), reducing readability; split them by
moving the closing brace to its own line and placing the selector on the
following line so the previous rule ends cleanly and the new rule starts on a
new line, e.g., ensure the lone "}" terminates the previous rule and then start
"[data-state=\"partial\"] .lbl { color: var(--st-partial); }" on the next line.
- Line 1112: In the paragraph element with class "lede" containing "各カード
hostのフッターに「ツール / 想定工数 / 期待効果」を明示", remove the stray "host" (i.e. change "各カード
hostのフッター" to "各カードのフッター") so the sentence reads correctly; update the text node
inside the <p class="lede"> accordingly.
In `@docs/MIGRATION_PROGRESS.md`:
- Line 8: Update the page count in the MIGRATION_PROGRESS.md text that currently
reads "**✅ Next.js 移行完了**: CTEL-TM-MTT ガイド を Next.js App Router
に移行完了。33ページ全て静的生成成功。" to use the correct value 31 (so it reads
"31ページ全て静的生成成功。"); search for any other occurrences of "33ページ" or the same
sentence in MIGRATION_PROGRESS.md and replace them with "31ページ" to keep
documentation consistent with EXPECTED_PAGE_COUNT and the coverage-dashboard
references.
---
Outside diff comments:
In @.claude/skills/fix-mermaid/SKILL.md:
- Line 205: Replace the incorrect English "of" within the Japanese sentences:
change "共通 of `MermaidDiagram`" to "共通の `MermaidDiagram` コンポーネント" and change "下位
of グローバルな" to "下位のグローバルな" so the text reads naturally; locate these phrases
around the `MermaidDiagram` discussion and update the two occurrences
accordingly.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 686bb147-f279-4911-ab97-c9c930384c7a
📒 Files selected for processing (21)
.claude/skills/fix-mermaid/SKILL.md.gemini/skills/fix-mermaid/SKILL.md.gemini/skills/fix-mermaid/references/mermaid-v10-guide.md.gemini/skills/fix-mermaid/scripts/fix_mermaid.test.ts.gemini/skills/fix-mermaid/scripts/fix_mermaid.tsCLAUDE.mdGEMINI.mdREADME.mdapp/istqb-ctel-tm-mtt-complete-guide.cssapp/istqb-ctel-tm-mtt-complete-guide/NavBar.tsxapp/istqb-ctel-tm-mtt-complete-guide/page.tsxarchive/html-archive/istqb-ctel-tm-mtt-complete-guide.htmlarchive/istqb-ctel-tm-mtt-complete-guide.mddocs/MIGRATION_PROGRESS.mddocs/coverage-dashboard.htmle2e/pages.tslib/navigation.tsscripts/extract-css.mjsscripts/html-to-tsx.mjstests/istqb-ctel-tm-mtt-complete-guide/page.test.tsxtests/lib/navigation.test.ts
- fix_mermaid.ts: getDiagramType を一度キャッシュして冗長呼び出しを除去 - fix_mermaid.ts: 常に true だった changed 変数を削除し fixedCount++ を直接各分岐に配置 - fix_mermaid.test.ts: mindmap テストの誤った expect(report).toEqual([]) を正しいアサーションに修正 - .gemini/skills/fix-mermaid/SKILL.md: '共通 of' / '下位 of' を正しい日本語に修正 - .claude/skills/fix-mermaid/SKILL.md: 同上(両スキル間で同期) - istqb-ctel-tm-mtt-complete-guide.css: body::before/body::after をページスコープに閉じ込め、z-index: 1→0 - istqb-ctel-tm-mtt-complete-guide.css: .sticky-nav top を calc(60px + var(--disclaimer-height, 0px)) に変更 - docs/coverage-dashboard.html: CSS の } と次セレクタの同一行問題を修正 - docs/coverage-dashboard.html: 誤植 '各カード hostのフッター' → '各カードのフッター' - docs/MIGRATION_PROGRESS.md: '33ページ' → '31ページ' に統一 (EXPECTED_PAGE_COUNT=31 と整合)
|
@coderabbitai review |
✅ Action performedReview finished.
|
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
docs/coverage-dashboard.html (1)
1061-1061:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winインベントリ総数の不整合を修正してください。
<span class="num" id="inv-total">43 files</span>は固定値ですが、実際のDATA.inventoryの合計と一致していません。
inventory.pages: 31 ファイル(lines 1353-1385)inventory.components: 3 ファイル(lines 1386-1390)inventory.lib: 4 ファイル(lines 1391-1396)inventory.scripts: 5 ファイル(lines 1397-1403)inventory.e2e: 3 ファイル(lines 1404-1408)合計: 31 + 3 + 4 + 5 + 3 = 46 ファイル
renderInventory()関数はtoolingのみを除外して集計するため(line 1635)、表示は 46 files であるべきです。🔧 修正案
- <h2 id="h-inv">Existing Test Inventory <span class="num" id="inv-total">43 files</span></h2> + <h2 id="h-inv">Existing Test Inventory <span class="num" id="inv-total">46 files</span></h2>または、動的に計算される
renderInventory()の結果を信頼し、初期表示のみ修正するのであれば、上記の通り46 filesに変更してください。スクリプト実行後は自動的に正しい値に更新されます。🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@docs/coverage-dashboard.html` at line 1061, ヘッダの固定表示値が DATA.inventory の合計と不整合なので、<span id="inv-total"> の中身を実際の合計に合わせて修正してください(現在 "43 files" を "46 files" に変更するか、より良い方法として renderInventory() の出力を初期表示に使うように置き換えて動的に計算させてください);参照箇所は HTML の <span class="num" id="inv-total"> とスクリプト側の renderInventory() / DATA.inventory(inventory.pages/components/lib/scripts/e2e)です。
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@docs/coverage-dashboard.html`:
- Line 1061: ヘッダの固定表示値が DATA.inventory の合計と不整合なので、<span id="inv-total">
の中身を実際の合計に合わせて修正してください(現在 "43 files" を "46 files" に変更するか、より良い方法として
renderInventory() の出力を初期表示に使うように置き換えて動的に計算させてください);参照箇所は HTML の <span
class="num" id="inv-total"> とスクリプト側の renderInventory() /
DATA.inventory(inventory.pages/components/lib/scripts/e2e)です。
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 78f22c66-e5b8-47df-a05b-375a70194936
📒 Files selected for processing (12)
.claude/skills/fix-mermaid/SKILL.md.gemini/skills/fix-mermaid/SKILL.md.gemini/skills/fix-mermaid/scripts/fix_mermaid.test.ts.gemini/skills/fix-mermaid/scripts/fix_mermaid.tsCLAUDE.mdGEMINI.mdREADME.mdapp/istqb-ctel-tm-mtt-complete-guide.cssdocs/MIGRATION_PROGRESS.mddocs/REUSABLE_PROMPTS.mddocs/coverage-dashboard.htmlnext-env.d.ts
主に ISTQB CTEL-TM-MTT
(テストチーム管理) ガイドの移行と、それに伴う表示品質の最適化 が行われました。
配下に移行し、page.tsx、専用の NavBar.tsx、およびスタイルシートを実装しました。
行いました。
インデントやレイアウトの崩れを解決するため、コードブロックのフォーマットを最適化しました。
(e2e/pages.ts) へのルート追加を行い、システム全体に統合しました。
図表が適切なサイズで表示されるよう根本的な修正を加えました。
などの各仕様書を最新の状態(2026-06-05付)に更新し、移行完了ステータスを反映させました。
構文エラーや全角文字の問題に自動対応できるようガイドラインを強化しました。