sync: 补回 step-05 §5.2b Implementation Artifacts 展开式卡片规范

.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
 
 文档首页功能：