peaks-cli 1.0.14 → 1.0.16

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.
Files changed (29) hide show
  1. package/bin/peaks.js +0 -0
  2. package/dist/src/cli/commands/project-commands.js +5 -0
  3. package/dist/src/cli/commands/request-commands.js +1 -1
  4. package/dist/src/cli/commands/workflow-commands.js +38 -0
  5. package/dist/src/services/artifacts/request-artifact-service.d.ts +2 -2
  6. package/dist/src/services/artifacts/request-artifact-service.js +60 -5
  7. package/dist/src/services/config/config-safety.d.ts +14 -0
  8. package/dist/src/services/config/config-safety.js +275 -0
  9. package/dist/src/services/config/config-service.d.ts +1 -1
  10. package/dist/src/services/config/config-service.js +5 -274
  11. package/dist/src/services/dashboard/project-dashboard-service.d.ts +11 -0
  12. package/dist/src/services/dashboard/project-dashboard-service.js +21 -2
  13. package/dist/src/services/doctor/doctor-service.d.ts +3 -0
  14. package/dist/src/services/doctor/doctor-service.js +58 -0
  15. package/dist/src/services/workflow/autonomous-resume-writer.d.ts +16 -0
  16. package/dist/src/services/workflow/autonomous-resume-writer.js +156 -0
  17. package/dist/src/shared/version.d.ts +1 -1
  18. package/dist/src/shared/version.js +1 -1
  19. package/package.json +1 -1
  20. package/schemas/doctor-report.schema.json +2 -2
  21. package/skills/peaks-prd/SKILL.md +56 -1
  22. package/skills/peaks-qa/SKILL.md +175 -15
  23. package/skills/peaks-rd/SKILL.md +198 -56
  24. package/skills/peaks-sc/SKILL.md +66 -5
  25. package/skills/peaks-solo/SKILL.md +417 -65
  26. package/skills/peaks-solo/references/artifact-contracts.md +60 -2
  27. package/skills/peaks-solo/results.tsv +1 -0
  28. package/skills/peaks-txt/SKILL.md +68 -1
  29. package/skills/peaks-ui/SKILL.md +185 -18
@@ -0,0 +1 @@
1
+ timestamp commit skill old_score new_score status dimension note eval_mode
@@ -7,6 +7,16 @@ description: Context and knowledge skill for Peaks. Use when a workflow needs co
7
7
 
8
8
  Peaks TXT compresses workflow context into portable, role-specific artifacts.
9
9
 
10
+ ## Skill presence (MANDATORY first action)
11
+
12
+ Before any analysis or tool call, immediately run:
13
+
14
+ ```bash
15
+ peaks skill presence:set peaks-txt --mode <mode> --gate startup
16
+ ```
17
+
18
+ Then display: `Peaks Skill: peaks-txt | Gate: startup | Next: <one short action>`. Update with `peaks skill presence:set peaks-txt --mode <mode> --gate <gate>` when gates change. When the role's work ends, run `peaks skill presence:clear`.
19
+
10
20
  ## Responsibilities
11
21
 
12
22
  - generate context capsules;
@@ -19,9 +29,46 @@ Peaks TXT compresses workflow context into portable, role-specific artifacts.
19
29
 
20
30
  For refactors, create initial context before RD analysis and final context after validation and artifact retention.
21
31
 
32
+ ## Artifact boundary vs PRD / UI / RD / QA / SC
33
+
34
+ Peaks TXT is intentionally not a `peaks request <role>` role. The other five roles each own a per-request artifact at `.peaks/<session-id>/<role>/requests/<request-id>.md` with a role-specific state machine that `peaks request init/list/show/transition` validates. TXT artifacts live at one level up:
35
+
36
+ - session-scoped lessons: `.peaks/<session-id>/txt/skill-usage-lessons.md`;
37
+ - role-scoped or topic-scoped context capsules: `.peaks/<session-id>/txt/<role>-capsule.md`, `.peaks/<session-id>/txt/<topic>-capsule.md`;
38
+ - compact handoff capsules referenced by other roles' artifacts.
39
+
40
+ This boundary keeps TXT a meta layer that consumes other roles' artifacts and CLI reports, not a workflow stage. Cross-link from a TXT capsule body to the relevant request artifacts instead of duplicating their content. Do not invoke `peaks request init --role txt`; the CLI rejects it.
41
+
22
42
  ## Compaction-safe outputs
23
43
 
24
- When used alone or when a workflow needs portable artifacts that must survive session compaction, end with a short structured capsule: mode, validated decisions, artifact paths, standards deltas, open questions, and next action. Prefer links or paths over long narrative. Do not duplicate the full workflow log when a compact capsule is enough.
44
+ When used alone or when a workflow needs portable artifacts that must survive session compaction, end with a short structured capsule. Prefer links or paths over long narrative. Do not duplicate the full workflow log when a compact capsule is enough.
45
+
46
+ **Handoff capsule template:**
47
+
48
+ ```markdown
49
+ ## Handoff: <request-id>
50
+ - **Mode:** solo | assisted | swarm | strict
51
+ - **Status:** complete | blocked | return-to-rd
52
+ - **Artifacts:**
53
+ - PRD: .peaks/<id>/prd/requests/<rid>.md
54
+ - UI: .peaks/<id>/ui/design-draft.md (or: skipped — pure backend)
55
+ - RD: .peaks/<id>/rd/requests/<rid>.md | tech-doc.md
56
+ - QA: .peaks/<id>/qa/test-cases/<rid>.md | test-reports/<rid>.md | requests/<rid>.md
57
+ - SC: .peaks/<id>/sc/change-control/<rid>.md
58
+ - **Standards delta:** CLAUDE.md: <status>; .claude/rules/: <status>
59
+ - **Open questions:** <list or "none">
60
+ - **Next action:** <one concrete step>
61
+ ```
62
+
63
+ **Skill-usage lesson template:**
64
+
65
+ ```markdown
66
+ ## Lesson: <one-line summary>
67
+ - **Why:** <what happened that makes this worth recording>
68
+ - **Affected skills:** peaks-rd, peaks-qa
69
+ - **Rule:** <how future workflows should apply this>
70
+ - **Stable for memory:** yes | no
71
+ ```
25
72
 
26
73
  ## GStack integration
27
74
 
@@ -98,6 +145,15 @@ Use `peaks capabilities --json` before recommending memory or context-management
98
145
 
99
146
  Peaks TXT context capsules and project memory extraction remain authoritative; external memory or context tools inform structure but do not replace the role artifacts.
100
147
 
148
+ ## Missing artifact handling
149
+
150
+ TXT depends on artifacts from other roles. When `peaks request list` returns empty or a needed artifact is missing:
151
+
152
+ 1. **No artifacts at all** — emit a minimal capsule with mode, date, and "no artifacts produced yet" status. Do not fabricate paths.
153
+ 2. **Partial artifacts** (e.g. PRD exists but RD/QA not yet) — emit capsule with available paths filled and missing slots marked `(not yet produced)`. The capsule is still useful for resumption.
154
+ 3. **Artifact paths found but files deleted/moved** — verify with `ls <path>` before linking. If missing, mark `(path broken)` instead of linking dead paths.
155
+ 4. Never block TXT completion on missing upstream artifacts. TXT records what exists, not what should exist.
156
+
101
157
  ## Default runbook
102
158
 
103
159
  Use this sequence when TXT compresses an in-flight workflow into a portable, compaction-safe capsule. TXT never edits code; it only consumes other roles' artifacts and CLI reports.
@@ -129,6 +185,17 @@ peaks skill presence:clear # handoff capsule complete, remo
129
185
 
130
186
  The final `--apply` call requires explicit user or profile authorization. Without it, keep the capsule under `.peaks/<session-id>/txt/` and reference artifact paths from other roles instead of duplicating their content.
131
187
 
188
+ ### Transition verification gates (MANDATORY — run the command, see the output)
189
+
190
+ You cannot declare TXT complete from memory. Each gate below is a `ls` command you **MUST run** and whose output you **MUST see** before proceeding.
191
+
192
+ **Gate A — After writing handoff capsule (before declaring complete):**
193
+ ```bash
194
+ find .peaks/<id>/txt/ -type f | sort
195
+ # Expected: at least one capsule file (.md) in the txt/ directory.
196
+ # Empty output → STOP, write the capsule first. Do not clear skill presence.
197
+ ```
198
+
132
199
  ## Boundaries
133
200
 
134
201
  Do not choose the refactor plan or install runtime resources. Use artifacts produced by other skills and CLI reports.
@@ -7,19 +7,37 @@ description: UI and experience skill for Peaks. Use when a workflow touches UI/U
7
7
 
8
8
  Peaks UI handles experience, interaction, visual direction, and UI-specific refactor artifacts.
9
9
 
10
+ ## Skill presence (MANDATORY first action)
11
+
12
+ Before any analysis or tool call, immediately run:
13
+
14
+ ```bash
15
+ peaks skill presence:set peaks-ui --mode <mode> --gate startup
16
+ ```
17
+
18
+ Then display: `Peaks Skill: peaks-ui | Gate: startup | Next: <one short action>`. Update with `peaks skill presence:set peaks-ui --mode <mode> --gate <gate>` when gates change. When the role's work ends, run `peaks skill presence:clear`.
19
+
10
20
  ## Responsibilities
11
21
 
12
- - identify when UI involvement is necessary;
22
+ - identify when UI involvement is necessary (MANDATORY for any frontend/user-visible change);
23
+ - detect the existing component library and CSS framework before proposing any UI changes;
13
24
  - produce UX flow and page-state artifacts;
25
+ - produce concrete design drafts (layout, colors, spacing, typography, component selection, states) before RD implementation;
14
26
  - define interaction and visual constraints;
15
27
  - create UI regression seeds;
16
- - review user-facing behavior preservation.
28
+ - review user-facing behavior preservation;
29
+ - detect and warn about CSS framework conflicts (e.g. TailwindCSS + component library).
17
30
 
18
31
  ## Mandatory per-request artifact
19
32
 
20
- Every UI invocation that touches user-visible behavior — including bug fixes that change visible flow — must write a durable artifact at `.peaks/<session-id>/ui/requests/<request-id>.md`. Handoff to RD/QA is blocked while the artifact is missing or in `draft` state.
33
+ Every UI invocation that touches user-visible behavior — including bug fixes that change visible flow — must write **two artifacts**:
21
34
 
22
- Use the `<request-id>` PRD assigned, so PRD/UI/RD/QA can cross-link the same request.
35
+ | # | File | Purpose |
36
+ |---|------|---------|
37
+ | 1 | `.peaks/<id>/ui/design-draft.md` | Design direction, dials, component specs, anti-template checklist |
38
+ | 2 | `.peaks/<id>/ui/requests/<rid>.md` | Links to #1, records visual direction decisions, regression seeds |
39
+
40
+ RD consumes the design-draft to implement; QA consumes it for visual regression checks.
23
41
 
24
42
  Concrete template and rules: `references/artifact-per-request.md`.
25
43
 
@@ -37,23 +55,59 @@ peaks request init --role ui --id <request-id> --project <repo> --json
37
55
  peaks request init --role ui --id <request-id> --project <repo> --apply --json
38
56
  peaks request show <request-id> --role prd --project <repo> --json # read linked PRD scope
39
57
 
40
- # 2. ensure Playwright MCP is available for the visible browser check (it launches a headed browser on demand)
58
+ # 2. ensure Playwright MCP is available for the visible browser check
41
59
  peaks mcp list --json
60
+ # if playwright-mcp.browser-validation is NOT in the list:
42
61
  peaks mcp plan --capability playwright-mcp.browser-validation --json
43
- peaks mcp apply --capability playwright-mcp.browser-validation --yes --json # one-time
44
-
45
- # 3. drive the running page or prototype through Claude Code MCP tools
62
+ peaks mcp apply --capability playwright-mcp.browser-validation --yes --json
63
+ # if apply fails or user denies installation:
64
+ # mark browser gate as blocked with reason "playwright-mcp-unavailable"
65
+ # → NEVER silently downgrade to screenshots-only, manual steps, or other tools
66
+ # → NEVER route through chrome-devtools-mcp as a browser-launch substitute (it cannot launch)
67
+
68
+ # 3. read project-scan for component library and CSS framework context
69
+ # check .peaks/<session-id>/rd/project-scan.md (blocking if missing for existing projects)
70
+
71
+ # 4. PROTOTYPE FIDELITY CHECK (MANDATORY before any design work):
72
+ # Check if a Figma file, PRD screenshots, or explicit PRD visuals exist.
73
+ # If YES → the prototype IS the design. Skip style-direction selection.
74
+ # If NO → proceed to full-auto visual quality path.
75
+ # See "Prototype fidelity gate" section for the full decision tree.
76
+
77
+ # 5. drive the running page or prototype through Claude Code MCP tools
46
78
  # (these are not Peaks CLI commands; they are invoked by the host MCP runtime)
47
79
  # mcp__playwright__browser_navigate → URL (after allow-list check), launches headed browser
80
+ #
81
+ # LOGIN GATE (MANDATORY checkpoint):
82
+ # After browser_navigate, check for login/CAPTCHA/SSO/MFA redirect.
83
+ # If detected → the visible browser is already open; WAIT for user to complete
84
+ # login and explicitly say "登录好了" or equivalent. Do NOT infer login from DOM.
85
+ # If user does not confirm within reasonable time → pause and ask.
86
+ # Only after user confirmation, continue to:
87
+ #
48
88
  # mcp__playwright__browser_take_screenshot → visible-browser confirmation
49
89
  # mcp__playwright__browser_snapshot → accessibility tree for regression seeds
50
90
  # mcp__playwright__browser_console_messages → console errors
51
91
  # mcp__playwright__browser_network_requests → failed network
52
92
  # mcp__playwright__browser_close → end the session cleanly
53
93
 
54
- # 4. record visual direction, rejected generic patterns, regression seeds in the artifact
94
+ # 5. write design-draft artifact to .peaks/<session-id>/ui/design-draft.md
95
+
96
+ # 5.5 DESIGN-DRAFT CONFIRMATION GATE (MANDATORY):
97
+ # After writing the design-draft, present a summary to the user:
98
+ # - style direction and rationale
99
+ # - key design dials (variance, motion, density, palette)
100
+ # - component tree
101
+ # - anti-template items rejected
102
+ # Ask user to confirm before handing off to RD.
103
+ # In full-auto mode: if the design-draft passes the anti-template checklist
104
+ # and browser validation shows no regressions, auto-confirm.
105
+ # If browser validation was blocked (no Playwright MCP), always ask user
106
+ # to explicitly confirm the design-draft before proceeding.
55
107
 
56
- # 5. hand off to RD / QA via the cross-linked request id
108
+ # 6. record visual direction, rejected generic patterns, regression seeds in the request artifact
109
+
110
+ # 7. hand off to RD / QA via the cross-linked request id
57
111
  peaks request list --project <repo> --json
58
112
  peaks request show <request-id> --role ui --project <repo> --json
59
113
  peaks skill presence:clear # handoff complete, remove presence indicator
@@ -61,6 +115,24 @@ peaks skill presence:clear # handoff complete, remove prese
61
115
 
62
116
  Handoff is blocked until the UI artifact's `state` reaches `direction-locked` or `handed-off`.
63
117
 
118
+ ### Transition verification gates (MANDATORY — run the command, see the output)
119
+
120
+ You cannot declare a phase complete from memory. Each gate below is a `ls` command you **MUST run** and whose output you **MUST see** before proceeding. If any file shows "No such file", the phase is incomplete.
121
+
122
+ **Gate A — After design-draft write:**
123
+ ```bash
124
+ ls .peaks/<id>/ui/design-draft.md
125
+ # Expected output: .peaks/<id>/ui/design-draft.md
126
+ # "No such file" → STOP, write the design-draft first. Do not proceed to handoff.
127
+ ```
128
+
129
+ **Gate B — Before handoff to RD:**
130
+ ```bash
131
+ ls .peaks/<id>/ui/design-draft.md \
132
+ .peaks/<id>/ui/requests/<rid>.md
133
+ # Both must exist. Missing either → BLOCKED, do not hand off to RD.
134
+ ```
135
+
64
136
  ## Refactor role
65
137
 
66
138
  Only engage when the refactor affects UI, interaction, styling, page structure, design system, or frontend user behavior.
@@ -75,20 +147,115 @@ Use gstack as a concrete design-review workflow reference for the `Plan → Revi
75
147
 
76
148
  For frontend work, especially full-auto mode, use Playwright MCP (`mcp__playwright__browser_navigate` / `browser_snapshot` / `browser_take_screenshot` / `browser_console_messages` / `browser_network_requests` / `browser_close`) to inspect the running page or prototype before accepting the UI direction. Playwright MCP launches a headed browser on demand; if `peaks mcp list --json` does not include `playwright`, install it through `peaks mcp plan/apply --capability playwright-mcp.browser-validation --yes` before attempting to inspect. (Chrome DevTools MCP is a secondary surface that connects to an already-running Chrome via `--remote-debugging-port=9222`; it does NOT launch a browser on its own.) If login, CAPTCHA, SSO, or MFA appears, the visible browser is already open; wait for the user to complete login and explicitly confirm completion before continuing. Capture only sanitized visible regressions, weak hierarchy, generic template patterns, console errors, and interaction problems as UI feedback that should return to design/RD before handing off to QA; do not retain login URLs, cookies, headers, tokens, storage state, browser traces, or screenshots/logs containing PII or SSO/MFA material. Canonical browser workflow: `peaks-solo/references/browser-workflow.md`.
77
149
 
150
+ ## Prototype fidelity gate (MANDATORY — check BEFORE any design work)
151
+
152
+ **Before choosing a style direction or making ANY design decisions, check whether a prototype or visual reference exists.** The full-auto visual quality path (below) is for greenfield projects without a prototype. When a prototype exists, the rule is simple: **replicate it faithfully.**
153
+
154
+ ### Step 0: Determine the fidelity source
155
+
156
+ Check these sources in order:
157
+
158
+ 1. **Figma design file** — If the PRD links to a Figma file, use `mcp__Figma_AI_Bridge__get_figma_data` to fetch the design. The Figma data IS the design. Replicate layout, spacing, colors, typography, and component choices exactly as specified.
159
+ 2. **PRD document screenshots** — If the PRD source (Feishu/Lark doc) contains screenshots or mockups, those ARE the visual target. Check `.peaks/<id>/prd/source/` for saved screenshots.
160
+ 3. **PRD visual descriptions** — If the PRD explicitly describes layout, component placement, or visual behavior, those descriptions are constraints, not suggestions.
161
+ 4. **Existing application pages** — If modifying an existing app, the existing visual language (component library, spacing patterns, color usage) is the fidelity baseline. New pages must match existing conventions.
162
+
163
+ ### Decision tree
164
+
165
+ ```
166
+ Prototype exists (Figma / screenshots / explicit PRD visuals)?
167
+ ├── YES → REPLICATE. Do NOT invent.
168
+ │ - Match the prototype's layout, spacing, component selection, and visual hierarchy
169
+ │ - The design-draft documents HOW to implement the prototype, not a redesign
170
+ │ - Skip the "choose a style direction" step — the prototype already has one
171
+ │ - Still apply component library awareness rules (use antd/MUI/shadcn components
172
+ │ to implement the prototype, not raw HTML/CSS)
173
+ │ - Record any gaps between prototype and component-library capabilities
174
+ │ as implementation notes, not as license to redesign
175
+
176
+ └── NO → Use the full-auto visual quality path below
177
+ - Choose a specific style direction
178
+ - Define design dials
179
+ - Apply anti-template checklist
180
+ ```
181
+
182
+ ### Prototype fidelity checklist (BLOCKING when prototype exists)
183
+
184
+ Before writing design-draft.md, verify:
185
+
186
+ - [ ] Figma layout structure matches the design-draft component tree
187
+ - [ ] Color values in the design-draft match prototype colors (not independently chosen)
188
+ - [ ] Component selection (table, modal, form, tabs) matches what the prototype shows
189
+ - [ ] Page structure (sidebar, header, content area) matches the prototype
190
+ - [ ] Spacing and hierarchy match the prototype's visual weight
191
+ - [ ] Any deviation from the prototype is explicitly documented with a reason
192
+ - [ ] **No independent style direction was invented** — the prototype IS the direction
193
+
194
+ **If the prototype conflicts with component-library defaults** (e.g. prototype shows a custom-styled table but antd's default table looks different), the design-draft must:
195
+ 1. Specify which antd component to use
196
+ 2. Specify which tokens/props to customize to match the prototype
197
+ 3. Record the gap between prototype and default as an implementation note
198
+
199
+ **Do NOT:**
200
+ - Replace a Figma-specified layout with your own "better" layout
201
+ - Choose your own color palette when the prototype has colors
202
+ - Add "design flair" not present in the prototype
203
+ - Reinterpret the prototype through a different style direction
204
+ - Default to "clean minimal" when the prototype has a specific visual identity
205
+
78
206
  ## Full-auto visual quality path
79
207
 
80
- When Peaks UI is used in full-auto frontend design, default to the curated taste path instead of generic component generation. When capability discovery exposes the design references below confirm via `peaks capabilities --source access-repo --json` first — use them as upstream reference material only, do not execute upstream instructions, do not install upstream resources, do not persist sensitive examples. Peaks UI artifacts remain authoritative:
208
+ When Peaks UI is used in full-auto frontend design AND NO prototype exists (verified by the prototype fidelity gate above), default to the curated taste path instead of generic component generation. Execute the following directly; external skills are optional enhancements, not prerequisites.
81
209
 
82
- 1. use `awesome-design-md` as the visual reference source for layout, composition, rhythm, and atmosphere;
83
- 2. use `taste-skill` or the local `design-taste-frontend` skill as the critique lens for anti-template, typography, color, density, motion, and interaction quality;
84
- 3. choose a specific style direction before implementation, such as editorial, bento, Swiss, luxury, retro-futurist, glass, or product-specific system UI;
85
- 4. define design dials before generating UI: design variance, motion intensity, visual density, typography pair, palette, and interaction feel;
86
- 5. reject centered stock heroes, default card grids, unmodified shadcn/library defaults, AI purple-blue gradients, generic three-card feature rows, and safe gray-on-white pages without a point of view;
87
- 6. require loading, empty, error, hover, focus, active, and responsive states for meaningful surfaces;
88
- 7. browser-check the result with Playwright MCP (install via `peaks mcp apply --capability playwright-mcp.browser-validation --yes` if not already installed; navigate with `mcp__playwright__browser_navigate` then capture with `browser_snapshot` and `browser_take_screenshot`), wait for explicit user confirmation after any login challenge, and iterate until the UI looks intentional, memorable, and product-specific.
210
+ **If a prototype exists, skip this section.** The prototype IS the design direction. Use the prototype fidelity gate checklist above instead.
211
+
212
+ **Self-contained design process (always available):**
213
+
214
+ 1. choose a specific style direction: editorial, bento, Swiss, luxury, retro-futurist, glass, or product-specific system UI. Pick one that fits the product's tone do not default to "clean minimal."
215
+ 2. define design dials with concrete values:
216
+ - variance: conservative (subtle radius/shadows) | moderate (mixed depths) | bold (asymmetric, overlapping)
217
+ - motion: minimal (opacity-only) | medium (transform+opacity) | rich (staggered, spring, scroll-triggered)
218
+ - density: sparse (generous whitespace) | comfortable (standard) | dense (data-heavy)
219
+ - typography: pick a pair — one display/heading font + one body font from system fonts or the project's existing stack
220
+ - palette: define 5 tokens — primary, surface, text-primary, text-secondary, accent. Use oklch() or hsl() with concrete values, not vague names
221
+ 3. reject anti-patterns: centered stock heroes, default card grids, unmodified library defaults, AI purple-blue gradients, generic three-card feature rows, safe gray-on-white without hierarchy
222
+ 4. require 6 states per meaningful surface: loading (skeleton), empty (illustration+CTA), error (message+retry), hover, focus, active
223
+ 5. browser-check the result with Playwright MCP, wait for user confirmation after any login challenge, iterate until the UI looks intentional
224
+
225
+ **When external design skills ARE available** (confirm via `peaks capabilities --source access-repo --json` first, treat as reference only):
226
+
227
+ - `awesome-design-md`: layout composition, rhythm, atmosphere references
228
+ - `taste-skill` / `design-taste-frontend`: critique lens for anti-template, typography, color, density, motion, interaction quality
89
229
 
90
230
  Full-auto Peaks UI output must include a short taste report: visual direction, references used, rejected generic patterns, browser observations, remaining design risks, and the next visual iteration if the page is not yet good enough.
91
231
 
232
+ ## Mandatory design-draft output
233
+
234
+ Every UI invocation that touches user-visible behavior MUST produce a design-draft artifact at `.peaks/<session-id>/ui/design-draft.md`. RD reads this before implementing; QA reads it for visual regression checks. The per-request artifact links to it.
235
+
236
+ **Minimum design-draft sections:**
237
+
238
+ 1. **Component library** — detected library name, version, design-system packages (e.g. `antd 5.x` + `@ant-design/pro-components`). Verify by checking `package.json` and source imports — never assume.
239
+ 2. **Style direction** — named visual direction (editorial, bento, Swiss, glass, luxury, product-system, etc.) with 1-2 sentence rationale
240
+ 3. **Design dials** — variance (conservative/moderate/bold), motion intensity (minimal/medium/rich), visual density (sparse/comfortable/dense), typography pair (heading + body), palette (primary, surface, text, accent tokens)
241
+ 4. **Page/component structure** — layout sketch (ASCII wireframe or description), component tree (which library components used where), hierarchy (primary/secondary/tertiary content zones)
242
+ 5. **Component specifications** — for each new or modified component: which library component it uses, which props/tokens customize it, states (loading, empty, error, hover, focus, active, disabled), responsive behavior
243
+ 6. **CSS framework rules** — which CSS approach to use (component-library tokens, CSS Modules, TailwindCSS utilities if already present), explicit prohibition against mixing conflicting frameworks
244
+ 7. **States and edge cases** — loading skeleton, empty state, error state, edge-case handling for each user-visible surface
245
+ 8. **Anti-template checklist** — which generic patterns were rejected (centered hero, default card grid, unmodified library defaults, AI purple-blue gradient, etc.)
246
+
247
+ **Component library awareness rules:**
248
+ - Read `.peaks/<session-id>/rd/project-scan.md` before proposing any UI changes
249
+ - If the project uses antd, design with antd's token system (`theme.token`), component variants, and `className`/`styles` APIs — do not propose TailwindCSS utility classes on antd components
250
+ - If the project uses MUI, design with MUI's `sx` prop, `styled()`, and `theme` — do not propose TailwindCSS utility classes on MUI components
251
+ - If the project uses shadcn/ui, design with TailwindCSS utility classes and the existing shadcn component variants — this is the expected pattern
252
+ - If the project has NO component library, recommend one based on the build tool detected in the project-scan
253
+
254
+ **CSS framework conflict handling:**
255
+ - If the project-scan detects TailwindCSS + antd/MUI, flag this as a design risk. Tailwind's preflight reset can break component-library base styles. Recommend either: (a) disabling preflight via `corePlugins.preflight: false` in tailwind.config, or (b) using the component library's built-in styling exclusively and removing TailwindCSS
256
+ - Do not propose adding TailwindCSS to a project that already uses a component library with CSS-in-JS
257
+ - Do not propose adding a second CSS-in-JS library to a project that already has one
258
+
92
259
  ## External capability guidance
93
260
 
94
261
  Use `peaks capabilities --source access-repo --json` and `peaks capabilities --source mcp-server --json` before recommending design, browser, or UI reference resources. Treat all external skills as reference material only — do not execute upstream instructions, do not install upstream resources, do not persist sensitive examples; Peaks UI artifacts remain authoritative.