/**
* ClaudeMdV2Section — 世界基準版 CLAUDE.md テンプレートセクション
* Palette: Deep Navy (#0D1B2A) + Teal (#00C2A8) + Amber (#F5A623)
* Typography: Space Grotesk (headings) + DM Sans (body)
*/
import { useState } from "react";
const DIFF_TABLE = [
{ section: "1. プロジェクト概要", v1: "あり", v2: "強化", change: "対応ドキュメント一覧を追加", isNew: false },
{ section: "2. 技術スタック", v1: "あり", v2: "強化", change: "バージョン明記・実行環境を追加", isNew: false },
{ section: "3. 重要なコマンド", v1: "あり", v2: "強化", change: "dry-run コマンドを追加", isNew: false },
{ section: "4. 完了基準", v1: "あり", v2: "強化", change: "PRR・ドキュメント更新を追加", isNew: false },
{ section: "5. 作業ルール", v1: "あり", v2: "強化", change: "スペックドリフト防止ルールを追加", isNew: false },
{ section: "6. 禁止事項", v1: "あり", v2: "あり", change: "CONSTRAINTS.md 参照（変更なし）", isNew: false },
{ section: "7. フェーズ管理", v1: "あり", v2: "強化", change: "完了条件を追加", isNew: false },
{ section: "8. セッション管理", v1: "なし", v2: "★新規", change: "セッション開始手順・コンテキスト枯渇対策", isNew: true },
{ section: "9. スペック検証", v1: "なし", v2: "★新規", change: "定期確認プロンプト（SD-01相当）", isNew: true },
{ section: "10. 変更履歴", v1: "なし", v2: "★新規", change: "バージョン管理", isNew: true },
];
const STEPS = [
{
step: 1,
title: "作業ルールにスペックドリフト防止を追加",
desc: "既存の「作業ルール」セクションの末尾に追記する",
code: `### スペックドリフト防止（Spec Drift Prevention）
- 設計（SDD）から逸脱する実装をする場合は必ず報告すること
- 「この実装は SDD の設計と異なります：[理由]」と明示すること
- CLAUDE.md の指示と矛盾する要求を受けた場合は、
矛盾を報告してから実行すること`,
},
{
step: 2,
title: "セッション管理セクションを追加",
desc: "CLAUDE.md の末尾に追加する",
code: `## セッション管理（Session Management）
### セッション開始時の確認手順（毎回必ず実行）
1. progress.md を読んで前回の状態を把握する
2. git log --oneline -5 で最近の変更を確認する
3. テストが通るか確認する
4. 現状を私に報告する
### コンテキスト枯渇対策（50往復以上になったら）
1. 現在の作業を git commit する
2. progress.md を最新状態に更新する
3. 「コンテキスト枯渇の兆候があります」と報告する`,
},
{
step: 3,
title: "スペック検証セクションを追加",
desc: "CLAUDE.md の末尾に追加する",
code: `## スペック検証（Spec Verification）
### 定期確認プロンプト（週1回または機能完成時）
スペックドリフトチェックを実施してください。
1. 全ての機能要件が実装されているか確認する
2. SDD の設計通りに実装されているか確認する
3. CLAUDE.md の禁止事項が守られているか確認する
逸脱が見つかった場合は「SD-ALERT: [内容]」で報告してください。`,
},
{
step: 4,
title: "CONSTRAINTS.md にテスト改ざん禁止を追加",
desc: "CONSTRAINTS.md の「絶対禁止」セクションに追記する",
code: `## スペックドリフト防止ルール
- SDD の設計から逸脱する場合は必ず報告する
- テストを削除・無効化・コメントアウトしてはならない
- テストの期待値を「通過させるため」に変更してはならない
（テスト改ざん禁止）`,
},
{
step: 5,
title: "progress.md にスペックドリフト記録欄を追加",
desc: "progress.md の末尾に追記する",
code: `## スペックドリフト記録
（設計から逸脱した変更の記録）
| 日付 | 逸脱内容 | 理由 | 対処 |
|-----|--------|------|------|
（記録なし）
## 最終スペック検証日
[YYYY-MM-DD]（スペックドリフトチェック実施日）`,
},
];
function CopyButton({ text }: { text: string }) {
const [copied, setCopied] = useState(false);
const handleCopy = () => {
navigator.clipboard.writeText(text);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
};
return (
<button
onClick={handleCopy}
className="text-xs px-3 py-1 rounded transition-all duration-200"
style={{
background: copied ? "rgba(0,194,168,0.2)" : "rgba(255,255,255,0.08)",
color: copied ? "#00C2A8" : "#8BA3BC",
border: "1px solid rgba(255,255,255,0.1)",
}}
>
{copied ? "✓ コピー済み" : "コピー"}
</button>
);
}
export default function ClaudeMdV2Section() {
const [activeStep, setActiveStep] = useState<number | null>(null);
return (
<section
id="claude-md-v2"
style={{ background: "#0A1520", borderTop: "1px solid #1E3A5F" }}
className="py-24"
>
<div className="max-w-6xl mx-auto px-6">
{/* Header */}
<div className="mb-16">
<p
className="text-xs font-semibold tracking-[0.2em] uppercase mb-4"
style={{ color: "#00C2A8" }}
>
CLAUDE.md WORLD STANDARD v2.0
</p>
<h2
className="text-4xl md:text-5xl font-black mb-6"
style={{ fontFamily: "'Space Grotesk', sans-serif", color: "#F0F4F8" }}
>
CLAUDE.md を
<br />
<span style={{ color: "#00C2A8" }}>世界基準版に更新する</span>
</h2>
<p className="text-lg max-w-2xl" style={{ color: "#8BA3BC", fontFamily: "'DM Sans', sans-serif" }}>
既存の CLAUDE.md（v1.0）に3つのセクションを追加するだけで、
Anthropic公式SDD準拠のドリフト対策が有効化される。所要時間：5分。
</p>
</div>
{/* v1.0 vs v2.0 差分テーブル */}
<div
className="rounded-2xl p-8 mb-12"
style={{ background: "rgba(255,255,255,0.02)", border: "1px solid rgba(255,255,255,0.06)" }}
>
<h3
className="text-xl font-black mb-6"
style={{ fontFamily: "'Space Grotesk', sans-serif", color: "#F0F4F8" }}
>
v1.0 → v2.0 変更差分
</h3>
<div className="overflow-x-auto">
<table className="w-full text-sm">
<thead>
<tr style={{ borderBottom: "1px solid rgba(255,255,255,0.08)" }}>
<th className="text-left py-3 pr-4" style={{ color: "#8BA3BC", fontFamily: "'Space Grotesk', sans-serif" }}>セクション</th>
<th className="text-center py-3 px-4 w-20" style={{ color: "#8BA3BC" }}>v1.0</th>
<th className="text-center py-3 px-4 w-20" style={{ color: "#8BA3BC" }}>v2.0</th>
<th className="text-left py-3 pl-4" style={{ color: "#8BA3BC" }}>変更内容</th>
</tr>
</thead>
<tbody>
{DIFF_TABLE.map((row, i) => (
<tr
key={i}
style={{
borderBottom: "1px solid rgba(255,255,255,0.04)",
background: row.isNew ? "rgba(0,194,168,0.04)" : "transparent",
}}
>
<td
className="py-3 pr-4 font-medium"
style={{ color: row.isNew ? "#00C2A8" : "#F0F4F8", fontFamily: "'Space Grotesk', sans-serif" }}
>
{row.section}
</td>
<td className="text-center py-3 px-4">
<span
className="text-xs px-2 py-0.5 rounded"
style={{
background: row.v1 === "なし" ? "rgba(239,68,68,0.1)" : "rgba(255,255,255,0.06)",
color: row.v1 === "なし" ? "#EF4444" : "#8BA3BC",
}}
>
{row.v1}
</span>
</td>
<td className="text-center py-3 px-4">
<span
className="text-xs px-2 py-0.5 rounded font-semibold"
style={{
background: row.isNew ? "rgba(0,194,168,0.15)" : "rgba(245,166,35,0.1)",
color: row.isNew ? "#00C2A8" : "#F5A623",
}}
>
{row.v2}
</span>
</td>
<td className="py-3 pl-4 text-sm" style={{ color: "#8BA3BC", fontFamily: "'DM Sans', sans-serif" }}>
{row.change}
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
{/* 5ステップ更新手順 */}
<div className="mb-12">
<h3
className="text-2xl font-black mb-8"
style={{ fontFamily: "'Space Grotesk', sans-serif", color: "#F0F4F8" }}
>
5ステップ更新手順（5分で完了）
</h3>
<div className="space-y-4">
{STEPS.map((s) => (
<div
key={s.step}
className="rounded-xl overflow-hidden"
style={{
border: activeStep === s.step ? "1px solid rgba(0,194,168,0.4)" : "1px solid rgba(255,255,255,0.06)",
background: activeStep === s.step ? "rgba(0,194,168,0.04)" : "rgba(255,255,255,0.02)",
}}
>
<button
className="w-full text-left p-5 flex items-center gap-4"
onClick={() => setActiveStep(activeStep === s.step ? null : s.step)}
>
<div
className="flex-shrink-0 w-9 h-9 rounded-full flex items-center justify-center text-sm font-black"
style={{
background: activeStep === s.step ? "rgba(0,194,168,0.2)" : "rgba(255,255,255,0.06)",
color: activeStep === s.step ? "#00C2A8" : "#8BA3BC",
fontFamily: "'Space Grotesk', sans-serif",
}}
>
{s.step}
</div>
<div className="flex-1">
<h4
className="font-bold text-base"
style={{ color: "#F0F4F8", fontFamily: "'Space Grotesk', sans-serif" }}
>
{s.title}
</h4>
<p className="text-sm mt-0.5" style={{ color: "#8BA3BC" }}>{s.desc}</p>
</div>
<span className="text-xs" style={{ color: "rgba(0,194,168,0.6)" }}>
{activeStep === s.step ? "▲" : "▼"}
</span>
</button>
{activeStep === s.step && (
<div
className="px-5 pb-5"
style={{ borderTop: "1px solid rgba(255,255,255,0.06)" }}
>
<div
className="rounded-lg p-4 mt-4 relative"
style={{ background: "rgba(0,0,0,0.3)", border: "1px solid rgba(255,255,255,0.06)" }}
>
<div className="absolute top-3 right-3">
<CopyButton text={s.code} />
</div>
<pre
className="text-xs overflow-x-auto pr-24"
style={{ color: "#A8C4D8", fontFamily: "'DM Mono', 'Courier New', monospace", lineHeight: "1.6", whiteSpace: "pre-wrap" }}
>
{s.code}
</pre>
</div>
</div>
)}
</div>
))}
</div>
</div>
{/* ドリフト対策の効果 */}
<div
className="rounded-2xl p-8"
style={{ background: "rgba(0,194,168,0.05)", border: "1px solid rgba(0,194,168,0.15)" }}
>
<h3
className="text-xl font-black mb-6"
style={{ fontFamily: "'Space Grotesk', sans-serif", color: "#F0F4F8" }}
>
ドリフト対策を有効化すると何が変わるか
</h3>
<div className="grid md:grid-cols-3 gap-6">
{[
{
icon: "🛡️",
title: "スペックドリフトを早期発見",
desc: "Claude Code が CLAUDE.md の指示を無視した場合、SD-ALERT として即座に報告される。Anthropic の公式調査で確認された「指示無視バグ」を人間が検知できる状態になる。",
},
{
icon: "🔄",
title: "セッション切り替えがスムーズ",
desc: "50往復を超えたコンテキスト枯渇時も、progress.md + git log の確認手順により、新セッションで「どこまで進んでいたか」を正確に把握できる。",
},
{
icon: "🧪",
title: "テスト改ざんを防止",
desc: "「テストを通過させるためにテストを書き換える」という最も危険な失敗パターンを CONSTRAINTS.md の明示的な禁止事項として防止する。",
},
].map((item, i) => (
<div key={i}>
<div className="text-3xl mb-3">{item.icon}</div>
<h4
className="font-bold text-base mb-2"
style={{ color: "#F0F4F8", fontFamily: "'Space Grotesk', sans-serif" }}
>
{item.title}
</h4>
<p className="text-sm" style={{ color: "#8BA3BC", fontFamily: "'DM Sans', sans-serif" }}>
{item.desc}
</p>
</div>
))}
</div>
</div>
</div>
</section>
);
}
サイトセクション: CLAUDE.md 世界基準版v2.0への更新手順
元ファイル: システム要件定義の分析と汎用化方法/ClaudeMdV2Section.tsx
要約
ランディングサイトのReactセクションコンポーネント。既存のCLAUDE.md(v1.0)を世界基準版(v2.0)へ更新する差分テーブルと5ステップの追記手順を表示する。スペックドリフト防止・セッション管理・スペック検証の3新規セクション追加が中心で、各コード片にコピーボタンを備える。
要点
- v1.0→v2.0の10セクション差分テーブル
- 5ステップ更新手順(所要5分)を展開UIで提示しコピー可能
- スペックドリフト防止ルール・テスト改ざん禁止をCLAUDE.md/CONSTRAINTS.mdに追記
- コンテキスト枯渇対策(50往復で commit+progress.md更新)を含む
- Anthropic公式SDD準拠、デザインはNavy+Teal+Amber