superpowers-mcp 4.3.0 → 4.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +93 -26
- package/README.zh-TW.md +142 -0
- package/package.json +2 -2
- package/skills/brainstorming/scripts/frame-template.html +214 -0
- package/skills/brainstorming/scripts/helper.js +98 -0
- package/skills/brainstorming/scripts/server.cjs +354 -0
- package/skills/brainstorming/scripts/start-server.sh +148 -0
- package/skills/brainstorming/scripts/stop-server.sh +56 -0
- package/skills/brainstorming/spec-document-reviewer-prompt.md +49 -0
- package/skills/brainstorming/visual-companion.md +287 -0
package/README.md
CHANGED
|
@@ -1,22 +1,11 @@
|
|
|
1
1
|
# Superpowers MCP Toolpack Usage Guide
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
---
|
|
3
|
+
[English](README.md) | [繁體中文](README.zh-TW.md)
|
|
6
4
|
|
|
7
|
-
|
|
5
|
+
[](https://github.com/Poseidoncode/superpowers-mcp)
|
|
6
|
+
[](LICENSE)
|
|
8
7
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
```text
|
|
12
|
-
superpowers-mcp/
|
|
13
|
-
├── package.json ← NPM package manifest defining the built-in MCP Server registration and commands
|
|
14
|
-
├── src/
|
|
15
|
-
│ └── server.ts ← MCP stdio server implementation (contains 14 skills)
|
|
16
|
-
├── skills/ ← Offline packaged skills library (copied from the main project)
|
|
17
|
-
└── out/
|
|
18
|
-
└── server.js (325 KB) ← Compiled MCP Server
|
|
19
|
-
```
|
|
8
|
+
This document summarizes the information and usage instructions for packaging the original Superpowers skills library into an independent MCP Toolpack.
|
|
20
9
|
|
|
21
10
|
---
|
|
22
11
|
|
|
@@ -38,35 +27,113 @@ Once installed or configured, your AI Agent (such as Copilot or Antigravity Casc
|
|
|
38
27
|
|
|
39
28
|
---
|
|
40
29
|
|
|
41
|
-
## 🛠️
|
|
30
|
+
## 🛠️ MCP Configuration
|
|
31
|
+
|
|
32
|
+
Add the following settings to your IDE (e.g., Cursor, Antigravity, or VSCode MCP settings).
|
|
33
|
+
|
|
34
|
+
### Method : NPX / BUNX (Recommended)
|
|
42
35
|
|
|
43
|
-
|
|
36
|
+
This is the easiest way as it handles path resolution automatically.
|
|
44
37
|
|
|
38
|
+
#### Using Bun (Faster)
|
|
45
39
|
```json
|
|
46
40
|
{
|
|
47
41
|
"superpowers": {
|
|
48
|
-
"command": "
|
|
49
|
-
"args": ["
|
|
50
|
-
"env": {
|
|
51
|
-
"SKILLS_PATH": "/path/to/superpowers-mcp/skills"
|
|
52
|
-
}
|
|
42
|
+
"command": "bunx",
|
|
43
|
+
"args": ["-y", "superpowers-mcp"]
|
|
53
44
|
}
|
|
54
45
|
}
|
|
55
46
|
```
|
|
56
47
|
|
|
57
|
-
|
|
48
|
+
#### Using Node/NPM
|
|
49
|
+
```json
|
|
50
|
+
{
|
|
51
|
+
"superpowers": {
|
|
52
|
+
"command": "npx",
|
|
53
|
+
"args": ["-y", "superpowers-mcp"]
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
---
|
|
59
|
+
|
|
60
|
+
## 💡 Common Skills & Scenarios
|
|
61
|
+
|
|
62
|
+
| Skill Name | Community Recommended Scenario | Core Value |
|
|
63
|
+
| :--- | :--- | :--- |
|
|
64
|
+
| `brainstorming` | Before starting a new feature, exploring requirements and design. | Prevents the AI from jumping straight into writing code. |
|
|
65
|
+
| `writing-plans` | Before multi-file refactoring or complex migrations. | Establishes a clear execution blueprint. |
|
|
66
|
+
| `systematic-debugging` | When encountering any errors or abnormal behavior. | Enforces "root cause analysis" instead of guessing. |
|
|
67
|
+
| `test-driven-development` | When implementing logically challenging features. | Ensures code is accompanied by tests, achieving Red-Green-Refactor. |
|
|
68
|
+
| `verification-before-completion` | Before claiming "it's fixed" or "it's done". | Evidence-based completion confirmation. |
|
|
69
|
+
|
|
70
|
+
---
|
|
71
|
+
|
|
72
|
+
## 🔄 Recommended Prompt Sequences
|
|
73
|
+
|
|
74
|
+
### 1. New Feature Development Sequence
|
|
75
|
+
1. `[superpowers:brainstorm : Confirm requirements and architecture]`
|
|
76
|
+
2. `[superpowers:writing-plans : Create an execution plan with specific steps]`
|
|
77
|
+
3. `[superpowers:test-driven-development : Implement the feature with tests]`
|
|
78
|
+
4. `[superpowers:verification-before-completion : Run test suites to ensure everything works]`
|
|
79
|
+
|
|
80
|
+
### 2. Emergency Hotfix Sequence
|
|
81
|
+
1. `[superpowers:systematic-debugging : Locate the root cause of the current issue]`
|
|
82
|
+
2. `[superpowers:test-driven-development : Write a failing test for the bug and fix it]`
|
|
83
|
+
3. `[superpowers:verification-before-completion : Validate the applied hotfix]`
|
|
58
84
|
|
|
59
85
|
---
|
|
60
86
|
|
|
61
87
|
## 📋 Supported Skills Overview (14 Total)
|
|
62
88
|
|
|
89
|
+
To help you choose the right skill, we've categorized them into 6 logical phases of software development:
|
|
90
|
+
|
|
91
|
+
### 🚀 1. Planning & Design
|
|
63
92
|
- `brainstorming`: Software design and requirements analysis process
|
|
93
|
+
- **NEW**: Visual Companion for browser-based mockups and design reviews
|
|
94
|
+
- `writing-plans`: Creating detailed implementation plans
|
|
95
|
+
|
|
96
|
+
### 💻 2. Implementation & Debugging
|
|
97
|
+
- `executing-plans`: Executing created implementation plans
|
|
64
98
|
- `test-driven-development`: TDD (Test-Driven Development) workflow
|
|
65
99
|
- `systematic-debugging`: Systematic debugging and root cause analysis
|
|
66
|
-
|
|
67
|
-
|
|
100
|
+
|
|
101
|
+
### 🛡️ 3. Quality & Review
|
|
102
|
+
- `verification-before-completion`: Evidence-based verification before completion
|
|
68
103
|
- `requesting-code-review`: Initiating pre-checks for code reviews
|
|
69
|
-
-
|
|
104
|
+
- `receiving-code-review`: Receiving and addressing code review feedback
|
|
105
|
+
- `finishing-a-development-branch`: Finalizing and integrating feature branches
|
|
106
|
+
|
|
107
|
+
### 🌿 4. Version Control
|
|
108
|
+
- `using-git-worktrees`: Managing multiple branches using Git Worktrees
|
|
109
|
+
|
|
110
|
+
### 🤖 5. Advanced Agent Controls
|
|
111
|
+
|
|
112
|
+
These skills are designed for orchestrating complex meta-execution patterns within supported IDEs (like Antigravity or Cursor).
|
|
113
|
+
|
|
114
|
+
- **`subagent-driven-development`**: Driving sub-agents to execute tasks
|
|
115
|
+
- **Usage**: Used to execute a predefined plan task-by-task. The system will spawn a fresh "implementer" sub-agent for a single task, followed by "spec reviewer" and "code quality reviewer" sub-agents to ensure high-quality output before moving to the next task.
|
|
116
|
+
- **Example**: `[superpowers:subagent-driven-development : Execute the tasks listed in docs/plans/feature-plan.md one by one]`
|
|
117
|
+
- **`dispatching-parallel-agents`**: Dispatching tasks to parallel agents
|
|
118
|
+
- **Usage**: Used for tackling multiple *independent* issues (e.g., 3 unrelated failing tests or 3 separate web research topics). The AI will adopt a parallel-execution mindset, addressing each task independently without crossing state or experiencing context pollution, significantly speeding up output generation.
|
|
119
|
+
- **Debugging Example**: `[superpowers:dispatching-parallel-agents : Tests A, B, and C are failing independently. Dispatch 3 parallel agents to investigate and fix them]`
|
|
120
|
+
- **Research Example**: `[superpowers:dispatching-parallel-agents : Dispatch 3 parallel agents to search the web for: 1. React 19 features, 2. Vue 3.5 updates, 3. Svelte 5 Runes. Summarize each independently]`
|
|
121
|
+
|
|
122
|
+
### ⚙️ 6. Customization & Meta
|
|
123
|
+
- `using-superpowers`: Guidelines and self-checks for using Superpowers
|
|
124
|
+
- `writing-skills`: Writing and expanding new custom skills
|
|
125
|
+
|
|
126
|
+
---
|
|
127
|
+
|
|
128
|
+
## 🆕 Recent Updates
|
|
129
|
+
|
|
130
|
+
### v4.3.2 (Latest)
|
|
131
|
+
- **Security**: Fixed XSS vulnerability in brainstorming Visual Companion
|
|
132
|
+
- **Docs**: Updated README and SECURITY with accurate version info
|
|
133
|
+
|
|
134
|
+
### v4.3.0
|
|
135
|
+
- Initial MCP server implementation
|
|
136
|
+
- 14 core skills migrated from original Superpowers
|
|
70
137
|
|
|
71
138
|
---
|
|
72
139
|
|
package/README.zh-TW.md
ADDED
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
# Superpowers MCP Toolpack 使用指南
|
|
2
|
+
|
|
3
|
+
[English](README.md) | [繁體中文](README.zh-TW.md)
|
|
4
|
+
|
|
5
|
+
[](https://github.com/Poseidoncode/superpowers-mcp)
|
|
6
|
+
[](LICENSE)
|
|
7
|
+
|
|
8
|
+
本文檔總結了將原始 Superpowers 技能庫打包成獨立 MCP Toolpack 的相關資訊與使用說明。
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
## 🚀 安裝與使用方式
|
|
13
|
+
|
|
14
|
+
### 支援的環境
|
|
15
|
+
|
|
16
|
+
**Antigravity**、**Cursor**、**VSCode**，以及其他支援 MCP 工具鏈的 AI 編輯器。
|
|
17
|
+
|
|
18
|
+
### 與 AI Agent 對話
|
|
19
|
+
|
|
20
|
+
安裝或配置完成後，您的 AI Agent（例如 Copilot 或 Antigravity Cascade）將能夠識別並使用 `Superpowers Skills`。
|
|
21
|
+
|
|
22
|
+
**您可以這樣提問：**
|
|
23
|
+
|
|
24
|
+
- "列出所有 superpowers 技能"
|
|
25
|
+
- "使用 read_skill 讀取 brainstorming 技能，然後幫我分析這個功能的實作"
|
|
26
|
+
- "套用 session-start prompt"（模擬原始的啟動注入機制）
|
|
27
|
+
|
|
28
|
+
---
|
|
29
|
+
|
|
30
|
+
## 🛠️ MCP 配置
|
|
31
|
+
|
|
32
|
+
將以下設定加入您的 IDE（例如 Cursor, Antigravity, 或 VSCode 的 MCP 設定）。
|
|
33
|
+
|
|
34
|
+
### 方法：NPX / BUNX（推薦）
|
|
35
|
+
|
|
36
|
+
這是最簡單的方式，因為它會自動處理路徑解析。
|
|
37
|
+
|
|
38
|
+
#### 使用 Bun（較快）
|
|
39
|
+
```json
|
|
40
|
+
{
|
|
41
|
+
"superpowers": {
|
|
42
|
+
"command": "bunx",
|
|
43
|
+
"args": ["-y", "superpowers-mcp"]
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
#### 使用 Node/NPM
|
|
49
|
+
```json
|
|
50
|
+
{
|
|
51
|
+
"superpowers": {
|
|
52
|
+
"command": "npx",
|
|
53
|
+
"args": ["-y", "superpowers-mcp"]
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
---
|
|
59
|
+
|
|
60
|
+
## 💡 常用技能與情境
|
|
61
|
+
|
|
62
|
+
| 技能名稱 | 社群推薦使用情境 | 核心價值 |
|
|
63
|
+
| :--- | :--- | :--- |
|
|
64
|
+
| `brainstorming` | 啟動新功能前，探索需求與設計。 | 防止 AI 直接衝進去寫 code。 |
|
|
65
|
+
| `writing-plans` | 進行多檔案重構或複雜迁移前。 | 建立明確的執行藍圖。 |
|
|
66
|
+
| `systematic-debugging` | 遇到任何報錯或行為異常時。 | 強制執行「根因分析」而非亂猜。 |
|
|
67
|
+
| `test-driven-development` | 實作具邏輯挑戰的功能時。 | 確保代碼隨附測試，實現 Red-Green-Refactor。 |
|
|
68
|
+
| `verification-before-completion` | 聲稱「修好了」或「做完了」之前。 | 證據導向的完工確認。 |
|
|
69
|
+
|
|
70
|
+
---
|
|
71
|
+
|
|
72
|
+
## 🔄 推薦的指令 (Command Sequences)
|
|
73
|
+
|
|
74
|
+
### 1. 新功能開發
|
|
75
|
+
1. `[superpowers:brainstorm : 確認需求與架構]`
|
|
76
|
+
2. `[superpowers:writing-plans : 寫下具體步驟]`
|
|
77
|
+
3. `[superpowers:test-driven-development : 撰寫測試與實作]`
|
|
78
|
+
4. `[superpowers:verification-before-completion : 跑測試確認無誤]`
|
|
79
|
+
|
|
80
|
+
### 2. 緊急修復 (Hotfix)
|
|
81
|
+
1. `[superpowers:systematic-debugging : 定位問題根源]`
|
|
82
|
+
2. `[superpowers:test-driven-development : 寫一個失敗測試重現問題，再修復]`
|
|
83
|
+
3. `[superpowers:verification-before-completion : 驗證修復結果]`
|
|
84
|
+
|
|
85
|
+
---
|
|
86
|
+
|
|
87
|
+
## 📋 支援技能總覽 (共 14 個)
|
|
88
|
+
|
|
89
|
+
為了解決技能太多難以選擇的問題，我們將這 14 個技能依照軟體開發的 6 個階段進行了分類：
|
|
90
|
+
|
|
91
|
+
### 🚀 1. 規劃與設計 (Planning & Design)
|
|
92
|
+
- `brainstorming`: 軟體設計與需求分析流程
|
|
93
|
+
- **新增**: Visual Companion 瀏覽器視覺化設計審查工具
|
|
94
|
+
- `writing-plans`: 建立詳細的實作計畫
|
|
95
|
+
|
|
96
|
+
### 💻 2. 開發與除錯 (Implementation & Debugging)
|
|
97
|
+
- `executing-plans`: 執行已建立的實作計畫
|
|
98
|
+
- `test-driven-development`: TDD（測試驅動開發）工作流
|
|
99
|
+
- `systematic-debugging`: 系統性除錯與根因分析
|
|
100
|
+
|
|
101
|
+
### 🛡️ 3. 品質驗證與審查 (Quality & Review)
|
|
102
|
+
- `verification-before-completion`: 完工前的證據導向驗證
|
|
103
|
+
- `requesting-code-review`: 發起程式碼審查的預先檢查
|
|
104
|
+
- `receiving-code-review`: 接收與處理程式碼審查回饋
|
|
105
|
+
- `finishing-a-development-branch`: 收尾開發分支與整合
|
|
106
|
+
|
|
107
|
+
### 🌿 4. 版本控制 (Version Control)
|
|
108
|
+
- `using-git-worktrees`: 使用 Git Worktrees 管理多重分支
|
|
109
|
+
|
|
110
|
+
### 🤖 5. 代理進階控制 (Advanced Agent Controls)
|
|
111
|
+
|
|
112
|
+
這是特別針對在支援多重代理 (Multi-Agent) 協作或具備強大推論能力的 IDE（如 Antigravity 或 Cursor）中所設計的高階操作技巧。
|
|
113
|
+
|
|
114
|
+
- **`subagent-driven-development`**: 驅動子代理執行複雜任務
|
|
115
|
+
- **具體用法**：適用於「執行已規劃好的詳細計畫」。針對每一個小任務，AI 會派發全新的「實作代理」去寫 Code，完成後立刻啟動「規格審查」與「品質審查」的雙重把關，審查通過才進入下一關。
|
|
116
|
+
- **指令範例**：`[superpowers:subagent-driven-development : 請依照 docs/plans/feature-plan.md 的內容，幫我逐一派發子代理實作]`
|
|
117
|
+
- **`dispatching-parallel-agents`**: 派發平行代理同步執行任務
|
|
118
|
+
- **具體用法**：適用於「同時處理多個互不干擾的獨立問題」（例如 3 個無關聯的 Bug，或 3 個獨立的網路查詢需求）。AI 會切換為平行處理的思維模型，將各個問題視為獨立專案同時處理，避免記憶混亂（Context 污染）並加速多任務產出。
|
|
119
|
+
- **偵錯範例**：`[superpowers:dispatching-parallel-agents : 現在有 A, B, C 三個獨立的測試報錯，請派發 3 個代理同時去排查並修復]`
|
|
120
|
+
- **查詢範例**：`[superpowers:dispatching-parallel-agents : 幫我派發 3 個代理去網路上分別查詢：1. React 19 新特性, 2. Vue 3.5 更新重點, 3. Svelte 5 的 Runes 系統，並各自整理成摘要]`
|
|
121
|
+
|
|
122
|
+
### ⚙️ 6. 系統與自定義 (Meta & Customization)
|
|
123
|
+
- `using-superpowers`: Superpowers 核心操作指南與自我檢查
|
|
124
|
+
- `writing-skills`: 撰寫與擴充新的自訂技能
|
|
125
|
+
|
|
126
|
+
---
|
|
127
|
+
|
|
128
|
+
## 🆕 最近更新
|
|
129
|
+
|
|
130
|
+
### v4.3.2 (最新版)
|
|
131
|
+
- **安全性**: 修復 brainstorming Visual Companion 中的 XSS 漏洞
|
|
132
|
+
- **文件**: 更新 README 和 SECURITY，修正版本資訊
|
|
133
|
+
|
|
134
|
+
### v4.3.0
|
|
135
|
+
- 初始 MCP 伺服器實作
|
|
136
|
+
- 從原始 Superpowers 遷移 14 個核心技能
|
|
137
|
+
|
|
138
|
+
---
|
|
139
|
+
|
|
140
|
+
## 🙏 致謝
|
|
141
|
+
|
|
142
|
+
本專案是透過 fork 與改編自 [obra](https://github.com/obra) 的原始 [Superpowers](https://github.com/obra/superpowers) 專案。我們非常感謝他們在定義 Agentic 技能框架與軟體開發方法論上的貢獻，這些成為了這個 MCP Server 的基石。
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "superpowers-mcp",
|
|
3
3
|
"displayName": "Superpowers MCP",
|
|
4
4
|
"description": "Superpowers skills library (TDD, debugging, collaboration workflows) as an MCP server for VSCode and Antigravity",
|
|
5
|
-
"version": "4.3.
|
|
5
|
+
"version": "4.3.2",
|
|
6
6
|
"publisher": "superpowers",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"repository": {
|
|
@@ -40,4 +40,4 @@
|
|
|
40
40
|
"esbuild": "^0.25.0",
|
|
41
41
|
"typescript": "^5.6.0"
|
|
42
42
|
}
|
|
43
|
-
}
|
|
43
|
+
}
|
|
@@ -0,0 +1,214 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>Superpowers Brainstorming</title>
|
|
6
|
+
<style>
|
|
7
|
+
/*
|
|
8
|
+
* BRAINSTORM COMPANION FRAME TEMPLATE
|
|
9
|
+
*
|
|
10
|
+
* This template provides a consistent frame with:
|
|
11
|
+
* - OS-aware light/dark theming
|
|
12
|
+
* - Fixed header and selection indicator bar
|
|
13
|
+
* - Scrollable main content area
|
|
14
|
+
* - CSS helpers for common UI patterns
|
|
15
|
+
*
|
|
16
|
+
* Content is injected via placeholder comment in #claude-content.
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
20
|
+
html, body { height: 100%; overflow: hidden; }
|
|
21
|
+
|
|
22
|
+
/* ===== THEME VARIABLES ===== */
|
|
23
|
+
:root {
|
|
24
|
+
--bg-primary: #f5f5f7;
|
|
25
|
+
--bg-secondary: #ffffff;
|
|
26
|
+
--bg-tertiary: #e5e5e7;
|
|
27
|
+
--border: #d1d1d6;
|
|
28
|
+
--text-primary: #1d1d1f;
|
|
29
|
+
--text-secondary: #86868b;
|
|
30
|
+
--text-tertiary: #aeaeb2;
|
|
31
|
+
--accent: #0071e3;
|
|
32
|
+
--accent-hover: #0077ed;
|
|
33
|
+
--success: #34c759;
|
|
34
|
+
--warning: #ff9f0a;
|
|
35
|
+
--error: #ff3b30;
|
|
36
|
+
--selected-bg: #e8f4fd;
|
|
37
|
+
--selected-border: #0071e3;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@media (prefers-color-scheme: dark) {
|
|
41
|
+
:root {
|
|
42
|
+
--bg-primary: #1d1d1f;
|
|
43
|
+
--bg-secondary: #2d2d2f;
|
|
44
|
+
--bg-tertiary: #3d3d3f;
|
|
45
|
+
--border: #424245;
|
|
46
|
+
--text-primary: #f5f5f7;
|
|
47
|
+
--text-secondary: #86868b;
|
|
48
|
+
--text-tertiary: #636366;
|
|
49
|
+
--accent: #0a84ff;
|
|
50
|
+
--accent-hover: #409cff;
|
|
51
|
+
--selected-bg: rgba(10, 132, 255, 0.15);
|
|
52
|
+
--selected-border: #0a84ff;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
body {
|
|
57
|
+
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
|
58
|
+
background: var(--bg-primary);
|
|
59
|
+
color: var(--text-primary);
|
|
60
|
+
display: flex;
|
|
61
|
+
flex-direction: column;
|
|
62
|
+
line-height: 1.5;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
/* ===== FRAME STRUCTURE ===== */
|
|
66
|
+
.header {
|
|
67
|
+
background: var(--bg-secondary);
|
|
68
|
+
padding: 0.5rem 1.5rem;
|
|
69
|
+
display: flex;
|
|
70
|
+
justify-content: space-between;
|
|
71
|
+
align-items: center;
|
|
72
|
+
border-bottom: 1px solid var(--border);
|
|
73
|
+
flex-shrink: 0;
|
|
74
|
+
}
|
|
75
|
+
.header h1 { font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); }
|
|
76
|
+
.header .status { font-size: 0.7rem; color: var(--success); display: flex; align-items: center; gap: 0.4rem; }
|
|
77
|
+
.header .status::before { content: ''; width: 6px; height: 6px; background: var(--success); border-radius: 50%; }
|
|
78
|
+
|
|
79
|
+
.main { flex: 1; overflow-y: auto; }
|
|
80
|
+
#claude-content { padding: 2rem; min-height: 100%; }
|
|
81
|
+
|
|
82
|
+
.indicator-bar {
|
|
83
|
+
background: var(--bg-secondary);
|
|
84
|
+
border-top: 1px solid var(--border);
|
|
85
|
+
padding: 0.5rem 1.5rem;
|
|
86
|
+
flex-shrink: 0;
|
|
87
|
+
text-align: center;
|
|
88
|
+
}
|
|
89
|
+
.indicator-bar span {
|
|
90
|
+
font-size: 0.75rem;
|
|
91
|
+
color: var(--text-secondary);
|
|
92
|
+
}
|
|
93
|
+
.indicator-bar .selected-text {
|
|
94
|
+
color: var(--accent);
|
|
95
|
+
font-weight: 500;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/* ===== TYPOGRAPHY ===== */
|
|
99
|
+
h2 { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem; }
|
|
100
|
+
h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.25rem; }
|
|
101
|
+
.subtitle { color: var(--text-secondary); margin-bottom: 1.5rem; }
|
|
102
|
+
.section { margin-bottom: 2rem; }
|
|
103
|
+
.label { font-size: 0.7rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
|
|
104
|
+
|
|
105
|
+
/* ===== OPTIONS (for A/B/C choices) ===== */
|
|
106
|
+
.options { display: flex; flex-direction: column; gap: 0.75rem; }
|
|
107
|
+
.option {
|
|
108
|
+
background: var(--bg-secondary);
|
|
109
|
+
border: 2px solid var(--border);
|
|
110
|
+
border-radius: 12px;
|
|
111
|
+
padding: 1rem 1.25rem;
|
|
112
|
+
cursor: pointer;
|
|
113
|
+
transition: all 0.15s ease;
|
|
114
|
+
display: flex;
|
|
115
|
+
align-items: flex-start;
|
|
116
|
+
gap: 1rem;
|
|
117
|
+
}
|
|
118
|
+
.option:hover { border-color: var(--accent); }
|
|
119
|
+
.option.selected { background: var(--selected-bg); border-color: var(--selected-border); }
|
|
120
|
+
.option .letter {
|
|
121
|
+
background: var(--bg-tertiary);
|
|
122
|
+
color: var(--text-secondary);
|
|
123
|
+
width: 1.75rem; height: 1.75rem;
|
|
124
|
+
border-radius: 6px;
|
|
125
|
+
display: flex; align-items: center; justify-content: center;
|
|
126
|
+
font-weight: 600; font-size: 0.85rem; flex-shrink: 0;
|
|
127
|
+
}
|
|
128
|
+
.option.selected .letter { background: var(--accent); color: white; }
|
|
129
|
+
.option .content { flex: 1; }
|
|
130
|
+
.option .content h3 { font-size: 0.95rem; margin-bottom: 0.15rem; }
|
|
131
|
+
.option .content p { color: var(--text-secondary); font-size: 0.85rem; margin: 0; }
|
|
132
|
+
|
|
133
|
+
/* ===== CARDS (for showing designs/mockups) ===== */
|
|
134
|
+
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
|
|
135
|
+
.card {
|
|
136
|
+
background: var(--bg-secondary);
|
|
137
|
+
border: 1px solid var(--border);
|
|
138
|
+
border-radius: 12px;
|
|
139
|
+
overflow: hidden;
|
|
140
|
+
cursor: pointer;
|
|
141
|
+
transition: all 0.15s ease;
|
|
142
|
+
}
|
|
143
|
+
.card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
|
|
144
|
+
.card.selected { border-color: var(--selected-border); border-width: 2px; }
|
|
145
|
+
.card-image { background: var(--bg-tertiary); aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; }
|
|
146
|
+
.card-body { padding: 1rem; }
|
|
147
|
+
.card-body h3 { margin-bottom: 0.25rem; }
|
|
148
|
+
.card-body p { color: var(--text-secondary); font-size: 0.85rem; }
|
|
149
|
+
|
|
150
|
+
/* ===== MOCKUP CONTAINER ===== */
|
|
151
|
+
.mockup {
|
|
152
|
+
background: var(--bg-secondary);
|
|
153
|
+
border: 1px solid var(--border);
|
|
154
|
+
border-radius: 12px;
|
|
155
|
+
overflow: hidden;
|
|
156
|
+
margin-bottom: 1.5rem;
|
|
157
|
+
}
|
|
158
|
+
.mockup-header {
|
|
159
|
+
background: var(--bg-tertiary);
|
|
160
|
+
padding: 0.5rem 1rem;
|
|
161
|
+
font-size: 0.75rem;
|
|
162
|
+
color: var(--text-secondary);
|
|
163
|
+
border-bottom: 1px solid var(--border);
|
|
164
|
+
}
|
|
165
|
+
.mockup-body { padding: 1.5rem; }
|
|
166
|
+
|
|
167
|
+
/* ===== SPLIT VIEW (side-by-side comparison) ===== */
|
|
168
|
+
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
|
|
169
|
+
@media (max-width: 700px) { .split { grid-template-columns: 1fr; } }
|
|
170
|
+
|
|
171
|
+
/* ===== PROS/CONS ===== */
|
|
172
|
+
.pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; }
|
|
173
|
+
.pros, .cons { background: var(--bg-secondary); border-radius: 8px; padding: 1rem; }
|
|
174
|
+
.pros h4 { color: var(--success); font-size: 0.85rem; margin-bottom: 0.5rem; }
|
|
175
|
+
.cons h4 { color: var(--error); font-size: 0.85rem; margin-bottom: 0.5rem; }
|
|
176
|
+
.pros ul, .cons ul { margin-left: 1.25rem; font-size: 0.85rem; color: var(--text-secondary); }
|
|
177
|
+
.pros li, .cons li { margin-bottom: 0.25rem; }
|
|
178
|
+
|
|
179
|
+
/* ===== PLACEHOLDER (for mockup areas) ===== */
|
|
180
|
+
.placeholder {
|
|
181
|
+
background: var(--bg-tertiary);
|
|
182
|
+
border: 2px dashed var(--border);
|
|
183
|
+
border-radius: 8px;
|
|
184
|
+
padding: 2rem;
|
|
185
|
+
text-align: center;
|
|
186
|
+
color: var(--text-tertiary);
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
/* ===== INLINE MOCKUP ELEMENTS ===== */
|
|
190
|
+
.mock-nav { background: var(--accent); color: white; padding: 0.75rem 1rem; display: flex; gap: 1.5rem; font-size: 0.9rem; }
|
|
191
|
+
.mock-sidebar { background: var(--bg-tertiary); padding: 1rem; min-width: 180px; }
|
|
192
|
+
.mock-content { padding: 1.5rem; flex: 1; }
|
|
193
|
+
.mock-button { background: var(--accent); color: white; border: none; padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.85rem; }
|
|
194
|
+
.mock-input { background: var(--bg-primary); border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem; width: 100%; }
|
|
195
|
+
</style>
|
|
196
|
+
</head>
|
|
197
|
+
<body>
|
|
198
|
+
<div class="header">
|
|
199
|
+
<h1><a href="https://github.com/obra/superpowers" style="color: inherit; text-decoration: none;">Superpowers Brainstorming</a></h1>
|
|
200
|
+
<div class="status">Connected</div>
|
|
201
|
+
</div>
|
|
202
|
+
|
|
203
|
+
<div class="main">
|
|
204
|
+
<div id="claude-content">
|
|
205
|
+
<!-- CONTENT -->
|
|
206
|
+
</div>
|
|
207
|
+
</div>
|
|
208
|
+
|
|
209
|
+
<div class="indicator-bar">
|
|
210
|
+
<span id="indicator-text">Click an option above, then return to the terminal</span>
|
|
211
|
+
</div>
|
|
212
|
+
|
|
213
|
+
</body>
|
|
214
|
+
</html>
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
(function() {
|
|
2
|
+
const WS_URL = 'ws://' + window.location.host;
|
|
3
|
+
let ws = null;
|
|
4
|
+
let eventQueue = [];
|
|
5
|
+
|
|
6
|
+
function connect() {
|
|
7
|
+
ws = new WebSocket(WS_URL);
|
|
8
|
+
|
|
9
|
+
ws.onopen = () => {
|
|
10
|
+
eventQueue.forEach(e => ws.send(JSON.stringify(e)));
|
|
11
|
+
eventQueue = [];
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
ws.onmessage = (msg) => {
|
|
15
|
+
const data = JSON.parse(msg.data);
|
|
16
|
+
if (data.type === 'reload') {
|
|
17
|
+
window.location.reload();
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
ws.onclose = () => {
|
|
22
|
+
setTimeout(connect, 1000);
|
|
23
|
+
};
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
function sendEvent(event) {
|
|
27
|
+
event.timestamp = Date.now();
|
|
28
|
+
if (ws && ws.readyState === WebSocket.OPEN) {
|
|
29
|
+
ws.send(JSON.stringify(event));
|
|
30
|
+
} else {
|
|
31
|
+
eventQueue.push(event);
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
// Capture clicks on choice elements
|
|
36
|
+
document.addEventListener('click', (e) => {
|
|
37
|
+
const target = e.target.closest('[data-choice]');
|
|
38
|
+
if (!target) return;
|
|
39
|
+
|
|
40
|
+
sendEvent({
|
|
41
|
+
type: 'click',
|
|
42
|
+
text: target.textContent.trim(),
|
|
43
|
+
choice: target.dataset.choice,
|
|
44
|
+
id: target.id || null
|
|
45
|
+
});
|
|
46
|
+
|
|
47
|
+
// Update indicator bar (defer so toggleSelect runs first)
|
|
48
|
+
setTimeout(() => {
|
|
49
|
+
const indicator = document.getElementById('indicator-text');
|
|
50
|
+
if (!indicator) return;
|
|
51
|
+
const container = target.closest('.options') || target.closest('.cards');
|
|
52
|
+
const selected = container ? container.querySelectorAll('.selected') : [];
|
|
53
|
+
if (selected.length === 0) {
|
|
54
|
+
indicator.textContent = 'Click an option above, then return to the terminal';
|
|
55
|
+
} else if (selected.length === 1) {
|
|
56
|
+
const label = selected[0].querySelector('h3, .content h3, .card-body h3')?.textContent?.trim() || selected[0].dataset.choice;
|
|
57
|
+
indicator.textContent = '';
|
|
58
|
+
const span = document.createElement('span');
|
|
59
|
+
span.className = 'selected-text';
|
|
60
|
+
span.textContent = label + ' selected';
|
|
61
|
+
indicator.appendChild(span);
|
|
62
|
+
indicator.appendChild(document.createTextNode(' — return to terminal to continue'));
|
|
63
|
+
} else {
|
|
64
|
+
indicator.textContent = '';
|
|
65
|
+
const span = document.createElement('span');
|
|
66
|
+
span.className = 'selected-text';
|
|
67
|
+
span.textContent = selected.length + ' selected';
|
|
68
|
+
indicator.appendChild(span);
|
|
69
|
+
indicator.appendChild(document.createTextNode(' — return to terminal to continue'));
|
|
70
|
+
}
|
|
71
|
+
}, 0);
|
|
72
|
+
});
|
|
73
|
+
|
|
74
|
+
// Frame UI: selection tracking
|
|
75
|
+
window.selectedChoice = null;
|
|
76
|
+
|
|
77
|
+
window.toggleSelect = function(el) {
|
|
78
|
+
const container = el.closest('.options') || el.closest('.cards');
|
|
79
|
+
const multi = container && container.dataset.multiselect !== undefined;
|
|
80
|
+
if (container && !multi) {
|
|
81
|
+
container.querySelectorAll('.option, .card').forEach(o => o.classList.remove('selected'));
|
|
82
|
+
}
|
|
83
|
+
if (multi) {
|
|
84
|
+
el.classList.toggle('selected');
|
|
85
|
+
} else {
|
|
86
|
+
el.classList.add('selected');
|
|
87
|
+
}
|
|
88
|
+
window.selectedChoice = el.dataset.choice;
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
// Expose API for explicit use
|
|
92
|
+
window.brainstorm = {
|
|
93
|
+
send: sendEvent,
|
|
94
|
+
choice: (value, metadata = {}) => sendEvent({ type: 'choice', value, ...metadata })
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
connect();
|
|
98
|
+
})();
|