@trench-craft/sds 1.0.0

package/registry/skills-registry.yaml

@@ -0,0 +1,218 @@
+# SDS v2.0 技能注册表
+# 包含所有按需加载技能的元数据
+
+skills:
+  # 测试场景包
+  visual-verification-gate:
+    id: "visual-verification-gate"
+    version: "2.0.0"
+    source: "superpowers"
+    trigger_conditions:
+      - type: file_content
+        contains_any: ["screenshot", "visual", "UI", "截图", "界面"]
+    dependencies: []
+    size: "medium"
+    cache_ttl: "7d"
+
+  accessibility-audit:
+    id: "accessibility-audit"
+    version: "2.0.0"
+    source: "superpowers"
+    trigger_conditions:
+      - type: file_content
+        contains_any: ["a11y", "accessibility", "aria", "无障碍"]
+    dependencies: []
+    size: "medium"
+    cache_ttl: "7d"
+
+  # 性能场景包
+  performance-budget:
+    id: "performance-budget"
+    version: "2.0.0"
+    source: "superpowers"
+    trigger_conditions:
+      - type: file_content
+        contains_any: ["performance", "lighthouse", "性能", "LCP", "FCP"]
+    dependencies: []
+    size: "medium"
+    cache_ttl: "7d"
+
+  # 安全场景包
+  security-hardening:
+    id: "security-hardening"
+    version: "2.0.0"
+    source: "superpowers"
+    trigger_conditions:
+      - type: risk_marker
+        markers: ["auth", "token", "password", "认证", "密码"]
+    dependencies: []
+    size: "medium"
+    cache_ttl: "7d"
+
+  # 数据库场景包
+  database-migration:
+    id: "database-migration"
+    version: "2.0.0"
+    source: "superpowers"
+    trigger_conditions:
+      - type: file_content
+        contains_any: ["migration", "schema", "数据库", "迁移"]
+    dependencies: []
+    size: "medium"
+    cache_ttl: "7d"
+
+  # API 场景包
+  api-design:
+    id: "api-design"
+    version: "2.0.0"
+    source: "superpowers"
+    trigger_conditions:
+      - type: file_content
+        contains_any: ["endpoint", "REST", "GraphQL", "API", "接口"]
+    dependencies: []
+    size: "medium"
+    cache_ttl: "7d"
+
+  # 前端场景包
+  component-design:
+    id: "component-design"
+    version: "2.0.0"
+    source: "superpowers"
+    trigger_conditions:
+      - type: file_content
+        contains_any: ["component", "React", "Vue", "组件"]
+    dependencies: []
+    size: "medium"
+    cache_ttl: "7d"
+
+  # DevOps 场景包
+  ci-cd-pipeline:
+    id: "ci-cd-pipeline"
+    version: "2.0.0"
+    source: "superpowers"
+    trigger_conditions:
+      - type: file_content
+        contains_any: ["CI", "CD", "pipeline", "deploy", "部署"]
+    dependencies: []
+    size: "medium"
+    cache_ttl: "7d"
+
+  # 文档场景包
+  documentation-generator:
+    id: "documentation-generator"
+    version: "2.0.0"
+    source: "superpowers"
+    trigger_conditions:
+      - type: file_content
+        contains_any: ["README", "docs", "documentation", "文档"]
+    dependencies: []
+    size: "medium"
+    cache_ttl: "7d"
+
+  # 调试场景包
+  error-diagnosis:
+    id: "error-diagnosis"
+    version: "2.0.0"
+    source: "superpowers"
+    trigger_conditions:
+      - type: file_content
+        contains_any: ["error", "exception", "bug", "错误", "异常"]
+    dependencies: []
+    size: "medium"
+    cache_ttl: "7d"
+
+  # 重构场景包
+  refactoring-assistant:
+    id: "refactoring-assistant"
+    version: "2.0.0"
+    source: "superpowers"
+    trigger_conditions:
+      - type: file_content
+        contains_any: ["refactor", "重构", "technical debt", "技术债"]
+    dependencies: []
+    size: "medium"
+    cache_ttl: "7d"
+
+  # 代码审查场景包
+  code-review-automation:
+    id: "code-review-automation"
+    version: "2.0.0"
+    source: "superpowers"
+    trigger_conditions:
+      - type: file_content
+        contains_any: ["review", "PR", "pull request", "审查"]
+    dependencies: []
+    size: "medium"
+    cache_ttl: "7d"
+
+  # 测试生成场景包
+  test-generator:
+    id: "test-generator"
+    version: "2.0.0"
+    source: "superpowers"
+    trigger_conditions:
+      - type: file_content
+        contains_any: ["test", "spec", "测试", "单元测试"]
+    dependencies: []
+    size: "medium"
+    cache_ttl: "7d"
+
+  # Git 场景包
+  git-workflow-assistant:
+    id: "git-workflow-assistant"
+    version: "2.0.0"
+    source: "superpowers"
+    trigger_conditions:
+      - type: file_content
+        contains_any: ["merge", "rebase", "branch", "分支", "合并"]
+    dependencies: []
+    size: "medium"
+    cache_ttl: "7d"
+
+  # 依赖管理场景包
+  dependency-audit:
+    id: "dependency-audit"
+    version: "2.0.0"
+    source: "superpowers"
+    trigger_conditions:
+      - type: file_content
+        contains_any: ["dependency", "package", "依赖", "npm", "pip"]
+    dependencies: []
+    size: "medium"
+    cache_ttl: "7d"
+
+  # 国际化场景包
+  i18n-support:
+    id: "i18n-support"
+    version: "2.0.0"
+    source: "superpowers"
+    trigger_conditions:
+      - type: file_content
+        contains_any: ["i18n", "locale", "translation", "国际化", "翻译"]
+    dependencies: []
+    size: "medium"
+    cache_ttl: "7d"
+
+  # 配置管理场景包
+  config-management:
+    id: "config-management"
+    version: "2.0.0"
+    source: "superpowers"
+    trigger_conditions:
+      - type: file_content
+        contains_any: ["config", "env", "environment", "配置", "环境变量"]
+    dependencies: []
+    size: "medium"
+    cache_ttl: "7d"
+
+  # 日志场景包
+  logging-observability:
+    id: "logging-observability"
+    version: "2.0.0"
+    source: "superpowers"
+    trigger_conditions:
+      - type: file_content
+        contains_any: ["log", "trace", "monitor", "日志", "监控"]
+    dependencies: []
+    size: "medium"
+    cache_ttl: "7d"

package/skills/core/brainstorming/SKILL.md

@@ -0,0 +1,259 @@
+---
+name: brainstorming
+description: "在任何创造性工作之前必须使用此技能——创建功能、构建组件、添加功能或修改行为。在实现之前先探索用户意图、需求和设计。"
+---
+
+# Brainstorming: 将想法转化为设计
+
+通过自然的协作对话，帮助将想法转化为完整的设计和规格说明。
+
+## 触发条件（同时满足才触发）
+
+**触发**：
+- 用户明确要求实现一个新功能、创建新组件、添加新特性
+- 用户说"我要实现/做一个/添加..."等开发需求
+- 之前阶段的输出（opsx:explore/existing-code-caveman）已完成，准备进行需求分析
+
+**不触发**：
+- ❌ 问候、闲聊、概念问答
+- ❌ 技术咨询、调试问题、代码审查请求
+- ❌ 用户只是问项目情况或阅读代码
+
+首先了解当前项目的上下文，然后逐一提问来完善想法。一旦你理解了要构建的内容，就展示设计方案并获得用户批准。
+
+<HARD-GATE>
+在你展示设计方案并获得用户批准之前，不要调用任何实现技能、编写任何代码、搭建任何项目或采取任何实现行动。这适用于所有项目，无论看起来多简单。
+</HARD-GATE>
+
+## 反模式："这个太简单了，不需要设计"
+
+每个项目都要经过这个流程。一个待办事项列表、一个单函数工具、一个配置变更——全都需要。"简单"的项目恰恰是未经检验的假设造成最多浪费的地方。设计可以很简短（对于真正简单的项目几句话就够了），但你必须展示出来并获得批准。
+
+## 检查清单
+
+你必须为以下每个条目创建任务，并按顺序完成：
+
+1. **探索项目上下文** — 检查文件、文档、最近的 commit
+2. **提供视觉伴侣**（如果主题涉及视觉问题）— 这是一条独立的消息，不要与澄清问题合并。参见下方的"视觉伴侣"部分。
+3. **提出澄清问题** — 每次一个，了解目的/约束/成功标准
+4. **提出 2-3 种方案** — 附带权衡分析和你的推荐
+5. **展示设计** — 按复杂度分节展示，每节展示后获得用户批准
+6. **编写设计文档** — 保存到 `openspec/changes/<name>/brainstorming.md`（V2 OpenSpec 工作流）
+7. **spec_review — 调度子代理审查规格** — 使用 `spec-document-reviewer-prompt.md` 模板调度审查子代理
+8. **用户审查书面规格** — 在继续之前请用户审查规格文件
+9. **生成 4 份工件** — 用户批准设计后，直接执行 opsx:propose 逻辑生成 proposal.md / design.md / specs.md / tasks.md 到 `openspec/changes/<name>/`
+10. **过渡到实现** — 调用 writing-plans 技能创建实现计划
+
+## 流程图
+
+```dot
+digraph brainstorming {
+    "探索项目上下文" [shape=box];
+    "有视觉相关问题?" [shape=diamond];
+    "提供视觉伴侣\n（独立消息，不含其他内容）" [shape=box];
+    "提出澄清问题" [shape=box];
+    "提出 2-3 种方案" [shape=box];
+    "分节展示设计" [shape=box];
+    "用户批准设计?" [shape=diamond];
+    "编写设计文档" [shape=box];
+    "spec_review\n（调度子代理审查）" [shape=box];
+    "spec_review 通过?" [shape=diamond];
+    "用户审查规格?" [shape=diamond];
+    "调用 writing-plans 技能" [shape=doublecircle];
+
+    "探索项目上下文" -> "有视觉相关问题?";
+    "有视觉相关问题?" -> "提供视觉伴侣\n（独立消息，不含其他内容）" [label="是"];
+    "有视觉相关问题?" -> "提出澄清问题" [label="否"];
+    "提供视觉伴侣\n（独立消息，不含其他内容）" -> "提出澄清问题";
+    "提出澄清问题" -> "提出 2-3 种方案";
+    "提出 2-3 种方案" -> "分节展示设计";
+    "分节展示设计" -> "用户批准设计?";
+    "用户批准设计?" -> "分节展示设计" [label="否，修改"];
+    "用户批准设计?" -> "编写设计文档" [label="是"];
+    "编写设计文档" -> "spec_review\n（调度子代理审查）";
+    "spec_review\n（调度子代理审查）" -> "spec_review 通过?";
+    "spec_review 通过?" -> "编写设计文档" [label="发现问题，修复"];
+    "spec_review 通过?" -> "用户审查规格?" [label="通过"];
+    "用户审查规格?" -> "编写设计文档" [label="要求修改"];
+    "用户审查规格?" -> "调用 opsx:propose 生成 4 份工件" [label="批准"];
+    "调用 opsx:propose 生成 4 份工件" -> "调用 writing-plans 技能";
+}
+```
+
+**终止状态是调用 opsx:propose 生成 4 份工件，然后调用 writing-plans。** 不要跳过 opsx:propose 直接到 writing-plans。
+
+## 流程详述
+
+**理解想法：**
+
+- 首先查看当前项目状态（文件、文档、最近的 commit）
+- 在提出详细问题之前，先评估范围：如果需求描述了多个独立子系统（例如"构建一个包含聊天、文件存储、计费和分析的平台"），立即指出这一点。不要花时间用问题去细化一个需要先拆分的项目。
+- 如果项目规模过大，单个规格说明无法覆盖，帮助用户分解为子项目：有哪些独立的部分，它们之间有什么关系，应该按什么顺序构建？然后通过正常的设计流程进行第一个子项目的头脑风暴。每个子项目都有自己的规格 → 计划 → 实现周期。
+- 对于范围适当的项目，每次提一个问题来完善想法
+- 尽量使用选择题，开放式问题也可以
+- 每条消息只提一个问题——如果一个主题需要更多探索，拆分成多个问题
+- 重点理解：目的、约束、成功标准
+
+**探索方案：**
+
+- 提出 2-3 种不同的方案及其权衡
+- 以对话的方式展示选项，附上你的推荐和理由
+- 先展示你推荐的方案并解释原因
+
+**展示设计：**
+
+- 一旦你认为理解了要构建的内容，就展示设计
+- 每个部分的篇幅与其复杂度匹配：简单的几句话，复杂的最多 200-300 字
+- 每个部分展示后询问是否正确
+- 涵盖：架构、组件、数据流、错误处理、测试
+- 随时准备回头澄清不明确的地方
+
+**面向隔离和清晰的设计：**
+
+- 将系统拆分为更小的单元，每个单元有一个明确的职责，通过定义良好的接口通信，可以独立理解和测试
+- 对于每个单元，你应该能回答：它做什么，如何使用，它依赖什么？
+- 别人能否不看内部实现就理解一个单元的功能？你能否在不影响调用者的情况下修改内部实现？如果不能，边界需要调整。
+- 更小、边界清晰的单元也更便于你工作——你对能一次放入上下文的代码推理得更好，文件越专注你的编辑越可靠。当文件变大时，这通常意味着它承担了过多职责。
+
+**在现有代码库中工作：**
+
+- 在提出更改之前先探索现有结构。遵循现有模式。
+- 如果现有代码存在影响当前工作的问题（例如文件过大、边界不清、职责纠缠），在设计中包含有针对性的改进——就像一个优秀的开发者在工作中改进经手的代码一样。
+- 不要提议无关的重构。专注于服务当前目标的事情。
+
+## 设计之后
+
+**文档：**
+
+- **规格必须包含「目标文件结构」章节**：列出每个新增/修改文件的路径、职责和预估行数。单文件不超过 300 行、单函数不超过 50 行。如果某个文件预估超出，必须在 spec 阶段就拆分方案。
+- 将验证通过的设计（规格说明）写入 `openspec/changes/<name>/brainstorming.md`
+- （V2 OpenSpec 工作流，用户对规格位置的偏好优先于此默认值）
+
+**spec_review — 调度子代理审查：**
+编写规格文档后，使用 `spec-document-reviewer-prompt.md` 模板调度一个子代理来审查规格：
+
+1. 将规格文档路径传入 `spec-document-reviewer-prompt.md` 中的 `[SPEC_FILE_PATH]` 占位符
+2. 调度审查子代理（使用 spawn_agent）
+3. 如果审查通过（状态：通过）→ 继续用户审查关卡
+4. 如果审查发现问题（状态：发现问题）→ 根据问题修复规格文档，然后重新运行 spec_review
+
+**用户审查关卡：**
+spec_review 通过后，请用户在继续之前审查书面规格：
+
+> "规格已编写。请审查一下，如果在我们开始编写实现计划之前你想做任何修改，请告诉我。"
+
+等待用户回复。如果他们要求修改，做出修改并重新运行 spec_review。只有在用户批准后才继续。
+
+**生成 4 份工件：**
+
+- 调用 `opsx:propose` 技能生成 proposal.md、design.md、specs.md、tasks.md 四份标准化工件
+- 这些工件定义变更的范围、技术方案、验收标准和执行任务
+
+**实现：**
+
+- 调用 writing-plans 技能创建详细的实现计划
+- 执行顺序：brainstorming → opsx:propose（4 份工件）→ writing-plans → opsx:apply
+
+## 核心原则
+
+- **每次一个问题** — 不要同时抛出多个问题
+- **优先选择题** — 在可能的情况下比开放式问题更容易回答
+- **严格遵循 YAGNI** — 从所有设计中移除不必要的功能
+- **探索替代方案** — 在做决定之前始终提出 2-3 种方案
+- **增量验证** — 展示设计，获得批准后再继续
+- **保持灵活** — 有不明确的地方就回头澄清
+
+## 视觉伴侣
+
+一个基于浏览器的伴侣工具，用于在头脑风暴过程中展示原型、图表和视觉选项。它是一个工具——不是一种模式。接受伴侣意味着它可用于适合视觉呈现的问题；并不意味着每个问题都要通过浏览器。
+
+**提供伴侣：** 当你预计后续问题会涉及视觉内容（原型、布局、图表）时，提供一次以获得同意：
+> "我们接下来讨论的一些内容，如果能在浏览器中展示给你看可能会更直观。我可以在讨论过程中为你制作原型、图表、对比图和其他视觉材料。这个功能还比较新，可能会消耗较多 token。要试试吗？（需要打开一个本地 URL）"
+
+**此提议必须是一条独立的消息。** 不要将它与澄清问题、上下文摘要或任何其他内容合并。消息中应该只包含上述提议，没有其他内容。等待用户回复后再继续。如果他们拒绝，继续纯文本的头脑风暴。
+
+**逐问题决策：** 即使用户接受了，也要对每个问题单独决定是使用浏览器还是终端。判断标准：**用户看到它是否比读到它更容易理解？**
+
+- **使用浏览器** 展示本身就是视觉的内容——原型、线框图、布局对比、架构图、并排视觉设计
+- **使用终端** 展示文本内容——需求问题、概念选择、权衡列表、A/B/C/D 文字选项、范围决策
+
+关于 UI 主题的问题不一定是视觉问题。"在这个上下文中个性化是什么意思？"是一个概念问题——使用终端。"哪种向导布局更好？"是一个视觉问题——使用浏览器。
+
+如果他们同意使用伴侣，在继续之前阅读详细指南：`skills/brainstorming/visual-companion.md`
+
+---
+
+## 图谱查询接口
+
+在需求分析阶段，可以使用图谱查询接口来更好地理解现有代码库，从而做出更准确的设计决策。
+
+### 使用场景
+
+1. **探索现有功能**：了解项目中已有哪些功能模块
+2. **分析依赖关系**：查看模块间的依赖关系，避免设计冲突
+3. **识别影响范围**：评估新功能对现有代码的影响
+4. **发现技术债务**：识别需要重构的代码区域
+
+### 常用查询
+
+```bash
+# 查询项目概览
+sds graph status
+
+# 查询所有模块
+sds graph query --sql "SELECT DISTINCT SUBSTR(path, 1, INSTR(path, '/') - 1) as module FROM files WHERE path LIKE '%/%'"
+
+# 查询入口文件
+sds graph query --template entry-points
+
+# 查询特定模块的文件
+sds graph query --sql "SELECT path, lang, lines FROM files WHERE path LIKE 'src/auth/%'"
+
+# 查询函数调用关系
+sds graph query --sql "
+  SELECT 
+    f1.path as caller_file, 
+    s1.name as caller_function,
+    f2.path as callee_file,
+    s2.name as callee_function
+  FROM call_graph cg
+  JOIN files f1 ON cg.caller_file_id = f1.id
+  JOIN symbols s1 ON cg.caller_symbol_id = s1.id
+  JOIN files f2 ON cg.callee_file_id = f2.id
+  JOIN symbols s2 ON cg.callee_symbol_id = s2.id
+  WHERE cg.relation_type = 'call'
+  AND f1.path LIKE 'src/auth/%'
+  LIMIT 20
+"
+
+# 查询循环依赖
+sds graph query --template circular-deps
+
+# 查询死代码
+sds graph query --template dead-code
+```
+
+### 最佳实践
+
+1. **在需求分析前执行**：先运行 `sds graph status` 了解项目概况
+2. **针对相关模块查询**：只查询与新功能相关的模块，避免信息过载
+3. **结合语义图谱**：如果已运行 `sds graph enhance`，可以获取更丰富的语义信息
+4. **记录关键发现**：将重要的架构约束记录到设计文档中
+
+### 示例流程
+
+```
+1. 用户: "我想添加一个用户认证功能"
+
+2. AI: 
+   - 运行 `sds graph status` 了解项目概况
+   - 运行 `sds graph query --template entry-points` 查看入口文件
+   - 运行 `sds graph query --sql "SELECT * FROM files WHERE path LIKE '%auth%'"` 查看现有认证相关代码
+   - 运行 `sds graph query --template circular-deps` 检查是否有循环依赖
+
+3. 基于查询结果，AI 可以：
+   - 了解项目的技术栈和架构模式
+   - 识别现有的认证相关代码
+   - 评估新功能对现有代码的影响
+   - 提出更准确的设计方案
+```

package/skills/core/brainstorming/scripts/frame-template.html

@@ -0,0 +1,214 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Superpowers Brainstorming</title>
+  <style>
+    /*
+     * BRAINSTORM COMPANION FRAME TEMPLATE
+     *
+     * This template provides a consistent frame with:
+     * - OS-aware light/dark theming
+     * - Fixed header and selection indicator bar
+     * - Scrollable main content area
+     * - CSS helpers for common UI patterns
+     *
+     * Content is injected via placeholder comment in #claude-content.
+     */
+
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    html, body { height: 100%; overflow: hidden; }
+
+    /* ===== THEME VARIABLES ===== */
+    :root {
+      --bg-primary: #f5f5f7;
+      --bg-secondary: #ffffff;
+      --bg-tertiary: #e5e5e7;
+      --border: #d1d1d6;
+      --text-primary: #1d1d1f;
+      --text-secondary: #86868b;
+      --text-tertiary: #aeaeb2;
+      --accent: #0071e3;
+      --accent-hover: #0077ed;
+      --success: #34c759;
+      --warning: #ff9f0a;
+      --error: #ff3b30;
+      --selected-bg: #e8f4fd;
+      --selected-border: #0071e3;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --bg-primary: #1d1d1f;
+        --bg-secondary: #2d2d2f;
+        --bg-tertiary: #3d3d3f;
+        --border: #424245;
+        --text-primary: #f5f5f7;
+        --text-secondary: #86868b;
+        --text-tertiary: #636366;
+        --accent: #0a84ff;
+        --accent-hover: #409cff;
+        --selected-bg: rgba(10, 132, 255, 0.15);
+        --selected-border: #0a84ff;
+      }
+    }
+
+    body {
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+      background: var(--bg-primary);
+      color: var(--text-primary);
+      display: flex;
+      flex-direction: column;
+      line-height: 1.5;
+    }
+
+    /* ===== FRAME STRUCTURE ===== */
+    .header {
+      background: var(--bg-secondary);
+      padding: 0.5rem 1.5rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid var(--border);
+      flex-shrink: 0;
+    }
+    .header h1 { font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); }
+    .header .status { font-size: 0.7rem; color: var(--success); display: flex; align-items: center; gap: 0.4rem; }
+    .header .status::before { content: ''; width: 6px; height: 6px; background: var(--success); border-radius: 50%; }
+
+    .main { flex: 1; overflow-y: auto; }
+    #claude-content { padding: 2rem; min-height: 100%; }
+
+    .indicator-bar {
+      background: var(--bg-secondary);
+      border-top: 1px solid var(--border);
+      padding: 0.5rem 1.5rem;
+      flex-shrink: 0;
+      text-align: center;
+    }
+    .indicator-bar span {
+      font-size: 0.75rem;
+      color: var(--text-secondary);
+    }
+    .indicator-bar .selected-text {
+      color: var(--accent);
+      font-weight: 500;
+    }
+
+    /* ===== TYPOGRAPHY ===== */
+    h2 { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem; }
+    h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.25rem; }
+    .subtitle { color: var(--text-secondary); margin-bottom: 1.5rem; }
+    .section { margin-bottom: 2rem; }
+    .label { font-size: 0.7rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
+
+    /* ===== OPTIONS (for A/B/C choices) ===== */
+    .options { display: flex; flex-direction: column; gap: 0.75rem; }
+    .option {
+      background: var(--bg-secondary);
+      border: 2px solid var(--border);
+      border-radius: 12px;
+      padding: 1rem 1.25rem;
+      cursor: pointer;
+      transition: all 0.15s ease;
+      display: flex;
+      align-items: flex-start;
+      gap: 1rem;
+    }
+    .option:hover { border-color: var(--accent); }
+    .option.selected { background: var(--selected-bg); border-color: var(--selected-border); }
+    .option .letter {
+      background: var(--bg-tertiary);
+      color: var(--text-secondary);
+      width: 1.75rem; height: 1.75rem;
+      border-radius: 6px;
+      display: flex; align-items: center; justify-content: center;
+      font-weight: 600; font-size: 0.85rem; flex-shrink: 0;
+    }
+    .option.selected .letter { background: var(--accent); color: white; }
+    .option .content { flex: 1; }
+    .option .content h3 { font-size: 0.95rem; margin-bottom: 0.15rem; }
+    .option .content p { color: var(--text-secondary); font-size: 0.85rem; margin: 0; }
+
+    /* ===== CARDS (for showing designs/mockups) ===== */
+    .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
+    .card {
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      overflow: hidden;
+      cursor: pointer;
+      transition: all 0.15s ease;
+    }
+    .card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
+    .card.selected { border-color: var(--selected-border); border-width: 2px; }
+    .card-image { background: var(--bg-tertiary); aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; }
+    .card-body { padding: 1rem; }
+    .card-body h3 { margin-bottom: 0.25rem; }
+    .card-body p { color: var(--text-secondary); font-size: 0.85rem; }
+
+    /* ===== MOCKUP CONTAINER ===== */
+    .mockup {
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: 12px;
+      overflow: hidden;
+      margin-bottom: 1.5rem;
+    }
+    .mockup-header {
+      background: var(--bg-tertiary);
+      padding: 0.5rem 1rem;
+      font-size: 0.75rem;
+      color: var(--text-secondary);
+      border-bottom: 1px solid var(--border);
+    }
+    .mockup-body { padding: 1.5rem; }
+
+    /* ===== SPLIT VIEW (side-by-side comparison) ===== */
+    .split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
+    @media (max-width: 700px) { .split { grid-template-columns: 1fr; } }
+
+    /* ===== PROS/CONS ===== */
+    .pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; }
+    .pros, .cons { background: var(--bg-secondary); border-radius: 8px; padding: 1rem; }
+    .pros h4 { color: var(--success); font-size: 0.85rem; margin-bottom: 0.5rem; }
+    .cons h4 { color: var(--error); font-size: 0.85rem; margin-bottom: 0.5rem; }
+    .pros ul, .cons ul { margin-left: 1.25rem; font-size: 0.85rem; color: var(--text-secondary); }
+    .pros li, .cons li { margin-bottom: 0.25rem; }
+
+    /* ===== PLACEHOLDER (for mockup areas) ===== */
+    .placeholder {
+      background: var(--bg-tertiary);
+      border: 2px dashed var(--border);
+      border-radius: 8px;
+      padding: 2rem;
+      text-align: center;
+      color: var(--text-tertiary);
+    }
+
+    /* ===== INLINE MOCKUP ELEMENTS ===== */
+    .mock-nav { background: var(--accent); color: white; padding: 0.75rem 1rem; display: flex; gap: 1.5rem; font-size: 0.9rem; }
+    .mock-sidebar { background: var(--bg-tertiary); padding: 1rem; min-width: 180px; }
+    .mock-content { padding: 1.5rem; flex: 1; }
+    .mock-button { background: var(--accent); color: white; border: none; padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.85rem; }
+    .mock-input { background: var(--bg-primary); border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem; width: 100%; }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <h1><a href="https://github.com/obra/superpowers" style="color: inherit; text-decoration: none;">Superpowers Brainstorming</a></h1>
+    <div class="status">Connected</div>
+  </div>
+
+  <div class="main">
+    <div id="claude-content">
+      <!-- CONTENT -->
+    </div>
+  </div>
+
+  <div class="indicator-bar">
+    <span id="indicator-text">Click an option above, then return to the terminal</span>
+  </div>
+
+</body>
+</html>