feat(FN-1640): add Frontend UX Design built-in workflow template

- Add Frontend UX Design template for verifying UI/UX design implementation
- Include WCAG 2.1 compliance checks, design system adherence, and user flow validation
- Add template to WorkflowStepManager with category-based organization
- Update documentation with new template description
- Add tests for template API endpoints and workflow step manager

packages/core/src/store.test.ts

@@ -5622,6 +5622,23 @@ Task with acceptance criteria
       expect(steps.filter((step) => step.templateId === "browser-verification")).toHaveLength(1);
     });
 
+    it("should materialize frontend-ux-design built-in template when creating a task", async () => {
+      const task = await store.createTask({
+        description: "Task with frontend UX design review",
+        enabledWorkflowSteps: ["frontend-ux-design"],
+      });
+
+      expect(task.enabledWorkflowSteps).toEqual(["WS-001"]);
+
+      const step = await store.getWorkflowStep("WS-001");
+      expect(step).toMatchObject({
+        id: "WS-001",
+        templateId: "frontend-ux-design",
+        name: "Frontend UX Design",
+        toolMode: "readonly",
+      });
+    });
+
     it("should not set enabledWorkflowSteps when empty array provided", async () => {
       const task = await store.createTask({
         description: "Task without workflow steps",
@@ -5880,6 +5897,19 @@ Task with acceptance criteria
       });
     });
 
+    it("should resolve frontend-ux-design built-in template from getWorkflowStep", async () => {
+      const step = await store.getWorkflowStep("frontend-ux-design");
+
+      expect(step).toMatchObject({
+        id: "frontend-ux-design",
+        templateId: "frontend-ux-design",
+        name: "Frontend UX Design",
+        mode: "prompt",
+        phase: "pre-merge",
+        toolMode: "readonly",
+      });
+    });
+
     // ── Workflow Step Phase ──────────────────────────────────────────────
 
     it("should default phase to 'pre-merge' when creating a workflow step", async () => {

packages/core/src/types.ts

@@ -365,6 +365,33 @@ Use these agent-browser commands for verification:
 
 Note: Refs (@e1, @e2) are invalidated after page navigation. Re-snapshot after clicking links or form submissions.`,
   },
+  {
+    id: "frontend-ux-design",
+    name: "Frontend UX Design",
+    description: "Verify visual polish and consistency with existing UI patterns and design tokens",
+    category: "Quality",
+    icon: "layout-grid",
+    toolMode: "readonly",
+    prompt: `You are a UX design reviewer. Verify frontend changes maintain visual polish and consistency with existing UI patterns and design tokens.
+
+Design System Review:
+1. **Visual Hierarchy** — Check that the changes maintain consistent heading levels, content flow, and information architecture
+2. **Spacing and Typography** — Verify consistent spacing (margins, padding, gaps) and typography scale usage
+3. **Color and Token Consistency** — Check that CSS custom properties and design tokens are used correctly; no hardcoded color values that bypass the design system
+4. **Component Reuse** — Verify existing UI components are reused instead of creating one-off styling; identify any duplication that could be refactored
+5. **Responsive Behavior** — Check that layouts adapt properly across viewport sizes and maintain usability on mobile
+6. **Fit with Design Language** — Verify the visual style matches existing patterns (border radius, shadows, transitions, icon style, etc.)
+
+Files to Review:
+- Modified UI components (React, Vue, Angular, HTML)
+- CSS/SCSS/styled-component files
+- Design token or theme configuration files
+
+Output Requirements:
+- If design is consistent and polished: call task_done() with success status
+- If issues found: describe each finding with specific file paths and suggested corrections via task_log()
+- Prioritize issues by impact: layout breaks > visual inconsistency > style preferences`,
+  },
 ];
 
 export interface PrInfo {