From 4cbab2a266f5f6520054608c6c5b51d7056d75a3 Mon Sep 17 00:00:00 2001
From: Claude Code <d8d-claude@d8d.fun>
Date: Thu, 9 Apr 2026 02:36:09 +0000
Subject: [PATCH] =?UTF-8?q?sync:=20=E8=A1=A5=E5=9B=9E=20step-05=20=C2=A75.?=
 =?UTF-8?q?2b=20Implementation=20Artifacts=20=E5=B1=95=E5=BC=80=E5=BC=8F?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=E8=A7=84=E8=8C=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../steps/step-05-generate-docs.md            | 45 +++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/.claude/skills/d8d-prototype/steps/step-05-generate-docs.md b/.claude/skills/d8d-prototype/steps/step-05-generate-docs.md
index 803d32b..87a6fec 100644
--- a/.claude/skills/d8d-prototype/steps/step-05-generate-docs.md
+++ b/.claude/skills/d8d-prototype/steps/step-05-generate-docs.md
@@ -76,6 +76,51 @@ function getPathPrefixes() {
 }
 ```
 
+### 5.2b Implementation Artifacts 展开式卡片规范
+
+当 `implementation-artifacts/` 目录存在多个 Epic 的 Story 文件（`X-Y-title.md` 格式）时，**必须**使用展开式卡片，而非单个 `<a>` 链接。
+
+**禁止**：
+- 每个 Epic 用单个 `<a>` 标签链接到第一个 Story
+- 只显示 Story 数量但无法访问所有 Story
+
+**必须**：
+- 每个 Epic 是一个可展开的 `<div class="epic-card">` 容器
+- 点击 header 展开显示所有 Story 的链接列表
+- Story 数据用 JS 数组（`epicStories`）定义，`renderV2Epics()` 动态渲染
+- 使用 `max-height` CSS 过渡动画（初始 0，展开 500px）
+- 箭头图标 `fa-chevron-down` 展开时旋转 180°
+- Story 链接使用 `event.stopPropagation()` 防止冒泡到 header
+
+**HTML 结构**：
+```html
+<div class="epic-card">
+  <div class="epic-header" onclick="toggleEpic(this)">
+    <!-- Epic 编号 + 标题 + Story 数 + 展开箭头 -->
+  </div>
+  <div class="epic-stories">
+    <!-- 动态生成的 Story 链接列表 -->
+    <a href="view-doc.html?doc=...">S1.1 标题</a>
+  </div>
+</div>
+```
+
+**CSS 类**：
+```css
+.epic-card { transition: border-color 0.3s ease; }
+.epic-card.expanded { border-color: rgba(34, 197, 94, 0.3); }
+.epic-arrow { transition: transform 0.3s ease; }
+.epic-card.expanded .epic-arrow { transform: rotate(180deg); }
+.epic-stories { max-height: 0; overflow: hidden; transition: max-height 0.35s ease-out; }
+.epic-card.expanded .epic-stories { max-height: 500px; }
+```
+
+**JavaScript**：
+- `epicStories` 对象：key 为 Epic 编号，value 为 `{ file, label }` 数组
+- `epicMeta` 数组：Epic 编号和标题的有序列表
+- `renderV2Epics()`：渲染所有卡片到 `#v2-epic-grid` 容器
+- `toggleEpic(headerEl)`：切换父 `.epic-card` 的 `.expanded` 类
+
 ### 5.3 生成 docs-index.html
 
 文档首页功能：