@c0x12c/spartan-ai-toolkit 1.7.1 → 1.8.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-plugin/marketplace.json +2 -2
- package/.claude-plugin/plugin.json +2 -2
- package/VERSION +1 -1
- package/agents/design-critic.md +12 -0
- package/claude-md/25-ux-design.md +56 -0
- package/commands/spartan/build.md +50 -7
- package/commands/spartan/design.md +14 -220
- package/commands/spartan/fe-review.md +27 -0
- package/commands/spartan/figma-to-code.md +16 -0
- package/commands/spartan/next-feature.md +15 -0
- package/commands/spartan/pr-ready.md +7 -5
- package/commands/spartan/update.md +24 -6
- package/commands/spartan/ux.md +1233 -0
- package/commands/spartan.md +3 -1
- package/package.json +1 -1
- package/packs/frontend-react.yaml +1 -5
- package/packs/packs.compiled.json +24 -4
- package/packs/ux-design.yaml +21 -0
- package/rules/ux-design/DESIGN_PROCESS.md +176 -0
- package/skills/design-intelligence/SKILL.md +268 -0
|
@@ -8,9 +8,9 @@
|
|
|
8
8
|
"plugins": [
|
|
9
9
|
{
|
|
10
10
|
"name": "spartan-ai-toolkit",
|
|
11
|
-
"description": "5 workflows,
|
|
11
|
+
"description": "5 workflows, 68 commands, 21 rules, 28 skills, 9 agents — organized in 12 packs with dependencies",
|
|
12
12
|
"source": "./toolkit",
|
|
13
|
-
"version": "1.
|
|
13
|
+
"version": "1.8.0"
|
|
14
14
|
}
|
|
15
15
|
]
|
|
16
16
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "spartan-ai-toolkit",
|
|
3
|
-
"version": "1.
|
|
4
|
-
"description": "Engineering discipline layer for Claude Code — 5 workflows,
|
|
3
|
+
"version": "1.8.0",
|
|
4
|
+
"description": "Engineering discipline layer for Claude Code — 5 workflows, 68 commands, 21 rules, 28 skills, 9 agents organized in 12 packs",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "Khoa Tran",
|
|
7
7
|
"url": "https://github.com/spartan-stratos"
|
package/VERSION
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
1.
|
|
1
|
+
1.8.0
|
package/agents/design-critic.md
CHANGED
|
@@ -34,6 +34,18 @@ This is your #1 job. Does this design look like every other AI-generated page?
|
|
|
34
34
|
- [ ] Copy is specific to the project domain (not generic marketing fluff)
|
|
35
35
|
- [ ] Would you remember this design tomorrow? (If no, it's too generic)
|
|
36
36
|
|
|
37
|
+
### Design Token Compliance (ZERO tolerance if tokens exist)
|
|
38
|
+
|
|
39
|
+
Check `.planning/design/system/tokens.md` and `.planning/design-config.md`:
|
|
40
|
+
|
|
41
|
+
- [ ] **EVERY** color in the design matches the token list EXACTLY (not "close enough")
|
|
42
|
+
- [ ] **EVERY** font reference matches the project font EXACTLY (not a substitute)
|
|
43
|
+
- [ ] Spacing values align with the token scale (no arbitrary numbers)
|
|
44
|
+
- [ ] Border radius matches token definitions
|
|
45
|
+
- [ ] Shadow levels match token definitions
|
|
46
|
+
|
|
47
|
+
**Hard fail:** If even ONE color or font doesn't match the tokens → NEEDS CHANGES. The whole point of tokens is consistency. No exceptions.
|
|
48
|
+
|
|
37
49
|
### Brand Compliance (If design-config exists)
|
|
38
50
|
|
|
39
51
|
- [ ] Colors match the design-config palette exactly (not approximations)
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
|
|
2
|
+
---
|
|
3
|
+
|
|
4
|
+
## UX Design Workflow
|
|
5
|
+
|
|
6
|
+
**Stack:** Platform-agnostic UX research and design — works for web, mobile, or any digital product.
|
|
7
|
+
|
|
8
|
+
**The full design pipeline:**
|
|
9
|
+
```
|
|
10
|
+
/spartan:ux ← smart router: asks what you need
|
|
11
|
+
/spartan:ux research ← Phase 1: User discovery
|
|
12
|
+
/spartan:ux define ← Phase 2: Problem definition
|
|
13
|
+
/spartan:ux ideate ← Phase 3: Solution exploration
|
|
14
|
+
/spartan:ux system ← Design system setup (tokens + components)
|
|
15
|
+
/spartan:ux prototype ← Phase 4: Screen design + Design Gate
|
|
16
|
+
/spartan:ux test ← Phase 5: Usability testing plan
|
|
17
|
+
/spartan:ux handoff ← Phase 6: Developer handoff spec
|
|
18
|
+
/spartan:ux qa ← Phase 7: Design QA checklist
|
|
19
|
+
/spartan:ux audit ← Mid-stream: scan what exists, find gaps
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
### 3 Maturity Tracks
|
|
23
|
+
|
|
24
|
+
| Track | Phases | Time | When to use |
|
|
25
|
+
|-------|--------|------|-------------|
|
|
26
|
+
| **Quick** | prototype → handoff | 1-2 hours | Small UI change, single component |
|
|
27
|
+
| **Standard** | research → define → prototype → test → handoff | 1-3 days | Real feature with users |
|
|
28
|
+
| **Full** | All 7 phases | 1-3 weeks | New product, major redesign |
|
|
29
|
+
|
|
30
|
+
### Design Artifacts Location
|
|
31
|
+
|
|
32
|
+
```
|
|
33
|
+
.planning/design/
|
|
34
|
+
├── research/ ← User interviews, competitors, insights
|
|
35
|
+
├── definition/ ← Personas, journey map, problem brief
|
|
36
|
+
├── ideation/ ← Ideas, user flows
|
|
37
|
+
├── system/ ← Design tokens, component inventory
|
|
38
|
+
└── screens/ ← Per-feature screen designs
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### Design Token Enforcement
|
|
42
|
+
|
|
43
|
+
Once design tokens exist, ALL downstream commands enforce them:
|
|
44
|
+
- `/spartan:build` injects tokens into agent prompts
|
|
45
|
+
- `/spartan:fe-review` checks token compliance (Stage 8)
|
|
46
|
+
- `/spartan:next-feature` scaffolds with project tokens
|
|
47
|
+
- `design-critic` agent hard-fails on token mismatches
|
|
48
|
+
|
|
49
|
+
### Works With Other Workflows
|
|
50
|
+
|
|
51
|
+
| You're running... | UX integration |
|
|
52
|
+
|-------------------|---------------|
|
|
53
|
+
| `/spartan:build frontend` | Checks for design tokens, nudges if missing |
|
|
54
|
+
| `/spartan:spec` (UI feature) | Checks for user research, suggests if missing |
|
|
55
|
+
| `/spartan:fe-review` | Checks code against design tokens |
|
|
56
|
+
| `/spartan:design` | Alias for `/spartan:ux prototype` |
|
|
@@ -31,6 +31,19 @@ EPIC (multi-feature — auto-detected):
|
|
|
31
31
|
**Full path:** For bigger work, you call `/spartan:spec`, `/spartan:design`, `/spartan:plan` as sub-steps.
|
|
32
32
|
**Epic path:** If the feature name matches an epic with 2+ specs ready, build all features together — one branch, one PR.
|
|
33
33
|
|
|
34
|
+
### Stages That MUST NOT Be Skipped
|
|
35
|
+
|
|
36
|
+
| Stage | When it runs | Can skip? |
|
|
37
|
+
|-------|-------------|-----------|
|
|
38
|
+
| Stage 1 (Spec) | Always | NO — every feature needs a scope |
|
|
39
|
+
| Stage 2 (Design) | Frontend/UI work | NO — must ask user (skip only if pure data change) |
|
|
40
|
+
| Stage 3 (Plan) | Always | NO — every feature needs a plan |
|
|
41
|
+
| Stage 4 (Implement) | Always | NO |
|
|
42
|
+
| Stage 5 (Review) | Always | **NEVER** — this is the most commonly skipped stage. You MUST spawn the review agent. |
|
|
43
|
+
| Stage 6 (Ship) | Always | NO |
|
|
44
|
+
|
|
45
|
+
**If you finish Stage 4 and are about to commit/PR without running Stage 5 — STOP. You are skipping review. Go back and run it.**
|
|
46
|
+
|
|
34
47
|
---
|
|
35
48
|
|
|
36
49
|
## Step 0: Detect Mode & Stack (silent — no questions)
|
|
@@ -71,9 +84,12 @@ ls .memory/decisions/ .memory/patterns/ .memory/knowledge/ .memory/blockers/ 2>/
|
|
|
71
84
|
|
|
72
85
|
# Check for existing artifacts
|
|
73
86
|
ls .planning/specs/*.md 2>/dev/null
|
|
74
|
-
ls .planning/designs/*.md 2>/dev/null
|
|
87
|
+
ls .planning/designs/*.md .planning/design/screens/*.md 2>/dev/null
|
|
75
88
|
ls .planning/plans/*.md 2>/dev/null
|
|
76
89
|
|
|
90
|
+
# Check for design tokens
|
|
91
|
+
ls .planning/design/system/tokens.md .planning/design-config.md 2>/dev/null
|
|
92
|
+
|
|
77
93
|
# Check for epic
|
|
78
94
|
ls .planning/epics/*.md 2>/dev/null
|
|
79
95
|
|
|
@@ -195,7 +211,7 @@ If user picks B → continue to Plan.
|
|
|
195
211
|
|
|
196
212
|
If user picks C → read the Figma reference and use it as the design source.
|
|
197
213
|
|
|
198
|
-
**Auto mode on?** → Still ask this question. Design skipping is the user's call, not yours. The only exception: if the
|
|
214
|
+
**Auto mode on?** → Still ask this question. Design skipping is the user's call, not yours. The only exception: if the change is purely data (adding a column to an existing table, no new screens or layouts), skip silently. If there's ANY new component, screen, modal, or layout change — you MUST ask.
|
|
199
215
|
|
|
200
216
|
---
|
|
201
217
|
|
|
@@ -318,17 +334,35 @@ ls .planning/designs/*.md 2>/dev/null
|
|
|
318
334
|
- **pages-dev** — pages + routing + integration (blocked by components-dev)
|
|
319
335
|
|
|
320
336
|
**Design doc handoff (MANDATORY for frontend/UI agents):**
|
|
321
|
-
If a design doc exists at `.planning/designs/`, EVERY frontend/UI agent MUST get this in its prompt:
|
|
337
|
+
If a design doc exists at `.planning/designs/` or `.planning/design/screens/`, EVERY frontend/UI agent MUST get this in its prompt:
|
|
322
338
|
```
|
|
323
|
-
Design doc: .planning/
|
|
339
|
+
Design doc: .planning/design/screens/{feature}.md — read this FIRST.
|
|
324
340
|
Follow the screen designs, component specs, and visual details exactly.
|
|
325
341
|
Do NOT invent your own layout or design. The design was already reviewed and approved.
|
|
326
342
|
```
|
|
327
343
|
|
|
344
|
+
**Design token enforcement (MANDATORY for frontend/UI work):**
|
|
345
|
+
```bash
|
|
346
|
+
ls .planning/design/system/tokens.md .planning/design-config.md 2>/dev/null
|
|
347
|
+
```
|
|
348
|
+
If design tokens exist, read them and inject into EVERY frontend/UI agent prompt:
|
|
349
|
+
```
|
|
350
|
+
DESIGN TOKENS — BINDING CONSTRAINTS:
|
|
351
|
+
Read .planning/design/system/tokens.md (or .planning/design-config.md).
|
|
352
|
+
You MUST use these exact values. Do NOT use Tailwind defaults or generic colors.
|
|
353
|
+
- Use token color names, not hex values or bg-blue-500
|
|
354
|
+
- Use the project font, not Inter/Arial/system-ui
|
|
355
|
+
- Use the spacing scale, not arbitrary padding/margin
|
|
356
|
+
- Use the project border radius, not rounded-lg
|
|
357
|
+
Every color, font, and spacing value in your code must come from the token list.
|
|
358
|
+
```
|
|
359
|
+
|
|
328
360
|
5. Monitor progress. When all agents finish, merge worktrees and run full test suite.
|
|
329
361
|
|
|
330
362
|
6. `TeamDelete` to clean up.
|
|
331
363
|
|
|
364
|
+
7. **MANDATORY: Continue to Stage 5 (Review) NOW.** Do NOT stop here. Do NOT ask "Want me to commit?" or "Should I create a PR?" — implementation is done but review hasn't happened yet. Go straight to Gate 3 → Stage 5.
|
|
365
|
+
|
|
332
366
|
**If Agent Teams is NOT enabled** (env var not set), continue with sequential execution below.
|
|
333
367
|
|
|
334
368
|
### Sequential execution (default)
|
|
@@ -392,14 +426,22 @@ npm test && npm run build
|
|
|
392
426
|
./gradlew test && npm test && npm run build
|
|
393
427
|
```
|
|
394
428
|
|
|
395
|
-
**GATE 3 — Implementation complete.**
|
|
429
|
+
**GATE 3 — Implementation complete. Review is NEXT.**
|
|
396
430
|
> "All [N] tasks done. [X] tests passing. Starting review."
|
|
397
431
|
>
|
|
398
432
|
> **Auto mode on?** → Go straight to review.
|
|
433
|
+
>
|
|
434
|
+
> **CRITICAL: You MUST run Stage 5 (Review) after this gate. No exceptions. Do NOT commit, do NOT create a PR, do NOT ask the user what to do next. The next step is ALWAYS the review agent.**
|
|
399
435
|
|
|
400
436
|
---
|
|
401
437
|
|
|
402
|
-
## Stage 5: Review (agent-based —
|
|
438
|
+
## Stage 5: Review (agent-based — MANDATORY, NEVER SKIP)
|
|
439
|
+
|
|
440
|
+
> **CRITICAL: This stage MUST run for every build. No exceptions.**
|
|
441
|
+
> - Not optional. Not skippable. Not deferrable.
|
|
442
|
+
> - Do NOT ask the user "Want me to skip review?" or "Should I review?"
|
|
443
|
+
> - Do NOT commit or create a PR before this stage completes.
|
|
444
|
+
> - If you catch yourself about to skip this stage, STOP and run it.
|
|
403
445
|
|
|
404
446
|
**This is NOT a self-review.** Spawn a separate review agent to get a fresh perspective. The reviewer finds issues, you fix them, repeat until clean.
|
|
405
447
|
|
|
@@ -753,7 +795,8 @@ If a previous session was interrupted (context overflow, user stopped, etc.), th
|
|
|
753
795
|
- **Gates are mandatory.** Even small features go through all stages. The stages are fast for small work — that's fine.
|
|
754
796
|
- **TDD by default.** Write the test first. Override only when test-first doesn't make sense for that specific task.
|
|
755
797
|
- **One commit per task.** Don't batch. Each task = one commit with a clear message.
|
|
756
|
-
- **Review is
|
|
798
|
+
- **Review is ALWAYS an agent. NEVER skip.** This is the #1 rule. After implementation finishes — whether via Agent Teams or sequential — you MUST spawn the review agent (Stage 5). Never self-review. Never skip review. Never ask the user if they want to skip. Never commit or create a PR without review. Fix issues until the reviewer says PASS.
|
|
799
|
+
- **Design gate runs for frontend work.** If the feature has UI work (new components, screens, modals, layouts), you MUST trigger the design question in Stage 2. Only skip for pure data changes (adding a field to an existing table/component).
|
|
757
800
|
- **Security check always runs.** Whether backend or frontend, security patterns get checked during review.
|
|
758
801
|
- **Frontend checks for backend needs.** If a new page needs data that doesn't exist yet, say so at Stage 3 and add backend tasks first.
|
|
759
802
|
- **Don't over-plan.** If the whole thing is 1-2 files and 30 minutes of work, don't force it into this workflow. Just do it. This workflow is for features that need structure — at least 2-3 tasks.
|
|
@@ -1,229 +1,23 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: spartan:design
|
|
3
|
-
description:
|
|
3
|
+
description: "Alias for /spartan:ux prototype — design workflow with Design Gate"
|
|
4
4
|
argument-hint: "[feature name]"
|
|
5
|
-
preamble-tier:
|
|
5
|
+
preamble-tier: 1
|
|
6
6
|
---
|
|
7
7
|
|
|
8
8
|
# Design: {{ args[0] | default: "unnamed feature" }}
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
> **This command has moved to `/spartan:ux prototype`.** Running it now.
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
Epic → Spec → ► [Design] → Plan → Build → Review
|
|
14
|
-
↑
|
|
15
|
-
Design Gate
|
|
16
|
-
```
|
|
12
|
+
Run `/spartan:ux prototype {{ args[0] }}` internally. Pass all arguments through.
|
|
17
13
|
|
|
18
|
-
The
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
If spec exists, read it. The design must match the spec's requirements.
|
|
30
|
-
If no spec, ask:
|
|
31
|
-
> "No spec found. Want to:"
|
|
32
|
-
> - A) Write the spec first → `/spartan:spec {{ args[0] }}`
|
|
33
|
-
> - B) Give me a quick brief and I'll design from that
|
|
34
|
-
|
|
35
|
-
### Find design config
|
|
36
|
-
```bash
|
|
37
|
-
ls .planning/design-config.md .claude/design-config.md 2>/dev/null
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
If no design config exists, ask:
|
|
41
|
-
> "No design config found. This file sets your project's colors, fonts, and brand identity."
|
|
42
|
-
> - A) Create one now — I'll ask you a few questions
|
|
43
|
-
> - B) Skip it — I'll use generic design guidelines
|
|
44
|
-
|
|
45
|
-
If user picks A, run the **Design Config Setup** (see below).
|
|
46
|
-
|
|
47
|
-
### Load the design-workflow skill
|
|
48
|
-
Read the `design-workflow` skill for anti-AI-generic guidelines. Apply these throughout.
|
|
49
|
-
|
|
50
|
-
---
|
|
51
|
-
|
|
52
|
-
## Design Config Setup (only if no config exists)
|
|
53
|
-
|
|
54
|
-
Ask these questions **one at a time**:
|
|
55
|
-
|
|
56
|
-
1. **"What's the app/product name?"**
|
|
57
|
-
2. **"Light theme, dark theme, or both?"**
|
|
58
|
-
3. **"What's the primary brand color?"** (e.g., "violet #8B5CF6", "amber #F59E0B")
|
|
59
|
-
4. **"What font do you use?"** (default: Inter if unsure)
|
|
60
|
-
5. **"Any reference apps for the look and feel?"** (e.g., "Linear, Vercel Dashboard")
|
|
61
|
-
6. **"What should it NOT look like?"** (anti-references)
|
|
62
|
-
|
|
63
|
-
Save to `.planning/design-config.md` using the `design-config.md` template.
|
|
64
|
-
|
|
65
|
-
---
|
|
66
|
-
|
|
67
|
-
## Step 1: Design Brief
|
|
68
|
-
|
|
69
|
-
Fill in the brief from the spec and user input:
|
|
70
|
-
|
|
71
|
-
```markdown
|
|
72
|
-
### What are we designing?
|
|
73
|
-
[From spec's UI Changes section or user's description]
|
|
74
|
-
|
|
75
|
-
### Who's the user?
|
|
76
|
-
[From spec's User Stories or design-config]
|
|
77
|
-
|
|
78
|
-
### Goal
|
|
79
|
-
[From spec's Goal section]
|
|
80
|
-
|
|
81
|
-
### Platform
|
|
82
|
-
[Desktop / Mobile / Both — ask if not clear]
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
---
|
|
86
|
-
|
|
87
|
-
## Step 2: User Flows
|
|
88
|
-
|
|
89
|
-
Map every user story from the spec to a concrete flow:
|
|
90
|
-
|
|
91
|
-
```markdown
|
|
92
|
-
### Flow 1: [name]
|
|
93
|
-
**Trigger**: [what starts it]
|
|
94
|
-
|
|
95
|
-
| Step | User Action | System Response | Screen |
|
|
96
|
-
|------|-------------|-----------------|--------|
|
|
97
|
-
| 1 | [action] | [response] | [screen] |
|
|
98
|
-
```
|
|
99
|
-
|
|
100
|
-
Include edge case flows: empty data, error, loading, timeout.
|
|
101
|
-
|
|
102
|
-
---
|
|
103
|
-
|
|
104
|
-
## Step 3: Screen Design
|
|
105
|
-
|
|
106
|
-
For each screen:
|
|
107
|
-
|
|
108
|
-
1. **Screen inventory** — list all screens with their states
|
|
109
|
-
2. **Component list** — what components each screen needs
|
|
110
|
-
3. **Wireframes** — ASCII wireframes showing layout structure
|
|
111
|
-
4. **Responsive behavior** — how layout changes at mobile/tablet/desktop
|
|
112
|
-
|
|
113
|
-
If design-config exists, use its colors, fonts, and design personality. Don't invent new values.
|
|
114
|
-
|
|
115
|
-
---
|
|
116
|
-
|
|
117
|
-
## Step 4: Visual Design Details
|
|
118
|
-
|
|
119
|
-
Add these sections if the project has a design config:
|
|
120
|
-
|
|
121
|
-
### Section Zones
|
|
122
|
-
Plan background alternation for visual rhythm:
|
|
123
|
-
```markdown
|
|
124
|
-
| Section | Background | Mood |
|
|
125
|
-
|---------|-----------|------|
|
|
126
|
-
| Hero | [from design-config palette] | Dramatic entry |
|
|
127
|
-
| Content | [slightly different bg] | Subtle shift |
|
|
128
|
-
```
|
|
129
|
-
|
|
130
|
-
### Motion Plan
|
|
131
|
-
What moves and when:
|
|
132
|
-
```markdown
|
|
133
|
-
| Element | Animation | Trigger | Duration |
|
|
134
|
-
|---------|-----------|---------|----------|
|
|
135
|
-
| Section content | Fade up | Scroll into view | 0.6s |
|
|
136
|
-
| Cards | Stagger fade | Scroll into view | 0.6s + 0.15s |
|
|
137
|
-
```
|
|
138
|
-
|
|
139
|
-
### Component Specs
|
|
140
|
-
For key components, detail props, states, and interactions:
|
|
141
|
-
```markdown
|
|
142
|
-
| Prop | Type | Required | Description |
|
|
143
|
-
|------|------|----------|-------------|
|
|
144
|
-
| [name] | [type] | [yes/no] | [what it does] |
|
|
145
|
-
```
|
|
146
|
-
|
|
147
|
-
---
|
|
148
|
-
|
|
149
|
-
## Step 5: Accessibility Checklist
|
|
150
|
-
|
|
151
|
-
Before sending to critic, verify:
|
|
152
|
-
|
|
153
|
-
- [ ] Color contrast meets WCAG AA (4.5:1 for text, 3:1 for large text)
|
|
154
|
-
- [ ] All interactive elements keyboard accessible
|
|
155
|
-
- [ ] Focus order follows visual layout
|
|
156
|
-
- [ ] Animations respect `prefers-reduced-motion`
|
|
157
|
-
- [ ] Touch targets at least 44x44px on mobile
|
|
158
|
-
- [ ] No information conveyed by color alone
|
|
159
|
-
|
|
160
|
-
---
|
|
161
|
-
|
|
162
|
-
## Step 6: Self-Check (Before Calling Critic)
|
|
163
|
-
|
|
164
|
-
Run through these checks yourself:
|
|
165
|
-
|
|
166
|
-
1. **Does it look like a real app, or a generic AI template?**
|
|
167
|
-
2. **Is there clear visual hierarchy?** Can you tell what's most important?
|
|
168
|
-
3. **Does the accent color draw the eye to CTAs?**
|
|
169
|
-
4. **Is there enough whitespace?**
|
|
170
|
-
5. **Does the text use specific language, not generic marketing fluff?**
|
|
171
|
-
6. **Does it match the design personality from design-config?**
|
|
172
|
-
|
|
173
|
-
Fix anything that fails before calling the critic.
|
|
174
|
-
|
|
175
|
-
---
|
|
176
|
-
|
|
177
|
-
## Step 7: Spawn Design Critic
|
|
178
|
-
|
|
179
|
-
Spawn the `design-critic` agent as a subagent. Give it:
|
|
180
|
-
|
|
181
|
-
1. **The design document** you just wrote
|
|
182
|
-
2. **The design-config** (if exists)
|
|
183
|
-
3. **The spec** (if exists)
|
|
184
|
-
4. **Your self-check results** from Step 6
|
|
185
|
-
|
|
186
|
-
**Prompt for the critic:**
|
|
187
|
-
> "Review this design for the Design Gate. Design doc: [content]. Design-config: [path or 'none']. Spec: [path or 'none']. Check for AI-generic patterns, brand compliance, accessibility, and responsive behavior. Give your verdict: ACCEPT or NEEDS CHANGES."
|
|
188
|
-
|
|
189
|
-
### Discussion
|
|
190
|
-
Same rules as `/spartan:gate-review`:
|
|
191
|
-
- If critic says ACCEPT → Design Gate passed
|
|
192
|
-
- If critic says NEEDS CHANGES → fix issues, re-submit
|
|
193
|
-
- Max 3 rounds of back-and-forth
|
|
194
|
-
- Escalate to user if stuck
|
|
195
|
-
|
|
196
|
-
---
|
|
197
|
-
|
|
198
|
-
## Step 8: Save and Confirm
|
|
199
|
-
|
|
200
|
-
Save the design doc to `.planning/designs/{{ args[0] | default: "feature-name" }}.md`.
|
|
201
|
-
|
|
202
|
-
```markdown
|
|
203
|
-
**Date**: [today]
|
|
204
|
-
**Status**: approved
|
|
205
|
-
**Spec**: .planning/specs/{{ args[0] }}.md
|
|
206
|
-
**Designer**: Claude (main agent)
|
|
207
|
-
**Critic**: design-critic agent
|
|
208
|
-
**Verdict**: PASSED — both agents accept
|
|
209
|
-
```
|
|
210
|
-
|
|
211
|
-
Then tell the user:
|
|
212
|
-
|
|
213
|
-
> "Design saved to `.planning/designs/{{ args[0] }}.md` — Design Gate passed."
|
|
214
|
-
>
|
|
215
|
-
> **Next steps:**
|
|
216
|
-
> - Ready to plan? → `/spartan:plan {{ args[0] }}`
|
|
217
|
-
> - Want to build a prototype first? → Ask and I'll generate HTML
|
|
218
|
-
> - Need changes? → Run `/spartan:design {{ args[0] }}` again
|
|
219
|
-
|
|
220
|
-
---
|
|
221
|
-
|
|
222
|
-
## Rules
|
|
223
|
-
|
|
224
|
-
- **Read the design-config first.** If it exists, every color and font must come from it. No inventing.
|
|
225
|
-
- **Anti-AI-generic is the top priority.** If the design looks like every other AI-generated page, it fails.
|
|
226
|
-
- **All states must be covered.** Loading, empty, error, success — not just the happy path.
|
|
227
|
-
- **Responsive is not optional.** Every screen must work at mobile, tablet, and desktop.
|
|
228
|
-
- **Critic must accept.** Single-agent design is just `/spartan:build` with a UI. The dual-agent review is what makes this command valuable.
|
|
229
|
-
- **Auto mode on?** → Skip confirmations but still run the full critic review.
|
|
14
|
+
The full UX design workflow is now at `/spartan:ux` with sub-commands:
|
|
15
|
+
- `/spartan:ux research` — user discovery
|
|
16
|
+
- `/spartan:ux define` — problem definition
|
|
17
|
+
- `/spartan:ux ideate` — solution exploration
|
|
18
|
+
- `/spartan:ux system` — design system setup
|
|
19
|
+
- `/spartan:ux prototype` — screen design + Design Gate (this is what `/spartan:design` used to do)
|
|
20
|
+
- `/spartan:ux test` — usability testing plan
|
|
21
|
+
- `/spartan:ux handoff` — developer handoff
|
|
22
|
+
- `/spartan:ux qa` — design QA checklist
|
|
23
|
+
- `/spartan:ux audit` — gap analysis
|
|
@@ -127,6 +127,33 @@ done
|
|
|
127
127
|
|
|
128
128
|
---
|
|
129
129
|
|
|
130
|
+
## Stage 8: Design Token Compliance
|
|
131
|
+
|
|
132
|
+
**Only runs if `.planning/design/system/tokens.md` or `.planning/design-config.md` exists.**
|
|
133
|
+
|
|
134
|
+
Read the design tokens file first. Then check every changed frontend file:
|
|
135
|
+
|
|
136
|
+
- [ ] Colors use token names or CSS variables, not hardcoded hex or Tailwind defaults
|
|
137
|
+
- Search for: raw hex values (#xxx), `bg-blue-*`, `bg-purple-*`, `text-gray-*`
|
|
138
|
+
- Each match: is this value in the token list? If not → flag as **critical**
|
|
139
|
+
- [ ] Font family matches design config, not generic fallbacks
|
|
140
|
+
- Search for: `font-sans`, `Inter`, `Roboto`, `Arial`, `system-ui`
|
|
141
|
+
- If project font is different → flag as **critical**
|
|
142
|
+
- [ ] Spacing uses the token scale, not arbitrary values
|
|
143
|
+
- Random values like `p-[13px]` or `mt-[7px]` → flag as **warning**
|
|
144
|
+
- [ ] Border radius matches token definitions
|
|
145
|
+
- [ ] New components reference the design system, not reinventing styles
|
|
146
|
+
|
|
147
|
+
```bash
|
|
148
|
+
# Quick scan for hardcoded colors (should be tokens)
|
|
149
|
+
git diff main...HEAD -- "*.tsx" "*.ts" "*.css" | grep -E '#[0-9a-fA-F]{3,8}|bg-(blue|red|green|purple|pink|indigo|violet)-[0-9]' | head -20
|
|
150
|
+
|
|
151
|
+
# Quick scan for generic fonts
|
|
152
|
+
git diff main...HEAD -- "*.tsx" "*.ts" "*.css" | grep -E "font-sans|Inter|Roboto|Arial|system-ui" | head -10
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
---
|
|
156
|
+
|
|
130
157
|
## Output Format
|
|
131
158
|
|
|
132
159
|
```markdown
|
|
@@ -13,6 +13,22 @@ You are converting a Figma design into production React/Next.js code using **Fig
|
|
|
13
13
|
|
|
14
14
|
---
|
|
15
15
|
|
|
16
|
+
## Phase 0: Check for existing design tokens (silent)
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
ls .planning/design/system/tokens.md .planning/design-config.md 2>/dev/null
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
If design tokens already exist, read them FIRST. When extracting from Figma:
|
|
23
|
+
- **MERGE** Figma colors with existing tokens — don't create a second conflicting token set
|
|
24
|
+
- Use existing token NAMES (e.g., `--color-primary`) even if Figma uses different hex values
|
|
25
|
+
- If Figma colors differ from tokens, flag the mismatch and ask the user which to keep
|
|
26
|
+
- Any NEW tokens from Figma get added to the existing file, not written to a separate one
|
|
27
|
+
|
|
28
|
+
If NO tokens exist, proceed normally — extract from Figma and create new tokens.
|
|
29
|
+
|
|
30
|
+
---
|
|
31
|
+
|
|
16
32
|
## Phase 1: Extract Design Data (single MCP call)
|
|
17
33
|
|
|
18
34
|
Call Figma MCP to get the screen data:
|
|
@@ -24,6 +24,21 @@ Ask the user:
|
|
|
24
24
|
|
|
25
25
|
---
|
|
26
26
|
|
|
27
|
+
## Step 1.5: Check for design tokens (silent)
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
ls .planning/design/system/tokens.md .planning/design-config.md 2>/dev/null
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
If design tokens exist, read them. All scaffolded components MUST use project tokens:
|
|
34
|
+
- Use project colors in default styles, not Tailwind defaults
|
|
35
|
+
- Use project font in any typography
|
|
36
|
+
- Import from the project's design token file if it exists (e.g., `@/lib/design-tokens`)
|
|
37
|
+
|
|
38
|
+
If NO tokens exist, scaffold with clean, unstyled components. Use `bg-neutral-*` placeholder styles that are obviously temporary. Don't use `bg-blue-500` or other Tailwind color defaults.
|
|
39
|
+
|
|
40
|
+
---
|
|
41
|
+
|
|
27
42
|
## Step 2: Map the directory structure
|
|
28
43
|
|
|
29
44
|
Based on answers, propose this structure under `app/` or `components/`:
|
|
@@ -27,16 +27,18 @@ If uncommitted changes exist → commit or stash before continuing.
|
|
|
27
27
|
## Step 2: Rebase onto Main
|
|
28
28
|
|
|
29
29
|
```bash
|
|
30
|
-
# Fetch latest
|
|
30
|
+
# Fetch latest and detect default branch
|
|
31
31
|
git fetch origin
|
|
32
|
+
DEFAULT_BRANCH=$(git symbolic-ref refs/remotes/origin/HEAD 2>/dev/null | sed 's@^refs/remotes/origin/@@')
|
|
33
|
+
[ -z "$DEFAULT_BRANCH" ] && DEFAULT_BRANCH=$(git rev-parse --verify origin/master >/dev/null 2>&1 && echo master || echo main)
|
|
32
34
|
|
|
33
|
-
# See what's new on
|
|
34
|
-
git log HEAD..origin
|
|
35
|
+
# See what's new on the default branch
|
|
36
|
+
git log HEAD..origin/$DEFAULT_BRANCH --oneline
|
|
35
37
|
```
|
|
36
38
|
|
|
37
|
-
If
|
|
39
|
+
If the default branch has new commits:
|
|
38
40
|
```bash
|
|
39
|
-
git rebase origin
|
|
41
|
+
git rebase origin/$DEFAULT_BRANCH
|
|
40
42
|
```
|
|
41
43
|
|
|
42
44
|
**Conflict resolution:**
|
|
@@ -18,16 +18,34 @@ echo "Current version: $LOCAL_VER"
|
|
|
18
18
|
echo "Repo path: $REPO_PATH"
|
|
19
19
|
```
|
|
20
20
|
|
|
21
|
-
If `REPO_PATH` is empty or the directory doesn't exist,
|
|
22
|
-
|
|
21
|
+
If `REPO_PATH` is empty or the directory doesn't exist, try to find it:
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
# Common locations
|
|
25
|
+
for dir in ~/spartan-ai-toolkit ~/Documents/Code/Spartan/spartan-ai-toolkit ~/Code/spartan-ai-toolkit; do
|
|
26
|
+
[ -d "$dir/toolkit" ] && echo "Found: $dir" && break
|
|
27
|
+
done
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
If still not found, ask the user: "Where did you clone spartan-ai-toolkit?"
|
|
23
31
|
|
|
24
32
|
---
|
|
25
33
|
|
|
26
|
-
## Step 2:
|
|
34
|
+
## Step 2: Detect default branch and check for updates
|
|
27
35
|
|
|
28
36
|
```bash
|
|
29
|
-
cd "$REPO_PATH"
|
|
30
|
-
|
|
37
|
+
cd "$REPO_PATH"
|
|
38
|
+
|
|
39
|
+
# Detect the default branch (master or main)
|
|
40
|
+
DEFAULT_BRANCH=$(git symbolic-ref refs/remotes/origin/HEAD 2>/dev/null | sed 's@^refs/remotes/origin/@@')
|
|
41
|
+
if [ -z "$DEFAULT_BRANCH" ]; then
|
|
42
|
+
# Fallback: check which branch exists
|
|
43
|
+
git rev-parse --verify origin/master >/dev/null 2>&1 && DEFAULT_BRANCH="master" || DEFAULT_BRANCH="main"
|
|
44
|
+
fi
|
|
45
|
+
echo "Default branch: $DEFAULT_BRANCH"
|
|
46
|
+
|
|
47
|
+
git fetch origin "$DEFAULT_BRANCH" --quiet 2>/dev/null
|
|
48
|
+
REMOTE_VER=$(git show "origin/$DEFAULT_BRANCH:toolkit/VERSION" 2>/dev/null || echo "unknown")
|
|
31
49
|
echo "Local: $LOCAL_VER"
|
|
32
50
|
echo "Remote: $REMOTE_VER"
|
|
33
51
|
```
|
|
@@ -56,7 +74,7 @@ Show the user their current packs and ask:
|
|
|
56
74
|
## Step 4: Pull and reinstall
|
|
57
75
|
|
|
58
76
|
```bash
|
|
59
|
-
cd "$REPO_PATH" && git pull origin
|
|
77
|
+
cd "$REPO_PATH" && git pull origin "$DEFAULT_BRANCH"
|
|
60
78
|
```
|
|
61
79
|
|
|
62
80
|
Then run the setup script with saved packs:
|