@champpaba/claude-agent-kit 3.2.0 → 3.4.0
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/.claude/CHANGELOG.md +129 -0
- package/.claude/CLAUDE.md +57 -2
- package/.claude/agents/02-uxui-frontend.md +99 -16
- package/.claude/agents/07-ux-tester.md +307 -108
- package/.claude/commands/cdev.md +506 -496
- package/.claude/commands/csetup.md +985 -1062
- package/.claude/commands/cstatus.md +62 -53
- package/.claude/commands/cview.md +49 -50
- package/.claude/commands/designsetup.md +958 -1910
- package/.claude/commands/extract.md +480 -743
- package/.claude/commands/pageplan.md +155 -153
- package/.claude/commands/pstatus.md +322 -254
- package/.claude/lib/README.md +8 -0
- package/.claude/lib/design-validator.md +330 -0
- package/package.json +1 -1
|
@@ -25,55 +25,84 @@ Shows quick progress summary:
|
|
|
25
25
|
|
|
26
26
|
## Step 1: Show Project Context (v2.1.0)
|
|
27
27
|
|
|
28
|
-
|
|
29
|
-
const projectStatusPath = 'PROJECT_STATUS.yml'
|
|
28
|
+
### 1.1: Read Project Status
|
|
30
29
|
|
|
31
|
-
if
|
|
32
|
-
|
|
30
|
+
1. Check if `PROJECT_STATUS.yml` exists in project root
|
|
31
|
+
2. If file exists, read and parse YAML content
|
|
33
32
|
|
|
34
|
-
|
|
33
|
+
**Output format:**
|
|
34
|
+
```
|
|
35
35
|
📊 Project Status
|
|
36
|
-
├─ Focus:
|
|
37
|
-
├─ Active change:
|
|
38
|
-
├─ Blockers:
|
|
39
|
-
├─ Infra:
|
|
40
|
-
└─ Updated:
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
36
|
+
├─ Focus: [current_focus.description or "Not set"]
|
|
37
|
+
├─ Active change: [current_focus.active_change or "None"]
|
|
38
|
+
├─ Blockers: [count of blockers or 0]
|
|
39
|
+
├─ Infra: [infrastructure summary - see Step 1.2]
|
|
40
|
+
└─ Updated: [last_updated date]
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### 1.2: Summarize Infrastructure Status
|
|
44
|
+
|
|
45
|
+
**For each service in `infrastructure` section:**
|
|
46
|
+
|
|
47
|
+
1. Check `status` field value
|
|
48
|
+
2. Map to icon:
|
|
49
|
+
- `healthy` → ✅
|
|
50
|
+
- `degraded` → ⚠️
|
|
51
|
+
- `down` → ❌
|
|
52
|
+
- `waiting` → ⏳
|
|
53
|
+
- Other → ❓
|
|
54
|
+
3. Format as: `{service-name} {icon}`
|
|
55
|
+
4. Join all services with ` | `
|
|
56
|
+
|
|
57
|
+
**Example output:** `DB ✅ | API ✅ | Tunnel ⏳`
|
|
58
|
+
|
|
59
|
+
**If no infrastructure configured:** Display `Not configured`
|
|
60
|
+
|
|
61
|
+
### 1.3: Show Active Blockers
|
|
62
|
+
|
|
63
|
+
**If `blockers` array exists and has items:**
|
|
64
|
+
|
|
65
|
+
```
|
|
46
66
|
🚧 Active Blockers:
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
67
|
+
- [blocker-1-id]: [description]
|
|
68
|
+
- [blocker-2-id]: [description]
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
**If no blockers:** Skip this section
|
|
72
|
+
|
|
73
|
+
### 1.4: Handle No Change ID
|
|
74
|
+
|
|
75
|
+
**If no change-id provided in command:**
|
|
76
|
+
|
|
77
|
+
Display:
|
|
78
|
+
```
|
|
55
79
|
Commands:
|
|
56
80
|
→ Update project status: /pstatus
|
|
57
81
|
→ View change status: /cstatus {change-id}
|
|
58
|
-
`)
|
|
59
|
-
return
|
|
60
|
-
}
|
|
61
82
|
```
|
|
62
83
|
|
|
84
|
+
Then STOP (do not proceed to Step 2)
|
|
85
|
+
|
|
63
86
|
---
|
|
64
87
|
|
|
65
88
|
## Step 2: Show Change Status
|
|
66
89
|
|
|
67
|
-
|
|
68
|
-
// Read change flags
|
|
69
|
-
const flagsPath = `openspec/changes/${changeId}/.claude/flags.json`
|
|
90
|
+
### 2.1: Validate Change Exists
|
|
70
91
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
}
|
|
92
|
+
1. Build path: `openspec/changes/{changeId}/.claude/flags.json`
|
|
93
|
+
2. Check if file exists
|
|
74
94
|
|
|
75
|
-
|
|
95
|
+
**If file does NOT exist:**
|
|
96
|
+
```
|
|
97
|
+
❌ Change {changeId} not found or not set up. Run /csetup {changeId} first.
|
|
76
98
|
```
|
|
99
|
+
Then STOP.
|
|
100
|
+
|
|
101
|
+
### 2.2: Read Change Flags
|
|
102
|
+
|
|
103
|
+
1. Read `flags.json` file
|
|
104
|
+
2. Parse JSON content
|
|
105
|
+
3. Extract progress data for output (see Output Format below)
|
|
77
106
|
|
|
78
107
|
## Output Format
|
|
79
108
|
|
|
@@ -126,26 +155,6 @@ Commands:
|
|
|
126
155
|
|
|
127
156
|
---
|
|
128
157
|
|
|
129
|
-
## Helper: summarizeInfraStatus()
|
|
130
|
-
|
|
131
|
-
```typescript
|
|
132
|
-
function summarizeInfraStatus(infrastructure) {
|
|
133
|
-
if (!infrastructure) return 'Not configured'
|
|
134
|
-
|
|
135
|
-
return Object.entries(infrastructure)
|
|
136
|
-
.map(([service, info]) => {
|
|
137
|
-
const icon = info.status === 'healthy' ? '✅' :
|
|
138
|
-
info.status === 'degraded' ? '⚠️' :
|
|
139
|
-
info.status === 'down' ? '❌' :
|
|
140
|
-
info.status === 'waiting' ? '⏳' : '❓'
|
|
141
|
-
return `${service} ${icon}`
|
|
142
|
-
})
|
|
143
|
-
.join(' | ')
|
|
144
|
-
}
|
|
145
|
-
```
|
|
146
|
-
|
|
147
|
-
---
|
|
148
|
-
|
|
149
158
|
## Implementation Notes
|
|
150
159
|
|
|
151
160
|
1. **Always show project status first** (if PROJECT_STATUS.yml exists)
|
|
@@ -38,11 +38,9 @@ Run: /csetup {change-id}
|
|
|
38
38
|
|
|
39
39
|
### Step 2: Read flags.json
|
|
40
40
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
)
|
|
45
|
-
```
|
|
41
|
+
1. Read the file `openspec/changes/{change-id}/.claude/flags.json`
|
|
42
|
+
2. Parse the content as JSON
|
|
43
|
+
3. Store the result for use in output generation
|
|
46
44
|
|
|
47
45
|
### Step 3: Format Output
|
|
48
46
|
|
|
@@ -153,63 +151,64 @@ Fix issues before continuing.
|
|
|
153
151
|
|
|
154
152
|
### Progress Bar
|
|
155
153
|
|
|
156
|
-
|
|
157
|
-
function generateProgressBar(percentage: number, width: number = 20): string {
|
|
158
|
-
const filled = Math.floor(percentage * width / 100)
|
|
159
|
-
const empty = width - filled
|
|
160
|
-
return `[${'█'.repeat(filled)}${'░'.repeat(empty)}] ${percentage}%`
|
|
161
|
-
}
|
|
154
|
+
To display a progress bar showing completion percentage:
|
|
162
155
|
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
156
|
+
1. Calculate filled portion: `Math.floor(percentage * 20 / 100)`
|
|
157
|
+
2. Calculate empty portion: `20 - filled`
|
|
158
|
+
3. Format as: `[████████████░░░░░░░░] 64%`
|
|
159
|
+
- Use `█` (filled block) for completed portion
|
|
160
|
+
- Use `░` (light shade) for remaining portion
|
|
161
|
+
- Append the percentage value
|
|
162
|
+
- Default width: 20 characters
|
|
163
|
+
|
|
164
|
+
Example:
|
|
165
|
+
- Input: 64%
|
|
166
|
+
- Output: `[████████████░░░░░░░░] 64%`
|
|
166
167
|
|
|
167
168
|
### Time Formatting
|
|
168
169
|
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
170
|
+
To format duration from minutes to human-readable format:
|
|
171
|
+
|
|
172
|
+
1. Calculate hours: `Math.floor(minutes / 60)`
|
|
173
|
+
2. Calculate remaining minutes: `minutes % 60`
|
|
174
|
+
3. Format based on duration:
|
|
175
|
+
- If hours > 0: `{hours}h {mins}m` (e.g., "2h 45m")
|
|
176
|
+
- If hours = 0: `{mins} min` (e.g., "35 min")
|
|
177
|
+
|
|
178
|
+
Examples:
|
|
179
|
+
- 165 minutes → "2h 45m"
|
|
180
|
+
- 35 minutes → "35 min"
|
|
179
181
|
|
|
180
182
|
### Time Ago
|
|
181
183
|
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
```
|
|
184
|
+
To display how long ago a timestamp occurred:
|
|
185
|
+
|
|
186
|
+
1. Calculate difference in minutes between now and the timestamp
|
|
187
|
+
2. Format based on time elapsed:
|
|
188
|
+
- Less than 60 minutes: `{minutes} minutes ago`
|
|
189
|
+
- Less than 24 hours: `{hours} hours ago`
|
|
190
|
+
- 24 hours or more: `{days} days ago`
|
|
191
|
+
|
|
192
|
+
Examples:
|
|
193
|
+
- 15 minutes ago → "15 minutes ago"
|
|
194
|
+
- 3 hours ago → "3 hours ago"
|
|
195
|
+
- 2 days ago → "2 days ago"
|
|
195
196
|
|
|
196
197
|
### Efficiency Calculation
|
|
197
198
|
|
|
198
|
-
|
|
199
|
-
function calculateEfficiency(actual: number, estimated: number): {
|
|
200
|
-
percentage: number
|
|
201
|
-
status: 'ahead' | 'on track' | 'behind'
|
|
202
|
-
} {
|
|
203
|
-
const percentage = Math.round((estimated / actual) * 100)
|
|
204
|
-
let status: 'ahead' | 'on track' | 'behind'
|
|
199
|
+
To calculate and display schedule efficiency:
|
|
205
200
|
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
201
|
+
1. Calculate efficiency percentage: `Math.round((estimated / actual) * 100)`
|
|
202
|
+
2. Determine status based on percentage:
|
|
203
|
+
- Greater than 110%: "ahead" (of schedule)
|
|
204
|
+
- Between 90-110%: "on track"
|
|
205
|
+
- Less than 90%: "behind" (schedule)
|
|
206
|
+
3. Display as: `{percentage}% ({status})`
|
|
209
207
|
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
208
|
+
Examples:
|
|
209
|
+
- Estimated: 180 min, Actual: 165 min → "109% (on track)"
|
|
210
|
+
- Estimated: 180 min, Actual: 140 min → "129% (ahead)"
|
|
211
|
+
- Estimated: 180 min, Actual: 220 min → "82% (behind)"
|
|
213
212
|
|
|
214
213
|
---
|
|
215
214
|
|