/**
* MasterFilesSection — 2ファイル集約セクション
* MASTER_CLAUDE.md + START_PROMPT.md の使い方と全プロンプト一覧
* Palette: Deep Navy (#0D1B2A) + Teal (#00C2A8) + Amber (#F5A623)
* Typography: Space Grotesk (headings) + DM Sans (body)
*/
import { useState } from "react";
const PROMPTS = [
{ id: "P-00", emoji: "🚀", title: "プロジェクト開始", timing: "最初に1回だけ", desc: "やりたいことを貼るだけで要件定義→設計→実装→テスト→本番移行まで全自動で進む。", color: "#00C2A8" },
{ id: "P-01", emoji: "▶️", title: "セッション開始", timing: "毎回セッション開始時", desc: "前回の続きを自動で把握。progress.md + git log を読んで現状報告してから作業開始。", color: "#00C2A8" },
{ id: "P-02", emoji: "🐛", title: "バグ調査", timing: "バグが出たとき", desc: "症状とエラーメッセージを貼るだけ。原因仮説3つ→修正案提示→承認後に修正の流れ。", color: "#F5A623" },
{ id: "P-03", emoji: "🔧", title: "バグ修正", timing: "P-02で原因特定後", desc: "修正前コードを残しながら安全に修正。全テスト実行→完了報告まで自動。", color: "#F5A623" },
{ id: "P-04", emoji: "👁️", title: "コードレビュー", timing: "実装完了後", desc: "機能・セキュリティ・エラー処理・テスト・スペックドリフトの5観点で自動レビュー。", color: "#8B5CF6" },
{ id: "P-05", emoji: "🧪", title: "テスト実行", timing: "実装後・変更後", desc: "単体・統合・E2E・dry-runを実行。失敗時は原因分析→修正案提示→承認後修正。", color: "#8B5CF6" },
{ id: "P-06", emoji: "📝", title: "ログ確認", timing: "動作確認時", desc: "エラー・警告・異常な処理時間・個人情報漏洩を自動チェック。", color: "#6B7280" },
{ id: "P-07", emoji: "🔄", title: "セッション切り替え", timing: "新セッション開始時", desc: "前セッションの引き継ぎを自動確認。「この理解で正しいですか？」確認後に作業開始。", color: "#6B7280" },
{ id: "P-08", emoji: "🚀", title: "本番移行", timing: "移行準備完了後", desc: "本番移行チェックリスト→バックアップ確認→段階的移行（1件→全量）の安全な手順。", color: "#EF4444" },
{ id: "P-09", emoji: "⚡", title: "緊急ロールバック", timing: "問題発生時すぐ", desc: "今すぐ実行。処理停止→被害確認→git revert→バックアップ復元→原因報告。", color: "#EF4444" },
{ id: "P-10", emoji: "📊", title: "進捗確認", timing: "いつでも", desc: "完了率・完了タスク・次のタスク・ブロッカー・RYGゲートを一覧報告。", color: "#6B7280" },
{ id: "P-11", emoji: "🛡️", title: "セキュリティ確認", timing: "本番移行前", desc: "ハードコードシークレット・.gitignore・個人情報ログ出力を自動スキャン。", color: "#EF4444" },
{ id: "P-12", emoji: "✅", title: "完了確認", timing: "プロジェクト完了時", desc: "完了基準7項目を全確認。全項目「完了」のときのみ「プロジェクト完了」と報告。", color: "#00C2A8" },
{ id: "P-13", emoji: "🔍", title: "スペックドリフトチェック", timing: "週1回", desc: "SRS・SDD・CLAUDE.mdとの照合を自動実施。逸脱はSD-ALERTで即報告。", color: "#F5A623" },
{ id: "P-14", emoji: "📚", title: "ハーネス更新", timing: "プロジェクト完了後", desc: "学び・失敗パターン・再利用コードを~/claude-harness/に自動蓄積。次のプロジェクトに活かす。", color: "#8B5CF6" },
{ id: "P-15", emoji: "📋", title: "SRS自動生成", timing: "プロジェクト開始時", desc: "やりたいことを書くだけでIEEE 29148準拠の要件定義書（SRS）を自動生成。", color: "#00C2A8" },
{ id: "P-16", emoji: "🏗️", title: "SDD自動生成", timing: "SRS完成後", desc: "SRS.mdを読んでIEEE 1016準拠の設計記述（SDD）を自動生成。ハーネス設計も含む。", color: "#00C2A8" },
];
const MASTER_PARTS = [
{ part: "A", title: "プロジェクト情報", desc: "毎回ここだけ書き換える（概要・スタック・コマンド・フェーズ）" },
{ part: "B", title: "完了基準", desc: "7項目全て満たすまで「完了」と言ってはならない" },
{ part: "C", title: "作業ルール", desc: "必須ルール + スペックドリフト防止 + 報告フォーマット" },
{ part: "D", title: "絶対禁止事項", desc: "テスト改ざん禁止・本番DB直接操作禁止・強制プッシュ禁止等" },
{ part: "E", title: "セッション管理", desc: "開始手順・コンテキスト枯渇対策・終了手順" },
{ part: "F", title: "セキュリティチェックリスト", desc: "認証・データ保護・外部連携・入力検証の4領域" },
{ part: "G", title: "本番移行チェックリスト", desc: "Google SRE PRR準拠。機能・障害対策・監視・データ・段階的移行" },
{ part: "H", title: "RYGゲート", desc: "要件定義・設計・実装・本番移行の4フェーズの進行可否判断" },
{ part: "I", title: "スペック検証", desc: "週1回の定期確認プロンプト（SD-01相当）" },
{ part: "J", title: "ハーネス設計", desc: "dry-run実装テンプレート・rollback手順テンプレート" },
{ part: "K", title: "テスト計画", desc: "IEEE 829準拠。6種別・E2Eシナリオ・境界ケースチェックリスト" },
{ part: "L", title: "成長型ハーネス", desc: "プロジェクト間知識継承。ディレクトリ構造・新規開始手順・完了後蓄積手順" },
{ part: "M", title: "変更履歴", desc: "バージョン管理（v1.0→v2.0→v3.0）" },
];
function CopyButton({ text, label = "コピー" }: { text: string; label?: string }) {
const [copied, setCopied] = useState(false);
return (
<button
onClick={() => { navigator.clipboard.writeText(text); setCopied(true); setTimeout(() => setCopied(false), 2000); }}
className="text-xs px-4 py-2 rounded-lg font-semibold transition-all duration-200"
style={{
background: copied ? "rgba(0,194,168,0.2)" : "rgba(0,194,168,0.1)",
color: copied ? "#00C2A8" : "#00C2A8",
border: "1px solid rgba(0,194,168,0.3)",
}}
>
{copied ? "✓ コピー済み" : label}
</button>
);
}
const USAGE_STEPS = [
{ num: 1, title: "MASTER_CLAUDE.md をダウンロード", desc: "プロジェクトルートに「CLAUDE.md」という名前でコピーする" },
{ num: 2, title: "PART A だけ書き換える", desc: "プロジェクト名・目的・技術スタック・コマンドを記入する（5分）" },
{ num: 3, title: "START_PROMPT.md を開く", desc: "状況に合ったプロンプト（P-00〜P-16）をコピーする" },
{ num: 4, title: "やりたいことを書いて貼り付ける", desc: "プロンプトの「[ここにやりたいことを書く]」部分だけ書き換えてClaude Codeに送信" },
];
export default function MasterFilesSection() {
const [activePrompt, setActivePrompt] = useState<string | null>(null);
const [activeTab, setActiveTab] = useState<"overview" | "parts" | "prompts">("overview");
return (
<section
id="master-files"
style={{ background: "#0D1B2A", borderTop: "2px solid #00C2A8" }}
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" }}
>
MASTER FILES v3.0 — 2ファイル集約版
</p>
<h2
className="text-4xl md:text-5xl font-black mb-6"
style={{ fontFamily: "'Space Grotesk', sans-serif", color: "#F0F4F8" }}
>
<span style={{ color: "#F5A623" }}>2ファイル</span>渡すだけで
<br />
全体系が動く
</h2>
<p className="text-lg max-w-2xl mb-8" style={{ color: "#8BA3BC", fontFamily: "'DM Sans', sans-serif" }}>
これまでの全知識（要件定義・SDD・ハーネス・テスト計画・セキュリティ・本番移行・成長型ハーネス）を
2ファイルに集約した。プロジェクトルートに置いて、やりたいことを貼るだけ。
</p>
{/* 2ファイルカード */}
<div className="grid md:grid-cols-2 gap-6 mb-12">
{[
{
file: "MASTER_CLAUDE.md",
role: "Claude Codeに渡す知識ファイル",
desc: "プロジェクトルートに「CLAUDE.md」として置く。13パート・全ルール・全チェックリスト・ハーネス設計・テスト計画を1ファイルに集約。",
color: "#00C2A8",
icon: "📄",
badge: "PART A だけ書き換える",
},
{
file: "START_PROMPT.md",
role: "状況別プロンプト集",
desc: "17種類のプロンプト（P-00〜P-16）を収録。状況に合ったプロンプトをコピーして「やりたいこと」だけ書き換えて貼り付けるだけ。",
color: "#F5A623",
icon: "💬",
badge: "コピペするだけ",
},
].map((f, i) => (
<div
key={i}
className="rounded-2xl p-6"
style={{
background: `rgba(${i === 0 ? "0,194,168" : "245,166,35"},0.05)`,
border: `1px solid rgba(${i === 0 ? "0,194,168" : "245,166,35"},0.2)`,
}}
>
<div className="flex items-start gap-4 mb-4">
<span className="text-3xl">{f.icon}</span>
<div>
<div
className="text-xs font-semibold px-2 py-0.5 rounded mb-2 inline-block"
style={{ background: `rgba(${i === 0 ? "0,194,168" : "245,166,35"},0.15)`, color: f.color }}
>
{f.badge}
</div>
<h3
className="text-xl font-black"
style={{ fontFamily: "'Space Grotesk', sans-serif", color: "#F0F4F8" }}
>
{f.file}
</h3>
<p className="text-sm font-medium mt-1" style={{ color: f.color }}>
{f.role}
</p>
</div>
</div>
<p className="text-sm" style={{ color: "#8BA3BC", fontFamily: "'DM Sans', sans-serif" }}>
{f.desc}
</p>
</div>
))}
</div>
</div>
{/* 使い方ステップ */}
<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-2xl font-black mb-8"
style={{ fontFamily: "'Space Grotesk', sans-serif", color: "#F0F4F8" }}
>
使い方（4ステップ）
</h3>
<div className="grid md:grid-cols-4 gap-6">
{USAGE_STEPS.map((s) => (
<div key={s.num} className="relative">
<div
className="w-10 h-10 rounded-full flex items-center justify-center text-lg font-black mb-4"
style={{ background: "rgba(0,194,168,0.15)", color: "#00C2A8", fontFamily: "'Space Grotesk', sans-serif" }}
>
{s.num}
</div>
<h4
className="font-bold text-sm mb-2"
style={{ color: "#F0F4F8", fontFamily: "'Space Grotesk', sans-serif" }}
>
{s.title}
</h4>
<p className="text-xs" style={{ color: "#8BA3BC", fontFamily: "'DM Sans', sans-serif" }}>
{s.desc}
</p>
</div>
))}
</div>
</div>
{/* タブ切り替え */}
<div className="flex gap-2 mb-8">
{[
{ key: "overview", label: "概要" },
{ key: "parts", label: "MASTER_CLAUDE.md 構成（13パート）" },
{ key: "prompts", label: "START_PROMPT.md プロンプト一覧（17種）" },
].map((tab) => (
<button
key={tab.key}
onClick={() => setActiveTab(tab.key as typeof activeTab)}
className="px-4 py-2 rounded-lg text-sm font-semibold transition-all duration-200"
style={{
background: activeTab === tab.key ? "rgba(0,194,168,0.15)" : "rgba(255,255,255,0.04)",
color: activeTab === tab.key ? "#00C2A8" : "#8BA3BC",
border: activeTab === tab.key ? "1px solid rgba(0,194,168,0.3)" : "1px solid rgba(255,255,255,0.06)",
fontFamily: "'Space Grotesk', sans-serif",
}}
>
{tab.label}
</button>
))}
</div>
{/* タブコンテンツ：概要 */}
{activeTab === "overview" && (
<div
className="rounded-2xl p-8"
style={{ background: "rgba(0,194,168,0.04)", border: "1px solid rgba(0,194,168,0.12)" }}
>
<h3
className="text-xl font-black mb-6"
style={{ fontFamily: "'Space Grotesk', sans-serif", color: "#F0F4F8" }}
>
この2ファイルで何が変わるか
</h3>
<div className="grid md:grid-cols-3 gap-6">
{[
{
icon: "🎯",
title: "要件定義が5分で完成",
desc: "P-15（SRS自動生成）にやりたいことを書くだけで、IEEE 29148準拠の要件定義書が自動生成される。機能要件・非機能要件・リスク・受入基準まで揃う。",
},
{
icon: "🛡️",
title: "本番を壊さない仕組みが自動で動く",
desc: "MASTER_CLAUDE.md の PART J（ハーネス設計）により、dry-run・rollback・承認フロー・操作ログが最初から設計される。テスト改ざん禁止も明示的に設定済み。",
},
{
icon: "🔄",
title: "プロジェクトをまたいで成長する",
desc: "P-14（ハーネス更新）により、各プロジェクトの学び・失敗パターン・再利用コードが ~/claude-harness/ に蓄積される。次のプロジェクトで自動的に活用される。",
},
].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>
)}
{/* タブコンテンツ：MASTER_CLAUDE.md 構成 */}
{activeTab === "parts" && (
<div className="space-y-2">
{MASTER_PARTS.map((p) => (
<div
key={p.part}
className="rounded-xl p-4 flex items-start gap-4"
style={{ background: "rgba(255,255,255,0.02)", border: "1px solid rgba(255,255,255,0.06)" }}
>
<div
className="flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center text-sm font-black"
style={{ background: "rgba(0,194,168,0.1)", color: "#00C2A8", fontFamily: "'Space Grotesk', sans-serif" }}
>
{p.part}
</div>
<div>
<h4
className="font-bold text-sm mb-1"
style={{ color: "#F0F4F8", fontFamily: "'Space Grotesk', sans-serif" }}
>
PART {p.part}：{p.title}
</h4>
<p className="text-xs" style={{ color: "#8BA3BC", fontFamily: "'DM Sans', sans-serif" }}>
{p.desc}
</p>
</div>
</div>
))}
</div>
)}
{/* タブコンテンツ：プロンプト一覧 */}
{activeTab === "prompts" && (
<div className="grid md:grid-cols-2 gap-3">
{PROMPTS.map((p) => (
<div
key={p.id}
className="rounded-xl p-4 cursor-pointer transition-all duration-200"
style={{
background: activePrompt === p.id ? "rgba(255,255,255,0.04)" : "rgba(255,255,255,0.02)",
border: activePrompt === p.id ? `1px solid ${p.color}40` : "1px solid rgba(255,255,255,0.06)",
}}
onClick={() => setActivePrompt(activePrompt === p.id ? null : p.id)}
>
<div className="flex items-center gap-3">
<span
className="text-xs font-black px-2 py-0.5 rounded"
style={{ background: `${p.color}20`, color: p.color, fontFamily: "'Space Grotesk', sans-serif" }}
>
{p.id}
</span>
<span className="text-base">{p.emoji}</span>
<div className="flex-1">
<span
className="font-bold text-sm"
style={{ color: "#F0F4F8", fontFamily: "'Space Grotesk', sans-serif" }}
>
{p.title}
</span>
<span className="text-xs ml-2" style={{ color: "#6A8BA8" }}>
{p.timing}
</span>
</div>
</div>
{activePrompt === p.id && (
<p className="text-xs mt-3 pl-1" style={{ color: "#8BA3BC", fontFamily: "'DM Sans', sans-serif" }}>
{p.desc}
</p>
)}
</div>
))}
</div>
)}
{/* クイックスタートプロンプト */}
<div
className="mt-12 rounded-2xl p-8"
style={{ background: "rgba(245,166,35,0.05)", border: "1px solid rgba(245,166,35,0.2)" }}
>
<div className="flex items-start justify-between gap-4 mb-4">
<div>
<h3
className="text-xl font-black mb-2"
style={{ fontFamily: "'Space Grotesk', sans-serif", color: "#F0F4F8" }}
>
今すぐ使えるクイックスタート（P-00）
</h3>
<p className="text-sm" style={{ color: "#8BA3BC" }}>
「やりたいこと」の部分だけ書き換えてClaude Codeに貼り付ける
</p>
</div>
<CopyButton
label="P-00 をコピー"
text={`このプロジェクトを開始します。
【やりたいこと】
[ここにやりたいことを1〜5文で書く]
【制約・注意事項】
[ここに制約があれば書く。なければ「特になし」]
---
CLAUDE.md を読んで、以下の順番で作業を進めてください：
STEP 1：要件定義（5分）
- やりたいことを「機能要件」「非機能要件」「対象外」に整理する
- リスクを洗い出す（技術・運用・セキュリティ）
- 不明点があれば私に質問する（最大3つ）
STEP 2：設計（5分）
- システム構成を説明する（どんなファイル・モジュールを作るか）
- ハーネス設計を提示する（dry-run・rollback・ログ）
- テスト計画を提示する（何をどうテストするか）
STEP 3：私の承認を待つ
- STEP 1・2 の内容を提示して「この方向で進めてよいですか？」と確認する
- 承認を得てから STEP 4 に進む
STEP 4：実装
- CLAUDE.md の作業ルールに従って実装する
- 各モジュール完成後にテストを実行する
- 完了報告フォーマットで報告する
STEP 5：テスト・検証
- 全テストを実行する
- dry-run で動作確認する
- RYGゲートを評価する
STEP 6：本番移行（私の承認後）
- 本番移行チェックリストを確認する
- 段階的に移行する（最初は1件のみ）`}
/>
</div>
<div
className="rounded-lg p-4 text-xs overflow-x-auto"
style={{ background: "rgba(0,0,0,0.3)", color: "#A8C4D8", fontFamily: "'DM Mono', monospace", lineHeight: "1.6" }}
>
<pre style={{ whiteSpace: "pre-wrap" }}>{`このプロジェクトを開始します。
【やりたいこと】
[ここにやりたいことを1〜5文で書く]
例：「Substackの記事を毎週月曜日に自動投稿したい。記事の内容はCSVファイルで管理する。」
【制約・注意事項】
[ここに制約があれば書く。なければ「特になし」]
---
CLAUDE.md を読んで、STEP 1（要件定義）→ STEP 2（設計）→ 承認 → STEP 4（実装）→ STEP 5（テスト）→ STEP 6（本番移行）の順で進めてください。`}</pre>
</div>
</div>
</div>
</section>
);
}
サイトセクション: 2ファイル集約版(MASTER_CLAUDE.md + START_PROMPT.md)
元ファイル: システム要件定義の分析と汎用化方法/MasterFilesSection.tsx
要約
全知識を2ファイルに集約したv3.0構成を紹介するReactセクション。13パート(A〜M)構成のMASTER_CLAUDE.mdと、17種(P-00〜P-16)の状況別プロンプト集START_PROMPT.mdの使い方を、概要/パート/プロンプトのタブUIで提示する。PART Aだけ書き換えて貼るだけ、というワークフローを4ステップで示す。
要点
- MASTER_CLAUDE.mdは13パートに集約
- START_PROMPT.mdは17プロンプト(P-00〜P-16)を収録
- 各プロンプトに絵文字・実行タイミング・色分けを付与
- PRR/IEEE 829/SDD/成長型ハーネスなど世界基準を内包
- 使い方4ステップ