/**
* GrowingHarnessSection
* Design: Technical Documentary Aesthetic
* Palette: Deep Navy (#0D1B2A) + Teal (#00C2A8) + Amber (#F5A623)
* Typography: Space Grotesk (headings) + DM Sans (body)
*/
import { useState } from "react";
const LAYERS = [
{
num: "Layer 1",
title: "プロジェクト固有層",
subtitle: "Project Layer",
desc: "各プロジェクトに固有の情報。プロジェクト終了後に削除してよい。",
files: ["CLAUDE.md（プロジェクト固有設定）", "progress.md（プロジェクト固有進捗）", "CONSTRAINTS.md（禁止事項）", "E2Eシナリオ（プロジェクト固有テスト）"],
color: "#4A6580",
note: "使い捨て可",
},
{
num: "Layer 2",
title: "知識蓄積層",
subtitle: "Knowledge Layer",
desc: "プロジェクトをまたいで蓄積される知識。使うたびに充実していく。",
files: ["lessons_learned.md（失敗・成功パターン）", "boundary_cases.md（境界ケース集）", "security_patterns.md（セキュリティ対策）", "error_patterns.md（エラーと対処法）", "prompt_library.md（効果的なプロンプト集）"],
color: "#F5A623",
note: "永続・蓄積",
},
{
num: "Layer 3",
title: "テンプレート進化層",
subtitle: "Template Layer",
desc: "使うたびに改善されるテンプレート群。バージョン管理で進化を追跡する。",
files: ["CLAUDE.md.template（v1.3 最新版）", "requirements_template.md", "sdd_template.md", "test_plan_template.md", "harness_template.md"],
color: "#00C2A8",
note: "バージョン管理",
},
];
const GROWTH_CYCLE = [
{
step: "Action 1",
title: "レッスン記録",
desc: "プロジェクト完了後、成功・失敗・発見した境界ケース・効果的だったプロンプトをlessons_learned.mdに追記する",
color: "#00C2A8",
},
{
step: "Action 2",
title: "テンプレートの改善",
desc: "「使いにくかった箇所」「足りなかった項目」を修正し、バージョンを上げる（例：v1.2 → v1.3）",
color: "#00C2A8",
},
{
step: "Action 3",
title: "境界ケースの追加",
desc: "発見した境界ケースをboundary_cases.mdに追記。次のプロジェクトのE2Eシナリオに自動的に反映される",
color: "#F5A623",
},
{
step: "Action 4",
title: "セキュリティパターンの追加",
desc: "発見したセキュリティ対策をsecurity_patterns.mdに追記。次のプロジェクトのセキュリティチェックが強化される",
color: "#F5A623",
},
{
step: "Action 5",
title: "プロジェクト記録の保存",
desc: "projects/ディレクトリに今回のプロジェクト記録（概要・成果・失敗）を保存する",
color: "#4A6580",
},
];
const GROWTH_EFFECT = [
{ projects: "1プロジェクト目", version: "v1.0", effect: "基本的な安全性の確保", score: 20 },
{ projects: "3プロジェクト目", version: "v1.3", effect: "境界ケース・セキュリティが充実", score: 50 },
{ projects: "5プロジェクト目", version: "v1.5", effect: "類似プロジェクトの失敗を事前回避", score: 70 },
{ projects: "10プロジェクト目", version: "v2.0", effect: "業種・規模別テンプレートが揃う", score: 95 },
];
const INIT_PROMPTS = [
{
id: "H-INIT",
title: "成長型ハーネスの初期化",
when: "最初の1回だけ実行する",
color: "#00C2A8",
text: `成長型ハーネスを初期化してください。
以下のディレクトリ構造を作成してください：
~/claude-harness/
├── README.md（使い方ガイド）
├── VERSION（初期値：v1.0.0）
├── templates/（テンプレート群）
│ ├── CLAUDE.md.template
│ ├── CONSTRAINTS.md.template
│ ├── requirements_template.md
│ ├── sdd_template.md
│ └── test_plan_template.md
├── knowledge/
│ ├── lessons_learned.md
│ ├── boundary_cases.md
│ ├── security_patterns.md
│ ├── error_patterns.md
│ └── prompt_library.md
├── projects/（プロジェクト記録）
└── changelog.md
各ファイルの初期内容を作成してください。
作成後、ディレクトリ構造を確認して報告してください。`,
},
{
id: "H-UPDATE",
title: "プロジェクト完了後のハーネス更新",
when: "プロジェクトが完了するたびに実行する",
color: "#F5A623",
text: `プロジェクトが完了しました。成長型ハーネスを更新してください。
【今回のプロジェクト】
- プロジェクト名：[名前]
- 期間：[開始〜終了]
- 概要：[何を作ったか]
【更新手順】
1. ~/claude-harness/knowledge/lessons_learned.md に学びを追記する
2. 発見した境界ケースを boundary_cases.md に追記する
3. 発見したセキュリティパターンを security_patterns.md に追記する
4. 効果的だったプロンプトを prompt_library.md に追記する
5. テンプレートの改善点があれば修正してバージョンを上げる
6. changelog.md に変更内容を記録する
7. ~/claude-harness/projects/[プロジェクト名]/ にプロジェクト記録を保存する
更新完了後、何が追加・改善されたかを報告してください。`,
},
{
id: "H-NEW",
title: "新プロジェクト開始（ハーネスから）",
when: "新しいプロジェクトを始めるとき",
color: "#00C2A8",
text: `新プロジェクトを開始します。成長型ハーネスから設定を引き継いでください。
【手順】
1. ~/claude-harness/VERSION を確認する
2. ~/claude-harness/knowledge/lessons_learned.md を読む
→ 類似プロジェクトの失敗パターンを確認する
3. ~/claude-harness/knowledge/boundary_cases.md を読む
→ E2Eシナリオに境界ケースを追加する
4. テンプレートをコピーする：
cp ~/claude-harness/templates/CLAUDE.md.template ./CLAUDE.md
cp ~/claude-harness/templates/CONSTRAINTS.md.template ./CONSTRAINTS.md
5. CLAUDE.md のプレースホルダーをプロジェクト固有の情報で埋める
完了したら、過去のプロジェクトから引き継いだ知識の概要を報告してください。`,
},
{
id: "H-REVIEW",
title: "ハーネスの定期レビュー",
when: "月1回または5プロジェクトごとに実行する",
color: "#4A6580",
text: `成長型ハーネスの定期レビューを行います。
以下を確認してください：
1. テンプレートの品質確認
- 使いにくい箇所がないか
- 不足している項目がないか
- 古くなった情報がないか
2. 知識蓄積の確認
- lessons_learned.md の内容が活用されているか
- 同じ失敗が繰り返されていないか
3. プロンプト集の確認
- 効果的でないプロンプトがないか
- 新しいシーンに対応するプロンプトが必要か
4. 改善提案
- 次のバージョンで改善すべき点を3つ提案する
レビュー結果を報告してください。`,
},
];
export default function GrowingHarnessSection() {
const [activeLayer, setActiveLayer] = useState(1);
const [copiedId, setCopiedId] = useState<string | null>(null);
const handleCopy = (text: string, id: string) => {
navigator.clipboard.writeText(text).then(() => {
setCopiedId(id);
setTimeout(() => setCopiedId(null), 2000);
});
};
return (
<section id="growing-harness" style={{ background: "#0A1520", padding: "96px 0", borderTop: "1px solid #1E3A5F" }}>
<div className="container">
{/* Header */}
<div className="mb-12">
<div
className="text-xs font-bold tracking-widest uppercase mb-3"
style={{ color: "#F5A623", fontFamily: "'Space Grotesk', sans-serif", letterSpacing: "0.15em" }}
>
Growing Harness
</div>
<h2
className="font-bold"
style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: "clamp(1.6rem, 3.5vw, 2.4rem)", color: "#F0F4F8", lineHeight: 1.2 }}
>
成長型ハーネス設計：
<span style={{ color: "#F5A623" }}>プロジェクトをまたいで進化する</span>
</h2>
<div className="mt-2 h-0.5 w-16" style={{ background: "#F5A623" }} />
<p className="mt-4 text-sm leading-relaxed max-w-2xl" style={{ color: "#6A8BA8" }}>
従来のハーネスは「1プロジェクト使い捨て」だった。成長型ハーネスは、プロジェクトが終わるたびに
知識・テンプレート・失敗パターンが蓄積され、次のプロジェクトは最初から高品質なハーネスで始められる。
</p>
</div>
{/* 3 Layers */}
<div className="mb-16">
<div className="text-xs font-bold tracking-widest uppercase mb-6" style={{ color: "#2A4F73", fontFamily: "'Space Grotesk', sans-serif" }}>
3層構造：プロジェクト固有 → 知識蓄積 → テンプレート進化
</div>
<div className="flex gap-2 mb-6 flex-wrap">
{LAYERS.map((l, i) => (
<button
key={l.num}
onClick={() => setActiveLayer(i)}
className="text-xs font-bold px-3 py-2 transition-all"
style={{
fontFamily: "'Space Grotesk', sans-serif",
background: activeLayer === i ? l.color : "#0D1B2A",
color: activeLayer === i ? (l.color === "#4A6580" ? "#F0F4F8" : "#0D1B2A") : "#6A8BA8",
border: `1px solid ${activeLayer === i ? l.color : "#1E3A5F"}`,
}}
>
{l.num}
</button>
))}
</div>
{(() => {
const l = LAYERS[activeLayer];
return (
<div style={{ border: `1px solid ${l.color}40`, background: "#0D1B2A", padding: "24px" }}>
<div className="flex items-start gap-4 mb-4">
<div
className="text-xs font-bold px-2 py-1 flex-shrink-0"
style={{ background: `${l.color}20`, color: l.color, fontFamily: "'Space Grotesk', sans-serif" }}
>
{l.note}
</div>
<div>
<div className="font-bold" style={{ fontFamily: "'Space Grotesk', sans-serif", color: "#F0F4F8", fontSize: "16px" }}>
{l.title}
</div>
<div className="text-xs mt-0.5" style={{ color: l.color }}>{l.subtitle}</div>
</div>
</div>
<p className="text-sm mb-4" style={{ color: "#6A8BA8" }}>{l.desc}</p>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
{l.files.map((f) => (
<div key={f} className="flex items-center gap-2 px-3 py-2" style={{ background: "#0A1520", border: "1px solid #1E3A5F" }}>
<span className="text-xs" style={{ color: l.color, flexShrink: 0 }}>▸</span>
<span className="text-xs" style={{ color: "#6A8BA8", fontFamily: "'DM Mono', monospace" }}>{f}</span>
</div>
))}
</div>
</div>
);
})()}
</div>
{/* Growth Cycle */}
<div className="mb-16">
<div className="text-xs font-bold tracking-widest uppercase mb-6" style={{ color: "#2A4F73", fontFamily: "'Space Grotesk', sans-serif" }}>
成長のサイクル：プロジェクト完了後に行う5つのアクション
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3">
{GROWTH_CYCLE.map((g, i) => (
<div key={g.step} style={{ background: "#0D1B2A", border: "1px solid #1E3A5F", padding: "16px" }}>
<div className="flex items-center gap-2 mb-2">
<span
className="text-xs font-bold px-1.5 py-0.5"
style={{ background: `${g.color}20`, color: g.color, fontFamily: "'Space Grotesk', sans-serif" }}
>
{g.step}
</span>
{i < 4 && (
<span className="hidden lg:block text-xs" style={{ color: "#1E3A5F" }}>→</span>
)}
</div>
<div className="font-semibold text-sm mb-2" style={{ color: "#F0F4F8", fontFamily: "'Space Grotesk', sans-serif" }}>{g.title}</div>
<p className="text-xs leading-relaxed" style={{ color: "#4A6580" }}>{g.desc}</p>
</div>
))}
</div>
</div>
{/* Growth Effect */}
<div className="mb-16">
<div className="text-xs font-bold tracking-widest uppercase mb-6" style={{ color: "#2A4F73", fontFamily: "'Space Grotesk', sans-serif" }}>
成長型ハーネスの効果：プロジェクト数による変化
</div>
<div className="space-y-3">
{GROWTH_EFFECT.map((g) => (
<div key={g.projects} className="flex items-center gap-4" style={{ background: "#0D1B2A", border: "1px solid #1E3A5F", padding: "12px 16px" }}>
<div className="flex-shrink-0 w-32">
<div className="text-xs font-bold" style={{ color: "#F0F4F8", fontFamily: "'Space Grotesk', sans-serif" }}>{g.projects}</div>
<div className="text-xs" style={{ color: "#00C2A8" }}>{g.version}</div>
</div>
<div className="flex-1">
<div className="flex justify-between mb-1">
<span className="text-xs" style={{ color: "#6A8BA8" }}>{g.effect}</span>
<span className="text-xs font-bold" style={{ color: "#00C2A8", fontFamily: "'Space Grotesk', sans-serif" }}>{g.score}%</span>
</div>
<div className="h-1" style={{ background: "#1E3A5F" }}>
<div className="h-full" style={{ width: `${g.score}%`, background: "linear-gradient(to right, #00C2A8, #F5A623)" }} />
</div>
</div>
</div>
))}
</div>
</div>
{/* Directory Structure */}
<div className="mb-16">
<div className="text-xs font-bold tracking-widest uppercase mb-4" style={{ color: "#2A4F73", fontFamily: "'Space Grotesk', sans-serif" }}>
ディレクトリ構造
</div>
<pre
className="p-5 text-xs leading-relaxed overflow-x-auto"
style={{
background: "#0D1B2A",
border: "1px solid #1E3A5F",
color: "#6A8BA8",
fontFamily: "'DM Mono', 'Fira Code', monospace",
}}
>{`~/claude-harness/ ← 成長型ハーネスのルート
├── README.md ← 使い方ガイド
├── VERSION ← ハーネスのバージョン（例：v1.3.0）
├── templates/ ← テンプレート進化層（Layer 3）
│ ├── CLAUDE.md.template
│ ├── CONSTRAINTS.md.template
│ ├── requirements_template.md
│ ├── sdd_template.md
│ └── test_plan_template.md
├── knowledge/ ← 知識蓄積層（Layer 2）
│ ├── lessons_learned.md ← 失敗・成功パターン集
│ ├── boundary_cases.md ← 境界ケース集
│ ├── security_patterns.md ← セキュリティ対策集
│ ├── error_patterns.md ← エラーパターンと対処法
│ └── prompt_library.md ← 効果的なプロンプト集
├── prompts/ ← シーン別プロンプト集（12カテゴリ）
├── projects/ ← プロジェクト記録（Layer 1の保存先）
│ ├── project_001_substack/
│ └── project_002_kindle/
└── changelog.md ← ハーネス自体の変更履歴`}</pre>
</div>
{/* Harness Prompts */}
<div>
<div className="text-xs font-bold tracking-widest uppercase mb-6" style={{ color: "#2A4F73", fontFamily: "'Space Grotesk', sans-serif" }}>
ハーネス管理プロンプト（コピペ用）
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
{INIT_PROMPTS.map((p) => (
<div key={p.id} style={{ border: `1px solid ${p.color}30`, background: "#0D1B2A" }}>
<div
className="px-4 py-3 flex items-center justify-between"
style={{ borderBottom: `1px solid ${p.color}20`, background: `${p.color}08` }}
>
<div>
<div className="flex items-center gap-2">
<span
className="text-xs font-bold px-1.5 py-0.5"
style={{ background: `${p.color}20`, color: p.color, fontFamily: "'Space Grotesk', sans-serif" }}
>
{p.id}
</span>
<span className="font-semibold text-sm" style={{ color: "#F0F4F8", fontFamily: "'Space Grotesk', sans-serif" }}>
{p.title}
</span>
</div>
<div className="text-xs mt-0.5" style={{ color: "#4A6580" }}>
<span style={{ color: p.color }}>実行タイミング：</span>{p.when}
</div>
</div>
<button
onClick={() => handleCopy(p.text, p.id)}
className="flex-shrink-0 text-xs px-3 py-1.5 ml-3 transition-all"
style={{
background: copiedId === p.id ? `${p.color}20` : "#0A1520",
color: copiedId === p.id ? p.color : "#4A6580",
border: `1px solid ${copiedId === p.id ? p.color : "#1E3A5F"}`,
fontFamily: "'Space Grotesk', sans-serif",
}}
>
{copiedId === p.id ? "✓ コピー済み" : "コピー"}
</button>
</div>
<pre
className="p-4 text-xs leading-relaxed overflow-x-auto"
style={{
color: "#6A8BA8",
fontFamily: "'DM Mono', 'Fira Code', monospace",
whiteSpace: "pre-wrap",
wordBreak: "break-word",
maxHeight: "200px",
overflowY: "auto",
}}
>
{p.text}
</pre>
</div>
))}
</div>
</div>
</div>
</section>
);
}
サイトセクション: 成長型ハーネス3層設計と運用プロンプト
元ファイル: システム要件定義の分析と汎用化方法/GrowingHarnessSection.tsx
要約
プロジェクトをまたいで進化する「成長型ハーネス」を解説するReactセクション。プロジェクト固有層/知識蓄積層/テンプレート進化層の3層構造、5アクションの成長サイクル、プロジェクト数に応じた成熟度推移を可視化する。H-INIT/H-UPDATE/H-NEW/H-REVIEWの運用プロンプトをコピー可能な形で収録。
要点
- 3層構造: 使い捨て→永続知識蓄積→バージョン管理テンプレート
- 完了後の更新サイクル
- ~/claude-harness/ ディレクトリ構造を定義
- 成長効果を1→3→5→10プロジェクトでスコア化(20→95)
- 初期化/更新/新規開始/定期レビューの4プロンプトを内蔵