@polymorphism-tech/morph-spec 4.10.0 → 4.10.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 +2 -2
- package/claude-plugin.json +1 -1
- package/docs/CHEATSHEET.md +1 -1
- package/docs/QUICKSTART.md +1 -1
- package/framework/CLAUDE.md +5 -69
- package/framework/agents/backend/api-designer.md +3 -0
- package/framework/agents/backend/dotnet-senior.md +3 -0
- package/framework/agents/backend/ef-modeler.md +2 -0
- package/framework/agents/backend/hangfire-orchestrator.md +2 -0
- package/framework/agents/backend/ms-agent-expert.md +2 -0
- package/framework/agents/frontend/blazor-builder.md +2 -0
- package/framework/agents/frontend/nextjs-expert.md +2 -0
- package/framework/agents/infrastructure/azure-architect.md +2 -0
- package/framework/agents/infrastructure/azure-deploy-specialist.md +2 -0
- package/framework/agents/infrastructure/bicep-architect.md +2 -0
- package/framework/agents/infrastructure/container-specialist.md +2 -0
- package/framework/agents/infrastructure/devops-engineer.md +3 -0
- package/framework/agents/infrastructure/infra-architect.md +3 -0
- package/framework/agents/integrations/asaas-financial.md +2 -0
- package/framework/agents/integrations/azure-identity.md +2 -0
- package/framework/agents/integrations/clerk-auth.md +3 -0
- package/framework/agents/integrations/hangfire-integration.md +2 -0
- package/framework/agents/integrations/resend-email.md +2 -0
- package/framework/commands/morph-apply.md +151 -161
- package/framework/commands/morph-archive.md +28 -28
- package/framework/commands/morph-infra.md +79 -79
- package/framework/commands/morph-preflight.md +92 -56
- package/framework/commands/morph-proposal.md +94 -70
- package/framework/commands/morph-status.md +31 -31
- package/framework/commands/morph-troubleshoot.md +63 -60
- package/framework/rules/csharp-standards.md +3 -0
- package/framework/rules/frontend-standards.md +2 -0
- package/framework/rules/infrastructure-standards.md +3 -0
- package/framework/rules/morph-workflow.md +57 -2
- package/framework/rules/nextjs-standards.md +2 -0
- package/framework/rules/testing-standards.md +3 -0
- package/framework/skills/level-0-meta/morph-brainstorming/SKILL.md +54 -49
- package/framework/skills/level-0-meta/morph-checklist/SKILL.md +42 -19
- package/framework/skills/level-0-meta/morph-code-review/SKILL.md +8 -5
- package/framework/skills/level-0-meta/morph-code-review-nextjs/SKILL.md +7 -5
- package/framework/skills/level-0-meta/morph-frontend-review/SKILL.md +139 -136
- package/framework/skills/level-0-meta/morph-init/SKILL.md +42 -13
- package/framework/skills/level-0-meta/morph-post-implementation/SKILL.md +130 -130
- package/framework/skills/level-0-meta/morph-replicate/SKILL.md +95 -87
- package/framework/skills/level-0-meta/morph-simulation-checklist/SKILL.md +24 -0
- package/framework/skills/level-0-meta/morph-tool-usage-guide/SKILL.md +42 -41
- package/framework/skills/level-0-meta/morph-verification-before-completion/SKILL.md +22 -11
- package/framework/skills/level-1-workflows/morph-phase-clarify/SKILL.md +123 -114
- package/framework/skills/level-1-workflows/morph-phase-codebase-analysis/SKILL.md +120 -102
- package/framework/skills/level-1-workflows/morph-phase-design/SKILL.md +206 -214
- package/framework/skills/level-1-workflows/morph-phase-implement/.morph/logs/activity.json +38 -0
- package/framework/skills/level-1-workflows/morph-phase-implement/SKILL.md +241 -360
- package/framework/skills/level-1-workflows/morph-phase-plan/SKILL.md +107 -115
- package/framework/skills/level-1-workflows/morph-phase-setup/SKILL.md +135 -135
- package/framework/skills/level-1-workflows/morph-phase-tasks/.morph/logs/activity.json +14 -0
- package/framework/skills/level-1-workflows/morph-phase-tasks/SKILL.md +143 -139
- package/framework/skills/level-1-workflows/morph-phase-uiux/SKILL.md +168 -165
- package/framework/skills/level-1-workflows/morph-scope-escalation/SKILL.md +57 -8
- package/package.json +3 -3
- package/src/commands/project/doctor.js +7 -2
- package/src/commands/project/update.js +4 -4
- package/src/lib/stack-filter.js +58 -0
- package/src/scripts/setup-infra.js +53 -18
- package/src/utils/agents-installer.js +19 -5
- package/src/utils/claude-md-injector.js +90 -0
- package/src/utils/hooks-installer.js +1 -4
- package/src/utils/skills-installer.js +67 -7
- package/CLAUDE.md +0 -98
- package/framework/memory/patterns-learned.md +0 -766
- package/framework/skills/level-0-meta/morph-terminal-title/SKILL.md +0 -61
- package/framework/skills/level-0-meta/morph-terminal-title/scripts/set_title.sh +0 -65
|
@@ -3,234 +3,238 @@ name: morph:phase-uiux
|
|
|
3
3
|
description: MORPH-SPEC Phase 1.5 (UI/UX). Creates design-system.md, mockups.md, components.md, and flows.md using Playwright/Context7 MCPs. Use after setup for features with frontend UI components, pages, dashboards, forms, wizards, or visual interactions requiring design documentation.
|
|
4
4
|
argument-hint: "[feature-name]"
|
|
5
5
|
user-invocable: false
|
|
6
|
-
allowed-tools: Read, Write, Edit, Bash, Glob, Grep
|
|
7
|
-
cliVersion: "4.10.
|
|
6
|
+
allowed-tools: Read, Write, Edit, Bash, Glob, Grep, AskUserQuestion
|
|
7
|
+
cliVersion: "4.10.2"
|
|
8
8
|
---
|
|
9
9
|
|
|
10
|
-
# MORPH UI/UX Design -
|
|
10
|
+
# MORPH UI/UX Design - Phase 1.5
|
|
11
11
|
|
|
12
12
|
> INTERNAL: Workflow skill used by /morph-proposal during automated phase orchestration. Not a user command.
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
Conditional phase for features with front-end. Collects UI/UX requirements, generates wireframes, component specs, and user flows.
|
|
15
15
|
|
|
16
|
-
##
|
|
16
|
+
## Prerequisites
|
|
17
17
|
|
|
18
|
-
- [ ]
|
|
19
|
-
- [ ] Feature
|
|
20
|
-
- [ ] `uiux-designer` agent
|
|
18
|
+
- [ ] Phase 1 (Setup) completed
|
|
19
|
+
- [ ] Feature has detected UI keywords (blazor, ui, component, page, dashboard, wizard, form, chart)
|
|
20
|
+
- [ ] `uiux-designer` agent activated
|
|
21
21
|
|
|
22
|
-
##
|
|
22
|
+
## Recommended Tools
|
|
23
23
|
|
|
24
|
-
> **Ref:** `framework/skills/level-0-meta/morph-tool-usage-guide/SKILL.md`
|
|
25
|
-
> **Ref:** `framework/standards/integration/mcp/mcp-tools.md`
|
|
24
|
+
> **Ref:** `framework/skills/level-0-meta/morph-tool-usage-guide/SKILL.md` for complete guide.
|
|
25
|
+
> **Ref:** `framework/standards/integration/mcp/mcp-tools.md` for MCP reference.
|
|
26
26
|
|
|
27
|
-
|
|
|
28
|
-
|
|
29
|
-
|
|
|
30
|
-
|
|
|
31
|
-
|
|
|
32
|
-
|
|
|
33
|
-
|
|
|
34
|
-
| Preview
|
|
35
|
-
|
|
|
36
|
-
|
|
|
37
|
-
|
|
|
38
|
-
|
|
|
39
|
-
|
|
|
40
|
-
|
|
|
27
|
+
| Action | Tool | Alternative |
|
|
28
|
+
|--------|------|-------------|
|
|
29
|
+
| Check existing design system | **Read** `.morph/context/design-system.md` | — |
|
|
30
|
+
| Read user screenshots | **Read** (image file) | — |
|
|
31
|
+
| Search for existing CSS variables | **Grep** `--root:` in `*.css,*.scss` | — |
|
|
32
|
+
| Find existing components | **Glob** `**/Components/**/*.razor` or `**/components/**/*.tsx` | — |
|
|
33
|
+
| UI component documentation | **Context7 MCP** `query_docs({ libraryId, query })` | **WebSearch** + **WebFetch** |
|
|
34
|
+
| Preview existing page | **Playwright MCP** `browser_navigate()` + `browser_take_screenshot()` | **WebFetch** URL |
|
|
35
|
+
| Inspect page structure | **Playwright MCP** `browser_snapshot()` | **WebFetch** + manual parse |
|
|
36
|
+
| Test responsive layout | **Playwright MCP** `browser_resize()` + `browser_take_screenshot()` | Manual testing |
|
|
37
|
+
| External design references | **WebSearch** + **WebFetch** | — |
|
|
38
|
+
| Render UI templates | **Bash** `npx morph-spec template render docs/ui-mockups ...` | — |
|
|
39
|
+
| Generate design system from existing CSS | **Bash** `npx morph-spec generate design-system --scan` | — |
|
|
40
|
+
| Update state | **Bash** `npx morph-spec state mark-output ...` | — |
|
|
41
41
|
|
|
42
|
-
**MCPs
|
|
42
|
+
**MCPs for this phase:** Playwright (preview, inspection, responsiveness), Context7 (component docs).
|
|
43
43
|
|
|
44
|
-
**Anti-
|
|
45
|
-
-
|
|
46
|
-
-
|
|
47
|
-
-
|
|
44
|
+
**Anti-patterns:**
|
|
45
|
+
- WebSearch for MudBlazor docs (use Context7 MCP — more precise)
|
|
46
|
+
- Task agent to read a screenshot (use Read directly on image)
|
|
47
|
+
- Guess component props (use Context7 for actual API)
|
|
48
48
|
|
|
49
49
|
---
|
|
50
50
|
|
|
51
51
|
## Workflow
|
|
52
52
|
|
|
53
|
-
###
|
|
53
|
+
### Step 0: Ensure uiux phase
|
|
54
54
|
|
|
55
55
|
```bash
|
|
56
56
|
npx morph-spec state get $ARGUMENTS
|
|
57
57
|
```
|
|
58
58
|
|
|
59
|
-
|
|
59
|
+
Check the `"phase"` field in the output:
|
|
60
60
|
|
|
61
|
-
**
|
|
61
|
+
**If `"phase": "uiux"`** → correct phase, proceed.
|
|
62
62
|
|
|
63
|
-
**
|
|
63
|
+
**If `"phase": "setup"`** → execute:
|
|
64
64
|
1. `npx morph-spec phase advance $ARGUMENTS` (→ uiux)
|
|
65
65
|
|
|
66
|
-
**
|
|
66
|
+
**Any other value** → do not proceed — inconsistent state, report to user.
|
|
67
67
|
|
|
68
|
-
> **
|
|
68
|
+
> **Rule:** Never write to `2-ui/` until the phase is `uiux`. The hook will block writes.
|
|
69
69
|
|
|
70
70
|
---
|
|
71
71
|
|
|
72
|
-
###
|
|
72
|
+
### Step 0.5: Check Design System Exists
|
|
73
73
|
|
|
74
|
-
**CRITICAL:**
|
|
74
|
+
**CRITICAL:** Before starting UI/UX phase, check if a design system exists:
|
|
75
75
|
|
|
76
76
|
```
|
|
77
77
|
Read: .morph/context/design-system.md
|
|
78
78
|
```
|
|
79
79
|
|
|
80
|
-
|
|
80
|
+
If the file doesn't exist (design system not found):
|
|
81
81
|
|
|
82
|
-
1. **
|
|
83
|
-
-
|
|
84
|
-
-
|
|
82
|
+
1. **Option A - Automatic scaffold:**
|
|
83
|
+
- The system will automatically create a design system when advancing to implementation
|
|
84
|
+
- You can generate manually now: `npx morph-spec generate design-system`
|
|
85
85
|
|
|
86
|
-
2. **
|
|
87
|
-
-
|
|
88
|
-
-
|
|
86
|
+
2. **Option B - Create manually:**
|
|
87
|
+
- Create `.morph/context/design-system.md` (project-level, shared)
|
|
88
|
+
- Or `.morph/features/$ARGUMENTS/2-ui/design-system.md` (feature-specific)
|
|
89
89
|
|
|
90
|
-
3. **
|
|
91
|
-
-
|
|
90
|
+
3. **Option C - Scan existing CSS:**
|
|
91
|
+
- If the project already has CSS with variables: `npx morph-spec generate design-system --scan`
|
|
92
92
|
|
|
93
|
-
|
|
94
|
-
- Design system
|
|
95
|
-
-
|
|
96
|
-
-
|
|
93
|
+
**IMPORTANT:**
|
|
94
|
+
- Design system is **mandatory** for UI features
|
|
95
|
+
- Automatic gate will block implementation (Phase 5) if design system doesn't exist
|
|
96
|
+
- Better to create now to ensure visual consistency
|
|
97
97
|
|
|
98
|
-
###
|
|
98
|
+
### Step 1: Detect If Phase Is Needed
|
|
99
99
|
|
|
100
|
-
|
|
100
|
+
Check if active agents include `uiux-designer`:
|
|
101
101
|
|
|
102
102
|
```bash
|
|
103
103
|
npx morph-spec state get $ARGUMENTS
|
|
104
104
|
```
|
|
105
105
|
|
|
106
|
-
|
|
106
|
+
If `uiux-designer` is NOT in `activeAgents`, skip this phase and continue to Phase 2 (Design).
|
|
107
107
|
|
|
108
|
-
###
|
|
108
|
+
### Step 1.5: Design Thinking — Aesthetic Direction
|
|
109
109
|
|
|
110
110
|
> **Ref:** `framework/standards/frontend/design-system/aesthetic-direction.md`
|
|
111
111
|
|
|
112
|
-
**
|
|
112
|
+
**BEFORE collecting technical requirements**, define visual direction with 4 questions:
|
|
113
113
|
|
|
114
|
-
1. **Purpose**:
|
|
115
|
-
2. **Tone**:
|
|
116
|
-
3. **Differentiation**:
|
|
117
|
-
4. **Constraints**: Framework, performance budget, brand guidelines
|
|
114
|
+
1. **Purpose**: What problem does it solve? Who uses it? What is the professional context?
|
|
115
|
+
2. **Tone**: What direction? (Minimal Refined / Editorial / Soft Professional / Industrial / Modern Luxury)
|
|
116
|
+
3. **Differentiation**: What is the 1 memorable element of this interface?
|
|
117
|
+
4. **Constraints**: Framework, performance budget, existing brand guidelines
|
|
118
118
|
|
|
119
|
-
**CRITICAL:**
|
|
120
|
-
|
|
119
|
+
**CRITICAL:** Commit to direction BEFORE technical specs. Document in `ui-design-system.md`
|
|
120
|
+
in section `## Aesthetic Direction` (template available in the standard above).
|
|
121
121
|
|
|
122
|
-
**Anti-
|
|
123
|
-
-
|
|
124
|
-
-
|
|
125
|
-
-
|
|
126
|
-
-
|
|
122
|
+
**Anti-patterns to avoid:**
|
|
123
|
+
- Purple gradient on white background (AI cliche)
|
|
124
|
+
- Inter/Roboto as display font
|
|
125
|
+
- 3-column card grid without visual differentiation
|
|
126
|
+
- 5-color palette with equal weight (without dominant + accent)
|
|
127
127
|
|
|
128
|
-
###
|
|
128
|
+
### Step 2: Collect User Input
|
|
129
129
|
|
|
130
|
-
**
|
|
130
|
+
**ALWAYS ask the user FIRST:**
|
|
131
131
|
|
|
132
|
-
1. **Layout
|
|
133
|
-
-
|
|
134
|
-
-
|
|
135
|
-
-
|
|
132
|
+
1. **Layout and style**:
|
|
133
|
+
- Do you have any layout ideas in mind?
|
|
134
|
+
- Do you have visual references? (sites, apps, screenshots)
|
|
135
|
+
- How do you envision the user flow?
|
|
136
136
|
|
|
137
|
-
2. **
|
|
138
|
-
-
|
|
139
|
-
-
|
|
137
|
+
2. **Components and interactions**:
|
|
138
|
+
- What are the main components of this screen/page?
|
|
139
|
+
- What states need to be considered? (loading, error, empty, success)
|
|
140
140
|
|
|
141
|
-
3. **
|
|
142
|
-
-
|
|
143
|
-
-
|
|
141
|
+
3. **Reference images**:
|
|
142
|
+
- Do you have example images I can analyze?
|
|
143
|
+
- If YES: use Read tool to read screenshots and extract patterns
|
|
144
144
|
|
|
145
|
-
###
|
|
145
|
+
### Step 3: Choose UI Library
|
|
146
146
|
|
|
147
|
-
|
|
147
|
+
Detect the stack from `.morph/config/config.json` and recommend the appropriate library:
|
|
148
148
|
|
|
149
|
-
**
|
|
150
|
-
- Fluent UI
|
|
151
|
-
- MudBlazor
|
|
149
|
+
**Blazor stack:**
|
|
150
|
+
- **Fluent UI Blazor** — dashboards, simple forms, AI components, Microsoft design language
|
|
151
|
+
- **MudBlazor** — advanced data grids, complex charts, material design
|
|
152
152
|
|
|
153
|
-
**
|
|
153
|
+
**Next.js stack:**
|
|
154
|
+
- **shadcn/ui + Radix** (recommended) — composable primitives, full control, Tailwind-native
|
|
155
|
+
- **MUI** — feature-rich, enterprise-grade, material design
|
|
154
156
|
|
|
155
|
-
|
|
157
|
+
**Document the decision as an ADR in `decisions.md`** with: context, options considered, decision, and rationale.
|
|
156
158
|
|
|
157
|
-
|
|
159
|
+
### Step 4: Generate Deliverables
|
|
158
160
|
|
|
159
|
-
|
|
161
|
+
Create the following files in `.morph/features/$ARGUMENTS/`:
|
|
162
|
+
|
|
163
|
+
> **Use templates:** Use `npx morph-spec template render` to generate files from templates in `.morph/framework/templates/docs/`. Available templates: `ui-design-system`, `ui-mockups`, `ui-components`, `ui-flows`.
|
|
160
164
|
|
|
161
165
|
#### 4.1. `ui-design-system.md`
|
|
162
166
|
|
|
163
|
-
**
|
|
164
|
-
-
|
|
165
|
-
-
|
|
167
|
+
**If project-level design system exists (`.morph/context/design-system.md`):**
|
|
168
|
+
- Reference it in specs: "Uses project design system at .morph/context/design-system.md"
|
|
169
|
+
- Create `ui-design-system.md` only if there are feature-specific colors/components
|
|
166
170
|
|
|
167
|
-
**
|
|
168
|
-
-
|
|
169
|
-
- **
|
|
170
|
-
|
|
171
|
-
-
|
|
172
|
-
-
|
|
173
|
-
- Spacing
|
|
174
|
-
-
|
|
171
|
+
**If it doesn't exist:**
|
|
172
|
+
- Create complete feature-level design system with:
|
|
173
|
+
- **Section `## Aesthetic Direction`** (use template from `aesthetic-direction.md`):
|
|
174
|
+
direction, font pair, color philosophy, motion intent, composition approach
|
|
175
|
+
- Color palette (primary, secondary, accent, semantic)
|
|
176
|
+
- Typography (heading scales, body text, code)
|
|
177
|
+
- Spacing and layout (grid, margins, paddings)
|
|
178
|
+
- Base components (buttons, inputs, cards)
|
|
175
179
|
|
|
176
180
|
#### 4.2. `ui-mockups.md`
|
|
177
181
|
|
|
178
|
-
|
|
179
|
-
-
|
|
180
|
-
-
|
|
181
|
-
-
|
|
182
|
-
-
|
|
182
|
+
ASCII wireframes + descriptions:
|
|
183
|
+
- General layout of each screen/page
|
|
184
|
+
- Component positioning
|
|
185
|
+
- Responsiveness (desktop, tablet, mobile)
|
|
186
|
+
- States (loading, error, empty, success)
|
|
183
187
|
|
|
184
188
|
#### 4.3. `ui-components.md`
|
|
185
189
|
|
|
186
|
-
|
|
187
|
-
-
|
|
188
|
-
- Props
|
|
189
|
-
-
|
|
190
|
-
-
|
|
190
|
+
Technical specs for Fluent UI/MudBlazor components:
|
|
191
|
+
- Component to use (FluentButton, MudDataGrid, etc.)
|
|
192
|
+
- Props and configurations
|
|
193
|
+
- Events and bindings
|
|
194
|
+
- Validations and states
|
|
191
195
|
|
|
192
196
|
#### 4.4. `ui-flows.md`
|
|
193
197
|
|
|
194
|
-
|
|
198
|
+
Complete user flows:
|
|
195
199
|
- User stories
|
|
196
|
-
-
|
|
197
|
-
- Edge cases (
|
|
198
|
-
-
|
|
200
|
+
- Flow diagrams (text/ASCII)
|
|
201
|
+
- Edge cases (what happens if...?)
|
|
202
|
+
- Validations and feedback
|
|
199
203
|
|
|
200
|
-
### CHECKPOINT:
|
|
204
|
+
### CHECKPOINT: Validate UI Deliverables
|
|
201
205
|
|
|
202
|
-
|
|
206
|
+
**PAUSE - Before proceeding to accessibility:**
|
|
203
207
|
|
|
204
|
-
- [ ]
|
|
205
|
-
- [ ] Font pair
|
|
206
|
-
- [ ] Color philosophy: dominant + accent + rationale
|
|
207
|
-
- [ ] Design system
|
|
208
|
-
- [ ] Wireframes
|
|
209
|
-
- [ ]
|
|
210
|
-
- [ ]
|
|
211
|
-
- [ ]
|
|
208
|
+
- [ ] Aesthetic direction defined and documented in `ui-design-system.md`?
|
|
209
|
+
- [ ] Font pair specified (not just Inter/Roboto for display)?
|
|
210
|
+
- [ ] Color philosophy: dominant + accent + rationale documented?
|
|
211
|
+
- [ ] Design system defined (project-level or feature-level)?
|
|
212
|
+
- [ ] Wireframes cover all states (loading, error, empty, success)?
|
|
213
|
+
- [ ] Components specified with actual props from chosen UI library?
|
|
214
|
+
- [ ] Complete user flows with edge cases?
|
|
215
|
+
- [ ] Chosen UI library documented as ADR in `decisions.md`?
|
|
212
216
|
|
|
213
|
-
|
|
214
|
-
→
|
|
217
|
+
**If any checkbox is NOT checked:**
|
|
218
|
+
→ Go back and complete the missing deliverable
|
|
215
219
|
|
|
216
|
-
|
|
217
|
-
→
|
|
220
|
+
**If ALL checkboxes are checked:**
|
|
221
|
+
→ Proceed to accessibility validation
|
|
218
222
|
|
|
219
223
|
---
|
|
220
224
|
|
|
221
|
-
###
|
|
225
|
+
### Step 5: Validate Accessibility and Responsiveness
|
|
222
226
|
|
|
223
|
-
|
|
227
|
+
Document in UI files:
|
|
224
228
|
- **WCAG 2.1 Level AA** compliance
|
|
225
|
-
-
|
|
226
|
-
-
|
|
227
|
-
-
|
|
229
|
+
- Adequate color contrast
|
|
230
|
+
- Accessible labels for screen readers
|
|
231
|
+
- Keyboard navigation
|
|
228
232
|
- **Responsive breakpoints**
|
|
229
233
|
- Desktop (>1200px)
|
|
230
234
|
- Tablet (768px - 1199px)
|
|
231
235
|
- Mobile (<768px)
|
|
232
236
|
|
|
233
|
-
###
|
|
237
|
+
### Step 6: Update State
|
|
234
238
|
|
|
235
239
|
```bash
|
|
236
240
|
npx morph-spec state mark-output $ARGUMENTS ui-design-system
|
|
@@ -239,77 +243,76 @@ npx morph-spec state mark-output $ARGUMENTS ui-components
|
|
|
239
243
|
npx morph-spec state mark-output $ARGUMENTS ui-flows
|
|
240
244
|
```
|
|
241
245
|
|
|
242
|
-
> **
|
|
243
|
-
>
|
|
244
|
-
>
|
|
245
|
-
> - `npx morph-spec state mark-output my-feature uiDesignSystem`
|
|
246
|
-
> - `npx morph-spec state mark-output my-feature ui-design-system`
|
|
246
|
+
> **Format note:** The `mark-output` commands accept BOTH kebab-case (`ui-design-system`)
|
|
247
|
+
> AND camelCase (`uiDesignSystem`). Both formats work equally! Use whichever is more
|
|
248
|
+
> comfortable for you. Examples:
|
|
249
|
+
> - `npx morph-spec state mark-output my-feature uiDesignSystem`
|
|
250
|
+
> - `npx morph-spec state mark-output my-feature ui-design-system`
|
|
247
251
|
|
|
248
|
-
## Outputs
|
|
252
|
+
## Generated Outputs
|
|
249
253
|
|
|
250
254
|
- `.morph/features/$ARGUMENTS/2-ui/design-system.md`
|
|
251
255
|
- `.morph/features/$ARGUMENTS/2-ui/mockups.md`
|
|
252
256
|
- `.morph/features/$ARGUMENTS/2-ui/components.md`
|
|
253
257
|
- `.morph/features/$ARGUMENTS/2-ui/flows.md`
|
|
254
|
-
- `.morph/features/$ARGUMENTS/1-design/decisions.md` (
|
|
258
|
+
- `.morph/features/$ARGUMENTS/1-design/decisions.md` (updated with UI library ADR)
|
|
255
259
|
|
|
256
|
-
###
|
|
260
|
+
### Step 7: Validate Design with Frontend Review
|
|
257
261
|
|
|
258
|
-
|
|
262
|
+
After generating all 4 UI outputs and updating state (Step 6):
|
|
259
263
|
|
|
260
264
|
```bash
|
|
261
265
|
/frontend-review $ARGUMENTS
|
|
262
266
|
```
|
|
263
267
|
|
|
264
|
-
|
|
265
|
-
estática no design, e gera screenshots dos mockups se dev server disponível.
|
|
268
|
+
The skill validates: WCAG token contrast, existence of all outputs, static design accessibility, and generates mockup screenshots if dev server is available.
|
|
266
269
|
|
|
267
|
-
|
|
270
|
+
**If frontend-review blocks**, fix issues before presenting to user.
|
|
268
271
|
|
|
269
272
|
---
|
|
270
273
|
|
|
271
|
-
##
|
|
274
|
+
## MANDATORY PAUSE
|
|
272
275
|
|
|
273
|
-
Use `AskUserQuestion`
|
|
276
|
+
Use `AskUserQuestion` to capture explicit approval before advancing:
|
|
274
277
|
|
|
275
278
|
```json
|
|
276
279
|
{
|
|
277
280
|
"questions": [{
|
|
278
|
-
"header": "
|
|
279
|
-
"question": "UI/UX
|
|
281
|
+
"header": "Approval",
|
|
282
|
+
"question": "UI/UX generated. Approve to advance to technical design?",
|
|
280
283
|
"multiSelect": false,
|
|
281
284
|
"options": [
|
|
282
|
-
{ "label": "
|
|
283
|
-
{ "label": "
|
|
285
|
+
{ "label": "Approve UI/UX", "description": "Advance to technical design phase" },
|
|
286
|
+
{ "label": "I have feedback", "description": "Type what you want to adjust in the field below (Other)" }
|
|
284
287
|
]
|
|
285
288
|
}]
|
|
286
289
|
}
|
|
287
290
|
```
|
|
288
291
|
|
|
289
|
-
- **"
|
|
292
|
+
- **"Approve UI/UX"** →
|
|
290
293
|
```bash
|
|
291
294
|
npx morph-spec approve $ARGUMENTS uiux
|
|
292
295
|
npx morph-spec phase advance $ARGUMENTS
|
|
293
296
|
```
|
|
294
|
-
- **"
|
|
297
|
+
- **"I have feedback" or "Other"** → apply the received feedback and repeat this PAUSE
|
|
295
298
|
|
|
296
|
-
##
|
|
299
|
+
## Advancement Criteria
|
|
297
300
|
|
|
298
|
-
- [x]
|
|
299
|
-
- [x]
|
|
300
|
-
- [x] 4 deliverables
|
|
301
|
-
- [x]
|
|
302
|
-
- [x]
|
|
303
|
-
- [x] State
|
|
304
|
-
- [x]
|
|
301
|
+
- [x] User input collected (layout, references)
|
|
302
|
+
- [x] UI library chosen and justified (ADR)
|
|
303
|
+
- [x] 4 deliverables created (design-system, mockups, components, flows)
|
|
304
|
+
- [x] WCAG 2.1 accessibility documented
|
|
305
|
+
- [x] Responsiveness specified
|
|
306
|
+
- [x] State updated
|
|
307
|
+
- [x] User approved UI/UX
|
|
305
308
|
|
|
306
309
|
---
|
|
307
310
|
|
|
308
|
-
## Outputs
|
|
311
|
+
## Phase Outputs
|
|
309
312
|
|
|
310
313
|
<!-- morph:outputs:uiux -->
|
|
311
|
-
| Output |
|
|
312
|
-
|
|
314
|
+
| Output | Path |
|
|
315
|
+
|--------|------|
|
|
313
316
|
| `uiDesignSystem` | `.morph/features/{feature}/2-ui/design-system.md` |
|
|
314
317
|
| `uiMockups` | `.morph/features/{feature}/2-ui/mockups.md` |
|
|
315
318
|
| `uiComponents` | `.morph/features/{feature}/2-ui/components.md` |
|
|
@@ -318,4 +321,4 @@ Use `AskUserQuestion` para capturar aprovação explícita antes de avançar:
|
|
|
318
321
|
|
|
319
322
|
---
|
|
320
323
|
|
|
321
|
-
|
|
324
|
+
Continue automatically to Phase 2 (Design) after approval.
|
|
@@ -3,6 +3,7 @@ name: morph:scope-escalation
|
|
|
3
3
|
description: Guided workflow for mid-implementation scope escalation — analyzes complexity discovery, recommends action, and executes phase regression or task expansion
|
|
4
4
|
user-invocable: true
|
|
5
5
|
argument-hint: "[feature-name]"
|
|
6
|
+
allowed-tools: Read, Write, Edit, Bash, Glob, Grep, AskUserQuestion
|
|
6
7
|
---
|
|
7
8
|
|
|
8
9
|
# Scope Escalation Workflow
|
|
@@ -18,11 +19,37 @@ Use this skill when a task during implementation reveals significantly more comp
|
|
|
18
19
|
|
|
19
20
|
### Step 1: COLLECT Evidence
|
|
20
21
|
|
|
21
|
-
|
|
22
|
+
Use `AskUserQuestion` to gather the details:
|
|
23
|
+
|
|
24
|
+
```json
|
|
25
|
+
{
|
|
26
|
+
"questions": [
|
|
27
|
+
{
|
|
28
|
+
"header": "Task ID",
|
|
29
|
+
"question": "Which task triggered the complexity discovery?",
|
|
30
|
+
"multiSelect": false,
|
|
31
|
+
"options": [
|
|
32
|
+
{ "label": "T001", "description": "First task" },
|
|
33
|
+
{ "label": "T002", "description": "Second task" },
|
|
34
|
+
{ "label": "Other", "description": "Type the task ID" }
|
|
35
|
+
]
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"header": "Discovery",
|
|
39
|
+
"question": "What complexity did you discover?",
|
|
40
|
+
"multiSelect": true,
|
|
41
|
+
"options": [
|
|
42
|
+
{ "label": "Hidden dependencies", "description": "More systems involved than spec assumed" },
|
|
43
|
+
{ "label": "Wrong assumptions", "description": "Spec assumed simpler architecture" },
|
|
44
|
+
{ "label": "Missing abstractions", "description": "Need new patterns/interfaces not in contracts" },
|
|
45
|
+
{ "label": "Other", "description": "Describe the discovery" }
|
|
46
|
+
]
|
|
47
|
+
}
|
|
48
|
+
]
|
|
49
|
+
}
|
|
50
|
+
```
|
|
22
51
|
|
|
23
|
-
|
|
24
|
-
2. **What did you discover?** (specific complexity: hidden dependencies, wrong assumptions, missing abstractions)
|
|
25
|
-
3. **Show evidence** — read the relevant code files to understand the actual complexity
|
|
52
|
+
> Populate the Task ID options dynamically from the feature's `tasks.md`. After receiving answers, **read the relevant code files** to verify the evidence before classifying.
|
|
26
53
|
|
|
27
54
|
### Step 2: ANALYZE Impact
|
|
28
55
|
|
|
@@ -54,11 +81,33 @@ Explain WHY you recommend this classification based on the evidence.
|
|
|
54
81
|
|
|
55
82
|
Pause and wait for user confirmation using `AskUserQuestion`:
|
|
56
83
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
84
|
+
```json
|
|
85
|
+
{
|
|
86
|
+
"questions": [
|
|
87
|
+
{
|
|
88
|
+
"header": "Severity",
|
|
89
|
+
"question": "Impact classified as {LOW|MEDIUM|HIGH}. Do you agree?",
|
|
90
|
+
"multiSelect": false,
|
|
91
|
+
"options": [
|
|
92
|
+
{ "label": "Agree", "description": "Classification is correct" },
|
|
93
|
+
{ "label": "Override", "description": "I think the impact is different" }
|
|
94
|
+
]
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
"header": "Action",
|
|
98
|
+
"question": "Recommended action: {action}. Proceed?",
|
|
99
|
+
"multiSelect": false,
|
|
100
|
+
"options": [
|
|
101
|
+
{ "label": "Proceed", "description": "{action description}" },
|
|
102
|
+
{ "label": "Different target", "description": "I want to regress to a different phase" },
|
|
103
|
+
{ "label": "Cancel", "description": "Do not escalate — continue as-is" }
|
|
104
|
+
]
|
|
105
|
+
}
|
|
106
|
+
]
|
|
107
|
+
}
|
|
108
|
+
```
|
|
60
109
|
|
|
61
|
-
**DO NOT proceed without explicit user approval.**
|
|
110
|
+
**DO NOT proceed without explicit user approval.** If user chooses "Cancel", stop the workflow entirely.
|
|
62
111
|
|
|
63
112
|
### Step 5: EXECUTE
|
|
64
113
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@polymorphism-tech/morph-spec",
|
|
3
|
-
"version": "4.10.
|
|
3
|
+
"version": "4.10.2",
|
|
4
4
|
"description": "MORPH-SPEC: AI-First development framework with validation pipeline and multi-stack support",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"claude-code",
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
"chalk": "^5.3.0",
|
|
55
55
|
"commander": "^12.0.0",
|
|
56
56
|
"fs-extra": "^11.2.0",
|
|
57
|
-
"glob": "^
|
|
57
|
+
"glob": "^13.0.6",
|
|
58
58
|
"handlebars": "^4.7.8",
|
|
59
59
|
"inquirer": "^9.2.0",
|
|
60
60
|
"minimatch": "^9.0.5",
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
"access": "public"
|
|
76
76
|
},
|
|
77
77
|
"devDependencies": {
|
|
78
|
-
"c8": "^
|
|
78
|
+
"c8": "^11.0.0",
|
|
79
79
|
"docdash": "^2.0.2",
|
|
80
80
|
"jsdoc": "^4.0.5"
|
|
81
81
|
}
|
|
@@ -5,6 +5,7 @@ import fs from 'fs-extra';
|
|
|
5
5
|
import chalk from 'chalk';
|
|
6
6
|
import { logger } from '../../utils/logger.js';
|
|
7
7
|
import { pathExists, readJson } from '../../utils/file-copier.js';
|
|
8
|
+
import { checkClaudeMdImport } from '../../utils/claude-md-injector.js';
|
|
8
9
|
import {
|
|
9
10
|
checkCLIOutdated,
|
|
10
11
|
checkProjectOutdated,
|
|
@@ -504,10 +505,14 @@ export async function doctorCommand(options = {}) {
|
|
|
504
505
|
hasWarnings = true;
|
|
505
506
|
}
|
|
506
507
|
|
|
507
|
-
// Check CLAUDE.md
|
|
508
|
+
// Check CLAUDE.md has morph-spec @import
|
|
508
509
|
const claudeMd = join(targetPath, 'CLAUDE.md');
|
|
509
|
-
|
|
510
|
+
const claudeMdStatus = await checkClaudeMdImport(claudeMd);
|
|
511
|
+
if (claudeMdStatus === 'ok') {
|
|
510
512
|
checks.push({ name: 'CLAUDE.md', status: 'ok' });
|
|
513
|
+
} else if (claudeMdStatus === 'missing-import') {
|
|
514
|
+
checks.push({ name: 'CLAUDE.md', status: 'warn', msg: 'missing @.claude/CLAUDE.md import — run morph-spec update' });
|
|
515
|
+
hasWarnings = true;
|
|
511
516
|
} else {
|
|
512
517
|
checks.push({ name: 'CLAUDE.md', status: 'missing' });
|
|
513
518
|
hasErrors = true;
|