@polymorphism-tech/morph-spec 4.11.1 → 4.13.0

package/framework/skills/level-1-workflows/morph-phase-uiux/SKILL.md

@@ -1,13 +1,13 @@
 ---
 name: morph-phase-uiux
-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.
+description: MORPH-SPEC Phase 2 (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.
 argument-hint: "[feature-name]"
 user-invocable: false
 allowed-tools: Read, Write, Edit, Bash, Glob, Grep, AskUserQuestion
-cliVersion: "4.11.1"
+cliVersion: "4.13.0"
 ---
 
-# MORPH UI/UX Design - Phase 1.5
+# MORPH UI/UX Design - Phase 2
 
 > INTERNAL: Workflow skill used by /morph-proposal during automated phase orchestration. Not a user command.
 
@@ -15,8 +15,8 @@ Conditional phase for features with front-end. Collects UI/UX requirements, gene
 
 ## Prerequisites
 
-- [ ] Phase 1 (Setup) completed
-- [ ] Feature has detected UI keywords (blazor, ui, component, page, dashboard, wizard, form, chart)
+- [ ] Proposal approved by the user
+- [ ] Feature has detected UI keywords (ui, component, page, dashboard, wizard, form, chart)
 - [ ] `ui-designer` agent activated
 
 ## Recommended Tools
@@ -29,7 +29,7 @@ Conditional phase for features with front-end. Collects UI/UX requirements, gene
 | Check existing design system | **Read** `.morph/context/design-system.md` | — |
 | Read user screenshots | **Read** (image file) | — |
 | Search for existing CSS variables | **Grep** `--root:` in `*.css,*.scss` | — |
-| Find existing components | **Glob** `**/Components/**/*.razor` or `**/components/**/*.tsx` | — |
+| Find existing components | **Glob** `**/components/**/*.tsx` | — |
 | UI component documentation | **Context7 MCP** `query_docs({ libraryId, query })` | **WebSearch** + **WebFetch** |
 | Preview existing page | **Playwright MCP** `browser_navigate()` + `browser_take_screenshot()` | **WebFetch** URL |
 | Generate visual mockup | **Playwright MCP** `browser_navigate()` + `browser_resize()` + `browser_take_screenshot()` | HTML file + manual screenshot |
@@ -39,11 +39,14 @@ Conditional phase for features with front-end. Collects UI/UX requirements, gene
 | Render UI templates | **Bash** `morph-spec template render docs/ui-mockups ...` | — |
 | Generate design system from existing CSS | **Bash** `morph-spec generate design-system --scan` | — |
 | Update state | **Bash** `morph-spec state mark-output ...` | — |
+| Auto-detect dev server | **Glob** `next.config.*`, `vite.config.*`, `*.csproj` | **Read** `package.json` scripts |
+| Capture existing app | **Playwright MCP** `browser_navigate()` + `browser_take_screenshot()` | — |
+| Read Tailwind config | **Read** `tailwind.config.{js,ts}` | **Grep** `colors:` |
+| Trend research | **Context7 MCP** / **WebSearch** | — |
 
 **MCPs for this phase:** Playwright (preview, inspection, responsiveness), Context7 (component docs).
 
 **Anti-patterns:**
-- WebSearch for MudBlazor docs (use Context7 MCP — more precise)
 - Task agent to read a screenshot (use Read directly on image)
 - Guess component props (use Context7 for actual API)
 
@@ -61,12 +64,119 @@ Check the `"phase"` field in the output:
 
 **If `"phase": "uiux"`** → correct phase, proceed.
 
-**If `"phase": "setup"`** → execute:
-1. `morph-spec phase advance $ARGUMENTS` (→ uiux)
+**If `"phase": "proposal"`** → execute in sequence:
+1. `morph-spec state mark-output $ARGUMENTS proposal`
+2. `morph-spec phase advance $ARGUMENTS` (→ uiux)
 
 **Any other value** → do not proceed — inconsistent state, report to user.
 
-> **Rule:** Never write to `2-ui/` until the phase is `uiux`. The hook will block writes.
+> **Rule:** Never write to `1-ui/` until the phase is `uiux`. The hook will block writes.
+
+---
+
+### Step 0.2: Capture Existing App (Playwright)
+
+> **Purpose:** Before analyzing tokens, capture visual screenshots of the existing app to understand current design patterns.
+> **Skip if:** Greenfield project (no existing UI pages).
+
+#### 0.2.1 — Auto-detect dev server
+
+Check in priority order:
+
+1. **`config.json`**: Read `.morph/config/config.json` → check for `project.devServerUrl` field → use if present
+2. **`package.json` port flags**: Read `package.json` scripts → scan for `--port`, `-p` flags → extract port
+3. **Next.js**: Glob `next.config.*` → try `http://localhost:3000`
+4. **Vite**: Glob `vite.config.*` → try `http://localhost:5173`
+5. **.NET**: Glob `**/Properties/launchSettings.json` → Read → extract `applicationUrl`
+
+Track: `detectedUrl` (string or null).
+
+#### 0.2.2 — Attempt connection
+
+If `detectedUrl` is not null:
+
+```
+mcp__plugin_playwright_playwright__browser_navigate({ url: detectedUrl })
+```
+
+- **Timeout:** 5 seconds
+- **If connects:** proceed to 0.2.3
+- **If fails (timeout/error):**
+
+```json
+{
+  "questions": [{
+    "header": "Dev Server",
+    "question": "Could not connect to dev server at {detectedUrl}. How to proceed?",
+    "multiSelect": false,
+    "options": [
+      { "label": "Start server first", "description": "I'll start the dev server — wait for me" },
+      { "label": "Use different URL", "description": "I'll provide the correct URL (Other)" },
+      { "label": "Skip screenshots", "description": "Continue without existing app screenshots" }
+    ]
+  }]
+}
+```
+
+If `detectedUrl` is null (no indicators found):
+
+```json
+{
+  "questions": [{
+    "header": "Existing UI?",
+    "question": "Does this project have existing UI pages I should capture?",
+    "multiSelect": false,
+    "options": [
+      { "label": "Yes, provide URL", "description": "I'll provide the URL in the field below (Other)" },
+      { "label": "No, greenfield", "description": "Skip — this is a new project" }
+    ]
+  }]
+}
+```
+
+#### 0.2.3 — Screenshot main pages
+
+Once connected, take screenshots of up to 5 pages:
+
+1. **Current page** (usually home/root)
+2. Navigate to common routes: `/dashboard`, `/admin`, `/settings`, or detect from sidebar links via `browser_snapshot()`
+3. For each page:
+   ```
+   mcp__plugin_playwright_playwright__browser_resize({ width: 1440, height: 900 })
+   mcp__plugin_playwright_playwright__browser_take_screenshot({})
+   ```
+4. Save screenshots to `.morph/features/$ARGUMENTS/1-ui/existing-*.png`
+
+#### 0.2.4 — Visual analysis
+
+Analyze the captured screenshots and write `.morph/features/$ARGUMENTS/1-ui/existing-ui-analysis.md`:
+
+> **Note:** This is an intermediate artifact — NOT a tracked output in `output-schema.js`. It will not appear in `state mark-output`. Advisory warnings from `task-tracking-guard.js` are expected.
+
+```markdown
+# Existing UI Analysis — {Feature}
+
+## Visual Summary
+- **Color palette:** [dominant colors observed]
+- **Typography:** [serif/sans/mono, approximate weights, scale]
+- **Layout:** [sidebar/topbar/fullwidth, grid system, card patterns]
+- **Sophistication level:** [basic/intermediate/advanced]
+- **Dark/Light mode:** [which mode detected, or both]
+
+## Design Tokens Detected Visually
+- Primary color: [approx hex from screenshots]
+- Background: [surface colors observed]
+- Border style: [rounded/sharp, thickness]
+- Shadow style: [flat/elevated/colored]
+
+## Patterns Worth Preserving
+- [List patterns that work well and should be maintained]
+
+## Opportunities for Improvement
+- [List areas where modern techniques could improve the UI]
+```
+
+This analysis feeds into Step 0.5 (cross-check with extracted tokens) and Step 1.5 (domain-adaptive direction).
 
 ---
 
@@ -74,11 +184,12 @@ Check the `"phase"` field in the output:
 
 **This step is MANDATORY and must always run before Step 1.**
 
-#### Step 0.5.1 — Scan frontend for CSS tokens (ALWAYS)
+#### Step 0.5.1 — Scan frontend for design tokens (ALWAYS)
 
-Search for existing CSS custom properties in the project's frontend directories.
+Search for existing design tokens across ALL supported stacks. Run these scans in parallel:
 
-Glob these patterns (exclude `node_modules/`, `.next/`, `dist/`, `build/`):
+**A. CSS Custom Properties (all stacks):**
+Glob these patterns (exclude `node_modules/`, `.next/`, `dist/`, `build/`, `obj/`, `bin/`):
 ```
 wwwroot/**/*.css
 wwwroot/**/*.scss
@@ -88,16 +199,34 @@ src/**/*.css
 src/**/*.scss
 src/**/*.module.css
 public/**/*.css
+app/**/*.css
 ```
+For each file found, Grep for `:root {` blocks containing `--` custom properties.
 
-For each CSS/SCSS file found, Grep for `:root {` blocks containing `--` custom properties.
+**B. Tailwind Config (Next.js / Vite):**
+Glob: `tailwind.config.{js,ts,mjs,cjs}`
+If found, Read the file and extract:
+- `theme.colors` / `theme.extend.colors` → map to color tokens
+- `theme.fontFamily` → map to font tokens
+- `theme.spacing` → map to spacing tokens
+- `theme.borderRadius` → map to radius tokens
 
-Classify found tokens:
-- **Colors**: lines with `--color-*`, or any `--*` containing `#hex` / `rgb(...)`
-- **Fonts**: `--font-*` or `font-family:` declarations
-- **Spacing**: `--space-*`, `--gap-*`, `--size-*` with rem/px values
+**C. shadcn/ui Config:**
+Glob: `components.json`
+If found and contains `"style"` field, also scan `src/lib/utils.ts` or `lib/utils.ts` for CSS var references.
 
-Track: `cssTokensFound` (bool), token counts by category, source file list.
+**D. Global theme files:**
+Glob: `**/theme.{ts,js}`, `**/tokens.{ts,js}`, `**/design-tokens.{ts,js}`
+If found, Read and extract exported color/spacing/font objects.
+
+Classify ALL found tokens into:
+- **Colors**: `--color-*`, hex values, rgb()
+- **Fonts**: `--font-*`, `font-family:`, fontFamily config
+- **Spacing**: `--space-*`, `--gap-*`, spacing config
+- **Radius**: `--radius-*`, borderRadius config
+- **Shadows**: `--shadow-*`, boxShadow config
+
+Track: `tokensFound` (object by category), `tokenSources` (array of {file, stack, tokenCount}).
 
 #### Step 0.5.2 — Check if design-system.md exists
 
@@ -113,7 +242,7 @@ Track: `dsExists` (bool).
 |------|-----------|--------|
 | **A** | `dsExists` AND `cssTokensFound` | Cross-check DS vs scanned tokens. If >2 colors diverge, flag misalignment and ask user if they want to update DS with `AskUserQuestion`. Proceed to Step 1. |
 | **B** | `dsExists` AND NOT `cssTokensFound` | Print: `✓ Design system found (no CSS tokens to cross-check)`. Proceed to Step 1. |
-| **C** | NOT `dsExists` AND `cssTokensFound` | Auto-generate `.morph/context/design-system.md` from scanned tokens (see Case C detail below). Proceed to Step 1. |
+| **C** | NOT `dsExists` AND tokens found | Auto-generate `.morph/context/design-system.md` from ALL scanned token sources (CSS vars, Tailwind config, etc.). Merge tokens from multiple sources, preferring Tailwind/Theme config over raw CSS. If Step 0.2 produced `existing-ui-analysis.md`, cross-reference visual analysis with extracted tokens. Proceed to Step 1. |
 | **D** | NOT `dsExists` AND NOT `cssTokensFound` | Greenfield project. Ask user for aesthetic direction + brand color using `AskUserQuestion` (same options as morph-init). Scaffold from template. Proceed to Step 1. |
 
 **Case C — auto-generate from scanned tokens:**
@@ -127,7 +256,7 @@ Create `.morph/context/design-system.md` with these sections populated from scan
 
 Print: `✓ Design system generated from [N] tokens — .morph/context/design-system.md`
 
-> **Design system is mandatory** for UI features. The implementation gate (Phase 5) will block if no design system exists.
+> **Design system is mandatory** for UI features. The implementation gate (Phase 7) will block if no design system exists.
 
 ## MANDATORY: Session Tasks
 
@@ -145,11 +274,65 @@ Check if active agents include `ui-designer`:
 morph-spec state get $ARGUMENTS
 ```
 
-If `ui-designer` is NOT in `activeAgents`, skip this phase and continue to Phase 2 (Design).
+If `ui-designer` is NOT in `activeAgents`, skip this phase and continue to Phase 3 (Design).
 
-### Step 1.5: Design Thinking — Aesthetic Direction
+### Step 1.3: Trend Research
+
+> **Purpose:** Before defining aesthetic direction, research current design trends relevant to this project's domain.
+> Use Context7 MCP or web search for current design trends.
+
+#### 1.3.1 — Research current trends
+
+> **MCP:** Use **WebSearch** to research current design trends for the detected domain (e.g., "{currentYear} UI design trends {detectedDomain}"). WebSearch provides real-time results that are more current than any static reference. If WebSearch is not available, use **Context7 MCP** to query UI library documentation for latest component patterns and best practices. If neither is available, rely on your training knowledge of current design trends.
+
+Research current design trends relevant to the project's domain and stack. Identify 3-5 techniques that fit the project.
+
+#### 1.3.2 — Detect project domain
+
+Scan `.morph/features/$ARGUMENTS/0-proposal/proposal.md` for domain keywords:
+
+| Domain | Keywords |
+|--------|----------|
+| SaaS Dashboard | dashboard, analytics, metrics, monitoring, kpi, chart |
+| E-commerce | e-commerce, store, product, cart, checkout, catalog |
+| Landing Page | landing, marketing, site, hero, launch, waitlist |
+| Internal Tool | admin, backoffice, internal, settings, management |
+| Social/Community | social, feed, community, chat, post, notification |
+
+Count keyword hits per domain. Use the domain with most hits. If zero hits across all domains, skip domain-specific filtering.
+
+#### 1.3.3 — Research current trends (optional enhancement)
+
+If Context7 MCP or WebSearch is available:
+- Search: "{currentYear} UI design trends {detectedDomain}"
+- Extract 2-3 additional techniques not in the curated catalog
+- Evaluate if they are production-ready (browser support, performance)
+
+#### 1.3.4 — Present recommendations
+
+Use `AskUserQuestion` to present 3-4 recommended modern techniques:
+
+```json
+{
+  "questions": [{
+    "header": "Trends",
+    "question": "Based on your project domain ({detectedDomain}), these modern techniques are recommended. Which ones do you want to incorporate?",
+    "multiSelect": true,
+    "options": [
+      { "label": "{Technique 1}", "description": "{Brief description + when to use}" },
+      { "label": "{Technique 2}", "description": "{Brief description + when to use}" },
+      { "label": "{Technique 3}", "description": "{Brief description + when to use}" },
+      { "label": "None / custom", "description": "Skip trends or describe your own preference (Other)" }
+    ]
+  }]
+}
+```
 
-> **Ref:** `framework/standards/frontend/design-system/aesthetic-direction.md`
+Selected trends feed into Step 1.5 (Aesthetic Direction) and Step 4 (Deliverables).
+
+---
+
+### Step 1.5: Design Thinking — Aesthetic Direction
 
 **BEFORE collecting technical requirements**, define visual direction with 4 questions:
 
@@ -158,9 +341,46 @@ If `ui-designer` is NOT in `activeAgents`, skip this phase and continue to Phase
 3. **Differentiation**: What is the 1 memorable element of this interface?
 4. **Constraints**: Framework, performance budget, existing brand guidelines
 
-**CRITICAL:** Commit to direction BEFORE technical specs. Document in `ui-design-system.md`
+**CRITICAL:** Commit to direction BEFORE technical specs. Document in `design-system.md`
 in section `## Aesthetic Direction` (template available in the standard above).
 
+#### Domain-Adaptive Patterns
+
+After defining aesthetic direction, apply domain-specific pattern suggestions:
+
+Based on the domain detected in Step 1.3.2, suggest domain-adaptive patterns:
+
+| Domain | Preferred Directions | Key Patterns to Suggest |
+|--------|---------------------|------------------------|
+| SaaS Dashboard | Industrial, Minimal Refined | Dense bento grid KPIs, skeleton loaders, sidebar glassmorphism, dark mode default |
+| E-commerce | Modern Luxury, Soft Professional | Product card hover lift, CTA colored shadows, image-first layouts, scroll galleries |
+| Landing Page | Editorial, Modern Luxury | Hero aurora gradient, scroll-driven narrative, fluid typography, overlapping layers |
+| Internal Tool | Industrial, Minimal Refined | Compact forms, dense tables, status chips, monospace data displays |
+| Social/Community | Soft Professional, Editorial | Card feed, notification badges, avatar systems, drawer navigation |
+
+If the user's chosen direction conflicts with domain recommendations (e.g., Industrial for E-commerce), present an `AskUserQuestion` advisory:
+
+```json
+{
+  "questions": [{
+    "header": "Direction",
+    "question": "You chose {direction} for a {domain} project. The recommended directions are {recommended}. Keep your choice or adapt?",
+    "multiSelect": false,
+    "options": [
+      { "label": "Keep {direction}", "description": "I have specific reasons for this choice" },
+      { "label": "Switch to {recommended[0]}", "description": "{Brief rationale}" }
+    ]
+  }]
+}
+```
+
+#### Integration with Selected Trends
+
+Incorporate the trends selected in Step 1.3.4 into the aesthetic direction documentation:
+
+- Add selected trends to `## Aesthetic Direction` in `design-system.md`
+- Document how each trend maps to the chosen direction
+
 **Anti-patterns to avoid:**
 - Purple gradient on white background (AI cliche)
 - Inter/Roboto as display font
@@ -188,16 +408,14 @@ in section `## Aesthetic Direction` (template available in the standard above).
 
 Detect the stack from `.morph/config/config.json` and recommend the appropriate library:
 
-**Blazor stack:**
-- **Fluent UI Blazor** — dashboards, simple forms, AI components, Microsoft design language
-- **MudBlazor** — advanced data grids, complex charts, material design
-
 **Next.js stack:**
 - **shadcn/ui + Radix** (recommended) — composable primitives, full control, Tailwind-native
 - **MUI** — feature-rich, enterprise-grade, material design
 
 **Document the decision as an ADR in `decisions.md`** with: context, options considered, decision, and rationale.
 
+> **MCP:** After selecting the UI library, use **Context7 MCP** (`resolve-library-id` → `query-docs`) to fetch the library's latest component API (e.g., shadcn/ui primitives, Radix props, MUI component APIs). This ensures component specs in `components.md` reference real, current props — not outdated or hallucinated ones. If Context7 is not available, use **WebSearch** + **WebFetch** to check the official component documentation.
+
 ### Step 3.5: Visual Mockup (Playwright MCP)
 
 > **Purpose:** Generate a real HTML preview using project design tokens before writing formal specs.
@@ -214,7 +432,7 @@ Create an HTML file that represents the main screen/layout using **real tokens f
 - Include representative content (realistic text, placeholder images)
 - All colors via CSS variables: `color: var(--color-primary)` not `color: #3b82f6`
 
-**Save to:** `.morph/features/$ARGUMENTS/2-ui/mockup.html`
+**Save to:** `.morph/features/$ARGUMENTS/1-ui/mockup.html`
 
 Example structure:
 ```html
@@ -257,7 +475,7 @@ Example structure:
 
 **Navigate to the file:**
 ```
-mcp__plugin_playwright_playwright__browser_navigate({ url: "file:///[ABSOLUTE_PATH_TO].morph/features/$ARGUMENTS/2-ui/mockup.html" })
+mcp__plugin_playwright_playwright__browser_navigate({ url: "file:///[ABSOLUTE_PATH_TO].morph/features/$ARGUMENTS/1-ui/mockup.html" })
 ```
 
 **Take screenshots at 3 breakpoints** (resize then screenshot for each):
@@ -265,19 +483,19 @@ mcp__plugin_playwright_playwright__browser_navigate({ url: "file:///[ABSOLUTE_PA
 **Mobile (375px):**
 ```
 mcp__plugin_playwright_playwright__browser_resize({ width: 375, height: 812 })
-mcp__plugin_playwright_playwright__browser_take_screenshot({}) → save as .morph/features/$ARGUMENTS/2-ui/mockup-mobile.png
+mcp__plugin_playwright_playwright__browser_take_screenshot({}) → save as .morph/features/$ARGUMENTS/1-ui/mockup-mobile.png
 ```
 
 **Tablet (768px):**
 ```
 mcp__plugin_playwright_playwright__browser_resize({ width: 768, height: 1024 })
-mcp__plugin_playwright_playwright__browser_take_screenshot({}) → save as .morph/features/$ARGUMENTS/2-ui/mockup-tablet.png
+mcp__plugin_playwright_playwright__browser_take_screenshot({}) → save as .morph/features/$ARGUMENTS/1-ui/mockup-tablet.png
 ```
 
 **Desktop (1440px):**
 ```
 mcp__plugin_playwright_playwright__browser_resize({ width: 1440, height: 900 })
-mcp__plugin_playwright_playwright__browser_take_screenshot({}) → save as .morph/features/$ARGUMENTS/2-ui/mockup-desktop.png
+mcp__plugin_playwright_playwright__browser_take_screenshot({}) → save as .morph/features/$ARGUMENTS/1-ui/mockup-desktop.png
 ```
 
 #### 3.5.3 — Present and Iterate
@@ -289,7 +507,7 @@ mcp__plugin_playwright_playwright__browser_take_screenshot({}) → save as .morp
 3. **Iterate:** Refine `mockup.html` → re-take screenshots → show updated previews
 4. **Continue only when user approves** this visual direction
 
-> **Note:** `ui-mockups.md` (Step 4.2) continues to exist as the reference for states and interactions.
+> **Note:** `mockups.md` (Step 4.2) continues to exist as the reference for states and interactions.
 > The PNGs are the visual reference; the .md covers behavior and edge cases.
 
 ---
@@ -300,22 +518,22 @@ Create the following files in `.morph/features/$ARGUMENTS/`:
 
 > **Use templates:** Use `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`.
 
-#### 4.1. `ui-design-system.md`
+#### 4.1. `design-system.md`
 
 **If project-level design system exists (`.morph/context/design-system.md`):**
 - Reference it in specs: "Uses project design system at .morph/context/design-system.md"
-- Create `ui-design-system.md` only if there are feature-specific colors/components
+- Create `design-system.md` only if there are feature-specific colors/components
 
 **If it doesn't exist:**
 - Create complete feature-level design system with:
-  - **Section `## Aesthetic Direction`** (use template from `aesthetic-direction.md`):
+  - **Section `## Aesthetic Direction`**:
     direction, font pair, color philosophy, motion intent, composition approach
   - Color palette (primary, secondary, accent, semantic)
   - Typography (heading scales, body text, code)
   - Spacing and layout (grid, margins, paddings)
   - Base components (buttons, inputs, cards)
 
-#### 4.2. `ui-mockups.md`
+#### 4.2. `mockups.md`
 
 ASCII wireframes + descriptions:
 - General layout of each screen/page
@@ -323,15 +541,15 @@ ASCII wireframes + descriptions:
 - Responsiveness (desktop, tablet, mobile)
 - States (loading, error, empty, success)
 
-#### 4.3. `ui-components.md`
+#### 4.3. `components.md`
 
-Technical specs for Fluent UI/MudBlazor components:
-- Component to use (FluentButton, MudDataGrid, etc.)
+Technical specs for UI library components:
+- Component to use (Button, DataTable, etc.)
 - Props and configurations
 - Events and bindings
 - Validations and states
 
-#### 4.4. `ui-flows.md`
+#### 4.4. `flows.md`
 
 Complete user flows:
 - User stories
@@ -343,7 +561,7 @@ Complete user flows:
 
 **PAUSE - Before proceeding to accessibility:**
 
-- [ ] Aesthetic direction defined and documented in `ui-design-system.md`?
+- [ ] Aesthetic direction defined and documented in `design-system.md`?
 - [ ] Font pair specified (not just Inter/Roboto for display)?
 - [ ] Color philosophy: dominant + accent + rationale documented?
 - [ ] Design system defined (project-level or feature-level)?
@@ -389,11 +607,11 @@ morph-spec state mark-output $ARGUMENTS ui-flows
 
 ## Generated Outputs
 
-- `.morph/features/$ARGUMENTS/2-ui/design-system.md`
-- `.morph/features/$ARGUMENTS/2-ui/mockups.md`
-- `.morph/features/$ARGUMENTS/2-ui/components.md`
-- `.morph/features/$ARGUMENTS/2-ui/flows.md`
-- `.morph/features/$ARGUMENTS/1-design/decisions.md` (updated with UI library ADR)
+- `.morph/features/$ARGUMENTS/1-ui/design-system.md`
+- `.morph/features/$ARGUMENTS/1-ui/mockups.md`
+- `.morph/features/$ARGUMENTS/1-ui/components.md`
+- `.morph/features/$ARGUMENTS/1-ui/flows.md`
+- `.morph/features/$ARGUMENTS/2-design/decisions.md` (updated with UI library ADR)
 
 ### Step 7: Validate Design with Frontend Review
 
@@ -448,19 +666,15 @@ Use `AskUserQuestion` to capture explicit approval before advancing:
 
 ## Phase Outputs
 
-<!-- morph-outputs:uiux -->
-| Output | Caminho |
-|--------|---------|
-| `uiDesignSystem` | `.morph/features/{feature}/2-ui/design-system.md` |
-| `uiMockups` | `.morph/features/{feature}/2-ui/mockups.md` |
-| `uiComponents` | `.morph/features/{feature}/2-ui/components.md` |
-| `uiFlows` | `.morph/features/{feature}/2-ui/flows.md` |
-| `uiMockupHtml` | `.morph/features/{feature}/2-ui/mockup.html` |
-| `uiMockupMobile` | `.morph/features/{feature}/2-ui/mockup-mobile.png` |
-| `uiMockupTablet` | `.morph/features/{feature}/2-ui/mockup-tablet.png` |
-| `uiMockupDesktop` | `.morph/features/{feature}/2-ui/mockup-desktop.png` |
+<!-- morph-outputs:uiux -->
+| Output | Caminho |
+|--------|---------|
+| `uiDesignSystem` | `.morph/features/{feature}/1-ui/design-system.md` |
+| `uiMockups` | `.morph/features/{feature}/1-ui/mockups.md` |
+| `uiComponents` | `.morph/features/{feature}/1-ui/components.md` |
+| `uiFlows` | `.morph/features/{feature}/1-ui/flows.md` |
 <!-- /morph-outputs -->
 
 ---
 
-Continue automatically to Phase 2 (Design) after approval.
+Continue automatically to Phase 3 (Design) after approval.

package/framework/skills/level-1-workflows/morph-scope-escalation/SKILL.md

@@ -4,7 +4,7 @@ description: Guided workflow for mid-implementation scope escalation — analyze
 user-invocable: true
 argument-hint: "[feature-name]"
 allowed-tools: Read, Write, Edit, Bash, Glob, Grep, AskUserQuestion
-cliVersion: "4.11.1"
+cliVersion: "4.13.0"
 ---
 
 # Scope Escalation Workflow

package/framework/squad-templates/backend-only.json

@@ -19,16 +19,16 @@
       "standards": ["coding.md", "ef-core.md"]
     },
     {
-      "id": "api-designer",
-      "role": "REST Endpoints + DTOs",
+      "id": "hangfire-orchestrator",
+      "role": "Background Jobs & Scheduling",
       "domain": "backend",
-      "standards": ["coding.md", "integration/api/rest-design.md"]
+      "standards": ["coding.md"]
     }
   ],
   "deliverables": {
-    "dotnet-senior": "Application services, business logic, command/query handlers",
+    "dotnet-senior": "Application services, business logic, command/query handlers, API endpoints, DTOs",
     "ef-modeler": "Entity models, DbContext, migrations",
-    "api-designer": "Controllers, DTOs, Swagger docs"
+    "hangfire-orchestrator": "Background jobs, recurring tasks, job scheduling"
   },
   "estimatedParallelGain": "2-3x throughput vs sequential",
   "agent_team": {
@@ -38,7 +38,7 @@
       {
         "id": "dotnet-senior",
         "spawn_context": "standards/coding.md, standards/architecture/, contracts.cs, spec.md",
-        "task_scope": "backend tasks (domain logic, application services, EF Core, API endpoints, DTOs)"
+        "task_scope": "backend tasks (domain logic, application services, EF Core, API endpoints, DTOs, background jobs)"
       }
     ],
     "coordination_notes": "Single-domain squad — Agent Teams not required. Use subagents for parallelization.",

package/framework/squad-templates/frontend-only.json

@@ -1,7 +1,7 @@
 {
   "id": "frontend-only",
   "name": "Frontend Squad",
-  "description": "Frontend-focused squad: Blazor components + CSS + UX",
+  "description": "Frontend-focused squad: UI components + CSS + UX",
   "parallel": true,
   "coordination": "ui-designer",
   "waitForAll": true,
@@ -10,24 +10,33 @@
       "id": "ui-designer",
       "role": "UI Design Lead",
       "domain": "frontend",
-      "standards": ["css-architecture.md", "css-design-system.md"]
+      "standards": [
+        "css-architecture.md",
+        "css-design-system.md"
+      ]
     },
     {
-      "id": "blazor-builder",
-      "role": "Blazor Component Developer",
+      "id": "nextjs-expert",
+      "role": "Frontend Developer",
       "domain": "frontend",
-      "standards": ["coding.md", "blazor-components.md", "blazor-state.md"]
+      "standards": [
+        "coding.md",
+        "nextjs-components.md"
+      ]
     },
     {
       "id": "css-specialist",
       "role": "CSS/Design System Specialist",
       "domain": "frontend",
-      "standards": ["css-architecture.md", "css-design-system.md"]
+      "standards": [
+        "css-architecture.md",
+        "css-design-system.md"
+      ]
     }
   ],
   "deliverables": {
     "ui-designer": "Design system tokens, component specs, mockup annotations",
-    "blazor-builder": ".razor components, code-behind, state management",
+    "nextjs-expert": "React components, pages, state management",
     "css-specialist": "CSS modules, design system implementation, responsive layout"
   },
   "estimatedParallelGain": "2x throughput vs sequential",
@@ -38,7 +47,7 @@
       {
         "id": "ui-designer",
         "spawn_context": "standards/css-architecture.md, standards/css-design-system.md, design-system.md, spec.md",
-        "task_scope": "frontend tasks (Blazor components, CSS, design system implementation, responsive layout)"
+        "task_scope": "frontend tasks (UI components, CSS, design system implementation, responsive layout)"
       }
     ],
     "coordination_notes": "Single-domain squad — Agent Teams not required. Use subagents for parallelization.",