@zcy2nn/agent-forge 1.1.1 → 1.1.3
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 +247 -247
- package/dist/agents/designer.d.ts +2 -0
- package/dist/agents/explorer.d.ts +2 -0
- package/dist/agents/fixer.d.ts +2 -0
- package/dist/agents/librarian.d.ts +2 -0
- package/dist/agents/observer.d.ts +2 -0
- package/dist/agents/oracle.d.ts +2 -0
- package/dist/cli/index.js +3 -13
- package/dist/cli/migration.d.ts +46 -0
- package/dist/hooks/filter-available-skills/index.d.ts +4 -13
- package/dist/index.js +1 -43
- package/dist/skills/systematic-debugging/condition-based-waiting-example.d.ts +51 -0
- package/package.json +104 -104
- package/src/skills/brainstorming/SKILL.md +186 -186
- package/src/skills/brainstorming/scripts/frame-template.html +214 -214
- package/src/skills/brainstorming/scripts/server.cjs +354 -354
- package/src/skills/systematic-debugging/SKILL.md +318 -318
- package/src/skills/test-driven-development/SKILL.md +392 -392
- package/src/skills/verification-before-completion/SKILL.md +153 -153
- package/src/skills/writing-skills/graphviz-conventions.dot +171 -171
|
@@ -1,214 +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>
|
|
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>
|