From f7f137dd2ee239caae1de46badc350cb9ded7c87 Mon Sep 17 00:00:00 2001
From: orkhanart <88044120+orkhanart@users.noreply.github.com>
Date: Fri, 28 Nov 2025 20:22:11 -0800
Subject: [PATCH] feat(infra): Add development rules, PRD system, and Claude
 agent commands
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add .cursorrules for Cursor IDE with design patterns
- Add .editorconfig for consistent formatting
- Add CLAUDE.md updates with version header, common pitfalls, component size limits
- Add PRD system with folder structure and templates (feature, enhancement, quick)
- Add Claude commands for PRD workflow:
  - /create-prd, /quick-prd, /generate-tasks
  - /ux-review, /ui-design, /product-review agents
  - /create-component for component generation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../.claude/commands/create-component.md      | 191 +++++++++++++
 ComfyUI_vibe/.claude/commands/create-prd.md   |  89 ++++++
 .../.claude/commands/generate-tasks.md        | 171 +++++++++++
 .../.claude/commands/product-review.md        | 214 ++++++++++++++
 ComfyUI_vibe/.claude/commands/quick-prd.md    | 110 ++++++++
 ComfyUI_vibe/.claude/commands/ui-design.md    | 267 ++++++++++++++++++
 ComfyUI_vibe/.claude/commands/ux-review.md    | 155 ++++++++++
 ComfyUI_vibe/.cursorrules                     | 178 ++++++++++++
 ComfyUI_vibe/.editorconfig                    |  24 ++
 ComfyUI_vibe/CLAUDE.md                        |  74 +++++
 ComfyUI_vibe/PRDs/README.md                   |  96 +++++++
 .../PRDs/_templates/enhancement-prd.md        |  80 ++++++
 ComfyUI_vibe/PRDs/_templates/feature-prd.md   | 213 ++++++++++++++
 ComfyUI_vibe/PRDs/_templates/quick-prd.md     |  57 ++++
 14 files changed, 1919 insertions(+)
 create mode 100644 ComfyUI_vibe/.claude/commands/create-component.md
 create mode 100644 ComfyUI_vibe/.claude/commands/create-prd.md
 create mode 100644 ComfyUI_vibe/.claude/commands/generate-tasks.md
 create mode 100644 ComfyUI_vibe/.claude/commands/product-review.md
 create mode 100644 ComfyUI_vibe/.claude/commands/quick-prd.md
 create mode 100644 ComfyUI_vibe/.claude/commands/ui-design.md
 create mode 100644 ComfyUI_vibe/.claude/commands/ux-review.md
 create mode 100644 ComfyUI_vibe/.cursorrules
 create mode 100644 ComfyUI_vibe/.editorconfig
 create mode 100644 ComfyUI_vibe/PRDs/README.md
 create mode 100644 ComfyUI_vibe/PRDs/_templates/enhancement-prd.md
 create mode 100644 ComfyUI_vibe/PRDs/_templates/feature-prd.md
 create mode 100644 ComfyUI_vibe/PRDs/_templates/quick-prd.md

diff --git a/ComfyUI_vibe/.claude/commands/create-component.md b/ComfyUI_vibe/.claude/commands/create-component.md
new file mode 100644
index 000000000..dd135d2fd
--- /dev/null
+++ b/ComfyUI_vibe/.claude/commands/create-component.md
@@ -0,0 +1,191 @@
+# Create Component
+
+Generate a new Vue component following ComfyUI Vibe patterns.
+
+## Usage
+
+```
+/create-component <ComponentName> <category>
+```
+
+## Categories
+
+| Category | Path | Description |
+|----------|------|-------------|
+| canvas | `src/components/v2/canvas/` | Canvas-related components |
+| nodes | `src/components/v2/nodes/` | Node components |
+| widgets | `src/components/v2/nodes/widgets/` | Widget components |
+| layout | `src/components/v2/layout/` | Layout components |
+| workspace | `src/components/v2/workspace/` | Workspace components |
+| dialogs | `src/components/v2/dialogs/` | Dialog/modal components |
+| common | `src/components/common/` | Shared components |
+
+## Process
+
+### Step 1: Check for Existing Components
+
+Before creating, search for similar components:
+1. Search `src/components/v2/` for similar names
+2. Search for similar functionality
+3. If found, suggest using/extending existing component
+
+### Step 2: Gather Component Info
+
+Ask for:
+1. Component name (PascalCase)
+2. Category
+3. Purpose (one sentence)
+4. Props needed
+5. Events to emit
+
+### Step 3: Generate Component
+
+Create the component file with:
+
+```vue
+<script setup lang="ts">
+interface Props {
+  // Props here
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  // Events here
+}>()
+</script>
+
+<template>
+  <div class="component-name">
+    <!-- Template -->
+  </div>
+</template>
+
+<style scoped>
+.component-name {
+  /* Styles */
+}
+</style>
+```
+
+### Step 4: Follow Patterns
+
+Ensure component follows:
+- [ ] `<script setup lang="ts">` syntax
+- [ ] TypeScript interfaces for Props
+- [ ] Typed emits
+- [ ] Semantic CSS classes (no `dark:` variants)
+- [ ] No hardcoded values
+- [ ] Reference existing patterns
+
+## Component Template
+
+```vue
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+interface Props {
+  /**
+   * Description of prop
+   */
+  propName: string
+  /**
+   * Optional prop with default
+   */
+  optionalProp?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  optionalProp: 0
+})
+
+const emit = defineEmits<{
+  /**
+   * Emitted when action occurs
+   */
+  actionName: [value: string]
+  /**
+   * Emitted when component closes
+   */
+  close: []
+}>()
+
+// Computed properties for derived state
+const derivedValue = computed(() => {
+  return props.propName.toUpperCase()
+})
+
+// Local state if needed
+const localState = ref(false)
+
+// Methods for event handlers
+function handleAction(): void {
+  emit('actionName', derivedValue.value)
+}
+</script>
+
+<template>
+  <div class="component-name">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.component-name {
+  /* Use Tailwind classes in template instead when possible */
+}
+</style>
+```
+
+## Reference Patterns
+
+When creating components, reference these existing files:
+
+| Component Type | Reference File |
+|----------------|----------------|
+| Store-connected | `src/components/v2/canvas/CanvasLeftSidebar.vue` |
+| Widget | `src/components/v2/nodes/widgets/WidgetSlider.vue` |
+| Node | `src/components/v2/nodes/NodeHeader.vue` |
+| Layout | `src/components/v2/layout/WorkspaceLayout.vue` |
+
+## Naming Conventions
+
+| Type | Convention | Example |
+|------|------------|---------|
+| Component file | PascalCase.vue | `NodeSearch.vue` |
+| Props interface | Props | `interface Props` |
+| Events type | Object with events | `defineEmits<{ click: [] }>()` |
+| CSS class | kebab-case | `.node-search` |
+| Local refs | camelCase | `const isOpen = ref(false)` |
+
+## Output
+
+Creates the component file at the appropriate location:
+
+```
+src/components/{version}/{category}/{ComponentName}.vue
+```
+
+## Example
+
+**Input:**
+```
+/create-component NodeSearch canvas
+```
+
+**Output:**
+```
+Created: src/components/v2/canvas/NodeSearch.vue
+
+Component created with:
+- TypeScript props interface
+- Typed emits
+- Basic template structure
+- Scoped styles
+
+Next steps:
+1. Add props as needed
+2. Implement template
+3. Add to parent component
+4. Run pnpm typecheck
+```
diff --git a/ComfyUI_vibe/.claude/commands/create-prd.md b/ComfyUI_vibe/.claude/commands/create-prd.md
new file mode 100644
index 000000000..3841ca239
--- /dev/null
+++ b/ComfyUI_vibe/.claude/commands/create-prd.md
@@ -0,0 +1,89 @@
+# Create PRD
+
+Generate a structured Product Requirements Document for a new feature.
+
+## Usage
+
+This command creates a full PRD in the `PRDs/active/` folder.
+
+## Process
+
+### Step 1: Gather Information
+
+Ask the user for:
+1. **Feature Name**: What is this feature called?
+2. **Problem Statement**: What problem does this solve?
+3. **Priority**: P0 (Critical), P1 (High), P2 (Medium), P3 (Low)?
+4. **Target Users**: Who will use this feature?
+
+If a GitHub issue number is provided, extract information from the issue.
+
+### Step 2: Analyze Codebase
+
+Before writing the PRD:
+1. Search for related existing components in `src/components/v2/`
+2. Check if similar functionality exists
+3. Identify potential dependencies
+4. Review CLAUDE.md for patterns to follow
+
+### Step 3: Create PRD Structure
+
+1. Create folder: `PRDs/active/P{priority}-{feature-name}/`
+2. Copy template from `PRDs/_templates/feature-prd.md`
+3. Rename to `PRD.md`
+4. Fill in all required sections
+
+### Step 4: Generate Content
+
+Fill in the PRD with:
+- **Overview**: Problem statement, goals, non-goals
+- **User Stories**: At least 2-3 user stories in the format "As a [role], I want [action], so that [benefit]"
+- **Requirements**: Functional and non-functional requirements
+- **Technical Specification**: Affected layers, patterns to follow
+- **Acceptance Criteria**: Definition of done, test scenarios
+
+### Step 5: Create Tasks File
+
+Generate `tasks.md` in the same folder with implementation tasks broken down by phase.
+
+## Output
+
+The command will create:
+```
+PRDs/active/P{X}-{feature-name}/
+├── PRD.md        # Full PRD document
+└── tasks.md      # Implementation tasks
+```
+
+## Priority Mapping
+
+| Input | PRD Priority | Meaning |
+|-------|--------------|---------|
+| P0, critical, urgent | P0 | Blocks release, security |
+| P1, high, important | P1 | Must-have for sprint |
+| P2, medium, enhancement | P2 | Nice to have |
+| P3, low, future | P3 | Backlog item |
+
+## Example
+
+**Input:**
+```
+/create-prd
+Feature: Node Search Panel
+Problem: Users can't find nodes quickly in large workflows
+Priority: P1
+```
+
+**Output:**
+```
+Created: PRDs/active/P1-node-search-panel/
+  - PRD.md (full specification)
+  - tasks.md (implementation breakdown)
+```
+
+## Next Steps
+
+After PRD creation, suggest running:
+1. `/ux-review` - UX Agent to review user flows
+2. `/ui-design` - UI Agent to create component specs
+3. `/product-review` - Product Agent final review
diff --git a/ComfyUI_vibe/.claude/commands/generate-tasks.md b/ComfyUI_vibe/.claude/commands/generate-tasks.md
new file mode 100644
index 000000000..20a30a907
--- /dev/null
+++ b/ComfyUI_vibe/.claude/commands/generate-tasks.md
@@ -0,0 +1,171 @@
+# Generate Tasks
+
+Convert a PRD into actionable implementation tasks.
+
+## Usage
+
+```
+/generate-tasks [path-to-prd]
+```
+
+Or run from within a PRD folder:
+```
+/generate-tasks
+```
+
+## Process
+
+### Step 1: Read PRD
+
+Parse the PRD file and extract:
+- User Stories (US-XX)
+- Functional Requirements (FR-XX)
+- Technical Specification (file changes)
+- Acceptance Criteria
+
+### Step 2: Analyze Dependencies
+
+1. Read the affected components/files mentioned in PRD
+2. Identify dependencies between tasks
+3. Group tasks by implementation phase
+
+### Step 3: Generate Tasks
+
+Create tasks following this structure:
+
+```markdown
+# Implementation Tasks: [Feature Name]
+
+**PRD Reference:** [./PRD.md](./PRD.md)
+
+## Task Status Legend
+- [ ] Not started
+- [x] Completed
+- [~] In progress
+
+---
+
+## Phase 1: Foundation
+
+### Setup Tasks
+- [ ] **TASK-001**: Create component file structure
+  - Files: `src/components/v2/[feature]/`
+  - Dependencies: None
+  - Linked PRD: FR-01
+
+---
+
+## Phase 2: Core Implementation
+
+- [ ] **TASK-002**: Implement main component
+  - Files: `src/components/v2/[feature]/[Name].vue`
+  - Dependencies: TASK-001
+  - Linked PRD: US-01, FR-01
+
+---
+
+## Phase 3: Integration & Testing
+
+- [ ] **TASK-003**: Write unit tests
+  - Dependencies: TASK-002
+  - Linked PRD: TC-01, TC-02
+
+- [ ] **TASK-004**: Run quality checks
+  - Commands: `pnpm typecheck && pnpm lint && pnpm build`
+  - Dependencies: All previous tasks
+```
+
+### Step 4: Estimate Complexity
+
+For each task, add complexity indicator:
+- 🟢 Simple (< 1 hour)
+- 🟡 Medium (1-4 hours)
+- 🔴 Complex (> 4 hours)
+
+## Output
+
+Creates or updates `tasks.md` in the PRD folder:
+
+```
+PRDs/active/P{X}-{feature-name}/
+├── PRD.md
+└── tasks.md   # Generated/updated
+```
+
+## Task Naming Convention
+
+```
+TASK-{NNN}: {Verb} {Object}
+```
+
+Examples:
+- TASK-001: Create component file structure
+- TASK-002: Implement search input component
+- TASK-003: Add keyboard navigation
+- TASK-004: Write unit tests
+
+## Example Output
+
+```markdown
+# Implementation Tasks: Node Search Panel
+
+**PRD Reference:** [./PRD.md](./PRD.md)
+
+## Progress: 0/8 tasks complete
+
+---
+
+## Phase 1: Foundation (2 tasks)
+
+- [ ] 🟢 **TASK-001**: Create NodeSearch component structure
+  - Files: `src/components/v2/canvas/NodeSearch.vue`
+  - Dependencies: None
+  - Linked PRD: FR-01
+
+- [ ] 🟡 **TASK-002**: Define TypeScript interfaces
+  - Files: `src/types/search.ts`
+  - Dependencies: None
+  - Linked PRD: FR-01, FR-02
+
+---
+
+## Phase 2: Core Implementation (4 tasks)
+
+- [ ] 🟡 **TASK-003**: Implement search input with debounce
+  - Files: `src/components/v2/canvas/NodeSearch.vue`
+  - Dependencies: TASK-001, TASK-002
+  - Linked PRD: US-01
+
+- [ ] 🔴 **TASK-004**: Add fuzzy search algorithm
+  - Files: `src/utils/search.ts`
+  - Dependencies: TASK-002
+  - Linked PRD: FR-03
+
+- [ ] 🟡 **TASK-005**: Implement results list with virtualization
+  - Dependencies: TASK-003, TASK-004
+  - Linked PRD: FR-04, NFR-01
+
+- [ ] 🟡 **TASK-006**: Add keyboard navigation
+  - Dependencies: TASK-005
+  - Linked PRD: US-02, FR-05
+
+---
+
+## Phase 3: Polish & Testing (2 tasks)
+
+- [ ] 🟡 **TASK-007**: Write unit tests
+  - Dependencies: TASK-003, TASK-004, TASK-006
+  - Linked PRD: TC-01, TC-02
+
+- [ ] 🟢 **TASK-008**: Run quality checks
+  - Commands: `pnpm typecheck && pnpm lint && pnpm build`
+  - Dependencies: All tasks
+```
+
+## Next Steps
+
+After generating tasks:
+1. Review task breakdown with team
+2. Assign tasks to developers
+3. Start with Phase 1 tasks
+4. Update task status as work progresses
diff --git a/ComfyUI_vibe/.claude/commands/product-review.md b/ComfyUI_vibe/.claude/commands/product-review.md
new file mode 100644
index 000000000..73d728abc
--- /dev/null
+++ b/ComfyUI_vibe/.claude/commands/product-review.md
@@ -0,0 +1,214 @@
+# Product Review Agent
+
+Final product review before implementation begins.
+
+## Usage
+
+```
+/product-review [path-to-prd]
+```
+
+Or run from within a PRD folder to review that PRD.
+
+## Role
+
+As the Product Agent, you will:
+1. Review PRD for completeness
+2. Validate requirements against goals
+3. Check scope and priorities
+4. Identify risks and blockers
+5. Give final approval or request changes
+
+## Process
+
+### Step 1: Read Full PRD
+
+Review all sections:
+- Overview (problem, goals, non-goals)
+- User Stories
+- Requirements (functional & non-functional)
+- Technical Specification
+- UX Specification
+- UI Specification
+- Acceptance Criteria
+- Implementation Plan
+
+### Step 2: Validate Against Goals
+
+Check that:
+- [ ] Problem statement is clear and valid
+- [ ] Solution addresses the problem
+- [ ] Scope is appropriate (not too big/small)
+- [ ] Non-goals are clearly defined
+- [ ] Success metrics are measurable
+
+### Step 3: Review Requirements
+
+For each requirement:
+- [ ] Is it necessary for the goal?
+- [ ] Is it achievable with current tech?
+- [ ] Is it testable?
+- [ ] Is priority correctly assigned?
+
+### Step 4: Check Completeness
+
+Ensure all sections are filled:
+
+| Section | Status | Notes |
+|---------|--------|-------|
+| Overview | ✅/❌ | |
+| User Stories | ✅/❌ | |
+| Requirements | ✅/❌ | |
+| Technical Spec | ✅/❌ | |
+| UX Spec | ✅/❌ | |
+| UI Spec | ✅/❌ | |
+| Acceptance Criteria | ✅/❌ | |
+| Implementation Plan | ✅/❌ | |
+
+### Step 5: Identify Risks
+
+Document potential risks:
+- Technical risks (complexity, dependencies)
+- Resource risks (time, skills)
+- User risks (adoption, confusion)
+- Business risks (competition, relevance)
+
+### Step 6: Generate Review Summary
+
+Create a review summary with:
+
+```markdown
+## Product Review Summary
+
+**PRD:** [Feature Name]
+**Reviewer:** Product Agent
+**Date:** YYYY-MM-DD
+**Status:** Approved / Changes Requested / Blocked
+
+### Overview Assessment
+
+| Criteria | Score | Notes |
+|----------|-------|-------|
+| Problem Clarity | 1-5 | |
+| Solution Fit | 1-5 | |
+| Scope Appropriateness | 1-5 | |
+| Requirements Quality | 1-5 | |
+| Technical Feasibility | 1-5 | |
+| **Overall** | X/25 | |
+
+### Strengths
+1. [Strength 1]
+2. [Strength 2]
+
+### Concerns
+1. [Concern 1] - Severity: High/Medium/Low
+2. [Concern 2] - Severity: High/Medium/Low
+
+### Required Changes (if any)
+1. [ ] [Change 1]
+2. [ ] [Change 2]
+
+### Recommendations
+1. [Recommendation 1]
+2. [Recommendation 2]
+
+### Risk Assessment
+
+| Risk | Impact | Likelihood | Mitigation |
+|------|--------|------------|------------|
+| [Risk 1] | High/Med/Low | High/Med/Low | [Strategy] |
+
+### Decision
+
+**Status:** [Approved / Changes Requested / Blocked]
+
+**Rationale:** [Why this decision was made]
+
+**Next Steps:**
+1. [Step 1]
+2. [Step 2]
+```
+
+## Approval Criteria
+
+### Auto-Approve (Score >= 20/25)
+- All sections complete
+- No high-severity concerns
+- Clear acceptance criteria
+- Reasonable scope
+
+### Changes Requested (Score 15-19)
+- Missing or incomplete sections
+- Medium-severity concerns
+- Ambiguous requirements
+- Scope creep detected
+
+### Blocked (Score < 15)
+- Major gaps in PRD
+- High-severity concerns
+- Technical impossibility
+- Misaligned with product goals
+
+## Output
+
+Updates/creates review in PRD folder:
+
+```
+PRDs/active/P{X}-{feature-name}/
+├── PRD.md
+├── tasks.md
+├── ux-notes.md (if exists)
+├── ui-spec.md (if exists)
+└── review.md   # Product review summary
+```
+
+## Review Checklist
+
+### Problem & Solution
+- [ ] Problem is real and worth solving
+- [ ] Solution addresses root cause
+- [ ] Scope is well-defined
+- [ ] Non-goals prevent scope creep
+
+### User Stories
+- [ ] Cover all user types
+- [ ] Follow proper format
+- [ ] Are testable
+- [ ] Have appropriate priorities
+
+### Requirements
+- [ ] Necessary and sufficient
+- [ ] Technically feasible
+- [ ] Testable/verifiable
+- [ ] Prioritized correctly
+
+### Technical Spec
+- [ ] Follows CLAUDE.md patterns
+- [ ] Reuses existing components
+- [ ] Dependencies identified
+- [ ] No over-engineering
+
+### UX Spec
+- [ ] User flows complete
+- [ ] States defined
+- [ ] Accessibility considered
+- [ ] Consistent with app
+
+### UI Spec
+- [ ] Components defined
+- [ ] Uses design system
+- [ ] Responsive behavior
+- [ ] No hardcoded values
+
+### Acceptance Criteria
+- [ ] Definition of Done clear
+- [ ] Test cases comprehensive
+- [ ] Quality checks included
+
+## Next Steps
+
+After approval:
+1. `/generate-tasks` - Create implementation tasks (if not done)
+2. Assign to developer
+3. Begin implementation
+4. Schedule design review (if needed)
diff --git a/ComfyUI_vibe/.claude/commands/quick-prd.md b/ComfyUI_vibe/.claude/commands/quick-prd.md
new file mode 100644
index 000000000..b0aa2a061
--- /dev/null
+++ b/ComfyUI_vibe/.claude/commands/quick-prd.md
@@ -0,0 +1,110 @@
+# Quick PRD
+
+Create a lightweight PRD for smaller features or enhancements.
+
+## Usage
+
+```
+/quick-prd "Feature Name" --priority P2
+```
+
+Or interactively:
+```
+/quick-prd
+```
+
+## When to Use
+
+Use quick PRD for:
+- Small enhancements
+- Bug fixes that need documentation
+- Minor UI changes
+- Features that don't need full technical specification
+
+For complex features, use `/create-prd` instead.
+
+## Process
+
+### Step 1: Gather Basic Info
+
+Ask for:
+1. Feature name
+2. One-sentence description
+3. Priority (P0-P3)
+4. 3-5 requirements
+
+### Step 2: Create Quick PRD
+
+1. Create folder: `PRDs/active/P{X}-{feature-name}/`
+2. Copy `PRDs/_templates/quick-prd.md`
+3. Fill in sections
+
+### Step 3: Generate Content
+
+Fill in:
+- Summary (1 paragraph)
+- Problem (1-2 sentences)
+- Solution (brief description)
+- Requirements (3-5 items)
+- Acceptance criteria (3-5 checkboxes)
+- Implementation notes (affected files)
+
+## Output
+
+Creates:
+```
+PRDs/active/P{X}-{feature-name}/
+└── PRD.md   # Quick PRD (single file)
+```
+
+## Template
+
+```markdown
+# Quick PRD: [Feature Name]
+
+| Priority | P{X} |
+| Status | Draft |
+| Owner | [Name] |
+| Created | YYYY-MM-DD |
+
+## Summary
+[One paragraph]
+
+## Problem
+[What problem does this solve?]
+
+## Solution
+[Brief description]
+
+## Requirements
+1. [Requirement]
+2. [Requirement]
+3. [Requirement]
+
+## Acceptance Criteria
+- [ ] [Criterion]
+- [ ] [Criterion]
+- [ ] pnpm typecheck passes
+- [ ] pnpm lint passes
+
+## Implementation Notes
+- Affected files: src/...
+- Dependencies: None
+```
+
+## Example
+
+**Input:**
+```
+/quick-prd "Add tooltip to node header" --priority P3
+```
+
+**Output:**
+```
+Created: PRDs/active/P3-add-tooltip-to-node-header/PRD.md
+
+Quick PRD created with:
+- Summary: Add informative tooltips to node headers
+- 3 requirements
+- 4 acceptance criteria
+```
diff --git a/ComfyUI_vibe/.claude/commands/ui-design.md b/ComfyUI_vibe/.claude/commands/ui-design.md
new file mode 100644
index 000000000..a3af059f9
--- /dev/null
+++ b/ComfyUI_vibe/.claude/commands/ui-design.md
@@ -0,0 +1,267 @@
+# UI Design Agent
+
+Create detailed UI component specifications for a PRD.
+
+## Usage
+
+```
+/ui-design [path-to-prd]
+```
+
+Or run from within a PRD folder to design UI for that PRD.
+
+## Role
+
+As the UI Agent, you will:
+1. Review PRD and UX specification
+2. Define component hierarchy
+3. Specify visual design details
+4. Create component interfaces (props, events)
+5. Ensure consistency with design system
+
+## Process
+
+### Step 1: Read Context
+
+1. Read the PRD file (especially UX Specification)
+2. Review existing components in `src/components/v2/`
+3. Check design tokens in `src/assets/css/main.css`
+4. Review type definitions in `src/types/`
+
+### Step 2: Identify Components Needed
+
+For each UI element in the user flow:
+1. Can an existing component be reused?
+2. Does an existing component need modification?
+3. Is a new component needed?
+
+### Step 3: Define Component Hierarchy
+
+Map out the component tree:
+
+```
+FeatureRoot
+├── FeatureHeader
+│   ├── Title
+│   └── CloseButton
+├── FeatureContent
+│   ├── SearchInput
+│   └── ResultsList
+│       └── ResultItem (repeated)
+└── FeatureFooter
+    └── ActionButtons
+```
+
+### Step 4: Specify Each Component
+
+For each new component, define:
+
+```typescript
+// Component: FeatureName
+// Location: src/components/v2/{category}/{FeatureName}.vue
+
+interface Props {
+  title: string
+  items: Item[]
+  isLoading?: boolean
+}
+
+interface Emits {
+  'select': [item: Item]
+  'close': []
+}
+
+// Slots
+// - default: Main content
+// - header: Custom header
+// - footer: Custom footer
+```
+
+### Step 5: Define Visual Specifications
+
+For each component, specify:
+
+#### Layout
+- Display type (flex, grid)
+- Dimensions (width, height, min/max)
+- Spacing (padding, margin, gap)
+
+#### Colors (use semantic tokens)
+- Background: `bg-surface-card`
+- Text: `text-primary`, `text-secondary`
+- Border: `border-surface-border`
+- Hover: `hover:bg-surface-hover`
+
+#### Typography
+- Font size: `text-sm`, `text-base`, `text-lg`
+- Font weight: `font-normal`, `font-medium`, `font-semibold`
+- Line height: `leading-tight`, `leading-normal`
+
+#### Effects
+- Shadows: `shadow-sm`, `shadow-md`
+- Transitions: `transition-colors duration-150`
+- Border radius: `rounded`, `rounded-lg`
+
+### Step 6: Generate UI Specification
+
+Update the PRD's UI Specification section (Section 6) with:
+
+```markdown
+## 6. UI Specification
+
+### 6.1 Component Hierarchy
+
+```
+FeaturePanel
+├── PanelHeader
+├── SearchSection
+│   └── SearchInput
+├── ResultsSection
+│   └── ResultItem (v-for)
+└── PanelFooter
+```
+
+### 6.2 Component Specifications
+
+#### FeaturePanel
+
+**Location:** `src/components/v2/feature/FeaturePanel.vue`
+
+**Props:**
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| visible | boolean | false | Controls panel visibility |
+| title | string | required | Panel title |
+
+**Events:**
+| Event | Payload | Description |
+|-------|---------|-------------|
+| close | void | Emitted when panel closes |
+
+**Slots:**
+| Slot | Description |
+|------|-------------|
+| default | Main content |
+
+**Styles:**
+```css
+.feature-panel {
+  @apply fixed right-0 top-0 h-full w-80;
+  @apply bg-surface-card border-l border-surface-border;
+  @apply shadow-lg;
+}
+```
+
+#### SearchInput
+
+**Location:** `src/components/v2/feature/SearchInput.vue`
+
+**Props:**
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| modelValue | string | '' | Search query |
+| placeholder | string | 'Search...' | Placeholder text |
+| debounce | number | 300 | Debounce delay in ms |
+
+**Events:**
+| Event | Payload | Description |
+|-------|---------|-------------|
+| update:modelValue | string | v-model update |
+| search | string | Debounced search triggered |
+
+### 6.3 Design Tokens
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| `--panel-width` | 320px | Panel width |
+| `--item-height` | 48px | List item height |
+| `--transition-speed` | 150ms | Animation duration |
+
+### 6.4 Responsive Behavior
+
+| Breakpoint | Behavior |
+|------------|----------|
+| < 640px (sm) | Full-width panel |
+| >= 640px | Fixed 320px width |
+
+### 6.5 Animation Specifications
+
+| Animation | Property | Duration | Easing |
+|-----------|----------|----------|--------|
+| Panel open | transform | 200ms | ease-out |
+| Panel close | transform | 150ms | ease-in |
+| Hover | background | 150ms | ease |
+```
+
+## Output
+
+Updates the PRD file with:
+1. Complete UI Specification section
+2. Component interfaces
+3. Visual specifications
+
+Creates `ui-spec.md` for detailed component documentation:
+```
+PRDs/active/P{X}-{feature-name}/
+├── PRD.md       # Updated with UI spec
+└── ui-spec.md   # Detailed component specs (if complex)
+```
+
+## Design System Reference
+
+### Semantic Color Tokens
+```css
+/* Backgrounds */
+bg-surface-card      /* Card/panel backgrounds */
+bg-surface-hover     /* Hover states */
+bg-surface-ground    /* Page background */
+
+/* Text */
+text-primary         /* Primary text */
+text-secondary       /* Secondary text */
+text-muted           /* Muted/hint text */
+
+/* Borders */
+border-surface-border /* Default borders */
+border-surface-hover  /* Hover borders */
+```
+
+### Common Tailwind Classes
+```css
+/* Layout */
+flex items-center justify-between
+grid grid-cols-2 gap-4
+
+/* Spacing */
+p-2 p-4 px-3 py-2
+m-2 mt-4 mb-2
+gap-2 gap-4
+
+/* Typography */
+text-sm text-base text-lg
+font-medium font-semibold
+leading-tight leading-normal
+
+/* Effects */
+rounded rounded-lg rounded-full
+shadow-sm shadow-md
+transition-colors duration-150
+```
+
+## Checklist
+
+- [ ] All components identified
+- [ ] Props/events typed
+- [ ] Colors use semantic tokens
+- [ ] No `dark:` variants used
+- [ ] Responsive behavior defined
+- [ ] Animations specified
+- [ ] Accessibility considered (focus states, ARIA)
+- [ ] Follows existing patterns
+
+## Next Steps
+
+After UI design:
+1. `/product-review` - Final product review
+2. `/generate-tasks` - Create implementation tasks
+3. Begin implementation
diff --git a/ComfyUI_vibe/.claude/commands/ux-review.md b/ComfyUI_vibe/.claude/commands/ux-review.md
new file mode 100644
index 000000000..39582da29
--- /dev/null
+++ b/ComfyUI_vibe/.claude/commands/ux-review.md
@@ -0,0 +1,155 @@
+# UX Review Agent
+
+Review and enhance user experience design for a PRD.
+
+## Usage
+
+```
+/ux-review [path-to-prd]
+```
+
+Or run from within a PRD folder to review that PRD.
+
+## Role
+
+As the UX Agent, you will:
+1. Review user stories for completeness
+2. Analyze user flows and journeys
+3. Identify usability concerns
+4. Suggest UX improvements
+5. Create/update UX specification section
+
+## Process
+
+### Step 1: Read PRD Context
+
+1. Read the PRD file
+2. Understand the problem statement
+3. Review existing user stories
+4. Check technical constraints
+
+### Step 2: Analyze User Flows
+
+For each user story, map out:
+1. **Entry Point**: How does the user start?
+2. **Steps**: What actions does the user take?
+3. **Decision Points**: Where does the user make choices?
+4. **Exit Points**: How does the flow end?
+5. **Error States**: What can go wrong?
+
+### Step 3: Identify UX Concerns
+
+Check for:
+- [ ] Is the feature discoverable?
+- [ ] Is the interaction intuitive?
+- [ ] Are there too many steps?
+- [ ] Is feedback immediate and clear?
+- [ ] Are error states handled gracefully?
+- [ ] Is the feature accessible (keyboard, screen readers)?
+- [ ] Does it follow existing UI patterns in the app?
+
+### Step 4: Review Against Existing Patterns
+
+Check `src/components/v2/` for:
+- Similar features and their UX patterns
+- Consistent interaction models
+- Reusable components that could be used
+
+### Step 5: Generate UX Specification
+
+Update the PRD's UX Specification section (Section 5) with:
+
+```markdown
+## 5. UX Specification
+
+### 5.1 User Flow
+
+```mermaid
+flowchart TD
+    A[User opens feature] --> B{Is data loaded?}
+    B -->|Yes| C[Display content]
+    B -->|No| D[Show loading state]
+    D --> C
+    C --> E[User interacts]
+    E --> F[System responds]
+```
+
+### 5.2 Key Interactions
+
+| Trigger | Action | Feedback | Duration |
+|---------|--------|----------|----------|
+| Click button | Opens panel | Panel slides in | 200ms |
+| Type in search | Filters results | Results update | Debounced 300ms |
+| Press Escape | Closes panel | Panel slides out | 150ms |
+
+### 5.3 States
+
+| State | Visual | Behavior |
+|-------|--------|----------|
+| Empty | Placeholder message | Show hint text |
+| Loading | Skeleton/spinner | Disable interactions |
+| Error | Error message | Show retry option |
+| Success | Content | Enable all interactions |
+
+### 5.4 Accessibility
+
+- [ ] Keyboard navigation (Tab, Enter, Escape, Arrow keys)
+- [ ] Focus management (trap focus in modals)
+- [ ] ARIA labels for screen readers
+- [ ] Sufficient color contrast
+- [ ] Touch targets >= 44px
+
+### 5.5 UX Recommendations
+
+1. **Recommendation 1**: [Description and rationale]
+2. **Recommendation 2**: [Description and rationale]
+```
+
+## Output
+
+Updates the PRD file with:
+1. Enhanced user stories (if gaps found)
+2. Complete UX Specification section
+3. UX recommendations/concerns
+
+Creates `ux-notes.md` if significant changes are suggested:
+```
+PRDs/active/P{X}-{feature-name}/
+├── PRD.md       # Updated with UX spec
+└── ux-notes.md  # Detailed UX notes (if needed)
+```
+
+## Checklist for UX Review
+
+### Discoverability
+- [ ] Can users find this feature easily?
+- [ ] Is entry point obvious?
+- [ ] Does it follow platform conventions?
+
+### Efficiency
+- [ ] Minimum steps to complete task?
+- [ ] Supports keyboard shortcuts?
+- [ ] Has sensible defaults?
+
+### Feedback
+- [ ] Loading states defined?
+- [ ] Success states defined?
+- [ ] Error states defined?
+- [ ] Progress indicators for long operations?
+
+### Consistency
+- [ ] Matches existing app patterns?
+- [ ] Uses existing components where possible?
+- [ ] Consistent terminology?
+
+### Accessibility
+- [ ] Keyboard navigable?
+- [ ] Screen reader friendly?
+- [ ] Color contrast sufficient?
+- [ ] Motion preferences respected?
+
+## Next Steps
+
+After UX review, suggest:
+1. `/ui-design` - UI Agent to create component specifications
+2. Review UX with stakeholders if significant changes proposed
diff --git a/ComfyUI_vibe/.cursorrules b/ComfyUI_vibe/.cursorrules
new file mode 100644
index 000000000..477f36bcb
--- /dev/null
+++ b/ComfyUI_vibe/.cursorrules
@@ -0,0 +1,178 @@
+# ComfyUI Vibe - Development Rules for Cursor
+# Synced from CLAUDE.md (v1.0, 2025-11-28)
+
+## Critical Rules
+
+### NEVER Do These
+- NEVER use `any` type - find or create proper types
+- NEVER use `as any` assertions - fix the underlying type issue
+- NEVER use `dark:` Tailwind variants - use semantic tokens instead
+- NEVER hardcode URLs, API endpoints, or server addresses
+- NEVER hardcode magic numbers - use named constants
+- NEVER use `@ts-ignore` without explanation
+
+### ALWAYS Do These
+- ALWAYS use Vue 3 Composition API with `<script setup lang="ts">`
+- ALWAYS define return types for functions
+- ALWAYS use strict null checks
+- ALWAYS read existing code before modifying it
+- ALWAYS verify imports exist before using them
+
+## Component Architecture
+
+This project uses **versioned UI architecture**:
+- `v1/`: Legacy interface (compatible with current ComfyUI)
+- `v2/`: Experimental interface (active development)
+- `common/`: Shared components across both versions
+
+**New features should go in `v2/` unless specifically for legacy support.**
+
+## PrimeVue Component Guidelines
+
+DO NOT use deprecated PrimeVue components. Use these replacements:
+- Dropdown → Select (`import from 'primevue/select'`)
+- OverlayPanel → Popover (`import from 'primevue/popover'`)
+- Calendar → DatePicker (`import from 'primevue/datepicker'`)
+- InputSwitch → ToggleSwitch (`import from 'primevue/toggleswitch'`)
+- Sidebar → Drawer (`import from 'primevue/drawer'`)
+
+## Vue Component Pattern
+
+```vue
+<script setup lang="ts">
+interface Props {
+  title: string
+  count?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  count: 0
+})
+
+const emit = defineEmits<{
+  update: [value: number]
+  close: []
+}>()
+
+// Use computed for derived state
+const displayValue = computed(() => props.count * 2)
+</script>
+
+<template>
+  <div class="component-name">
+    <!-- Template here -->
+  </div>
+</template>
+```
+
+## Pinia Store Pattern
+
+Use composition API style (setup stores):
+
+```typescript
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useExampleStore = defineStore('example', () => {
+  // State
+  const items = ref<Item[]>([])
+  const isLoading = ref(false)
+
+  // Getters (computed)
+  const itemCount = computed(() => items.value.length)
+
+  // Actions
+  async function fetchItems(): Promise<void> {
+    isLoading.value = true
+    try {
+      // implementation
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  return { items, isLoading, itemCount, fetchItems }
+})
+```
+
+## Naming Conventions
+
+| Type | Convention | Example |
+|------|------------|---------|
+| Components | PascalCase | `UserProfile.vue` |
+| Composables | camelCase with `use` prefix | `useAuth.ts` |
+| Stores | camelCase with `use` prefix, `Store` suffix | `useAuthStore.ts` |
+| Types/Interfaces | PascalCase | `NodeDefinition` |
+| Constants | SCREAMING_SNAKE_CASE | `MAX_RETRY_COUNT` |
+| CSS classes | kebab-case | `node-header` |
+
+## CSS/Styling Rules
+
+- Use Tailwind CSS + PrimeVue semantic theme
+- Use semantic tokens: `bg-surface-card`, `text-primary`
+- NEVER use `dark:` variants
+- NEVER use inline styles except for truly dynamic values
+
+```vue
+<!-- BAD -->
+<div class="bg-gray-800 dark:bg-gray-100" style="padding: 10px">
+
+<!-- GOOD -->
+<div class="bg-surface-card p-2.5">
+```
+
+## File Organization
+
+```
+src/
+├── components/
+│   ├── common/          # Shared across both versions
+│   ├── v1/              # Legacy interface
+│   └── v2/              # Experimental interface (use this)
+│       ├── canvas/
+│       ├── dialogs/
+│       ├── layout/
+│       ├── nodes/
+│       │   └── widgets/
+│       └── workspace/
+├── composables/
+├── services/            # API clients
+├── stores/              # Pinia stores
+├── types/               # TypeScript types
+├── views/
+│   ├── v1/
+│   └── v2/
+└── assets/
+```
+
+## Reference Files
+
+When creating new components, reference these patterns:
+- **Store**: `src/stores/comfyStore.ts`
+- **Widget**: `src/components/v2/nodes/widgets/WidgetSlider.vue`
+- **View**: `src/views/v2/workspace/ProjectsView.vue`
+- **Types**: `src/types/node.ts`
+
+## Before Creating New Components
+
+1. Check if similar component exists in `src/components/v2/`
+2. Check `src/components/common/` for shared components
+3. Review existing patterns before creating new ones
+4. Consider if the component can be made reusable
+
+## API Integration
+
+- All API calls go through `src/services/`
+- Use Zod for runtime validation of API responses
+- Handle errors gracefully with user feedback
+
+## Quick Commands
+
+```bash
+pnpm dev          # Start dev server (port 5174)
+pnpm build        # Production build
+pnpm typecheck    # Type checking
+pnpm lint         # Lint with Oxlint + ESLint
+pnpm lint:fix     # Auto-fix lint issues
+pnpm format       # Format with Prettier
+```
diff --git a/ComfyUI_vibe/.editorconfig b/ComfyUI_vibe/.editorconfig
new file mode 100644
index 000000000..34e2863b6
--- /dev/null
+++ b/ComfyUI_vibe/.editorconfig
@@ -0,0 +1,24 @@
+# ComfyUI Vibe Editor Configuration
+# https://editorconfig.org
+
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.{yaml,yml}]
+indent_size = 2
+
+[*.json]
+indent_size = 2
+
+[Makefile]
+indent_style = tab
diff --git a/ComfyUI_vibe/CLAUDE.md b/ComfyUI_vibe/CLAUDE.md
index 549ad6345..517ffdb0d 100644
--- a/ComfyUI_vibe/CLAUDE.md
+++ b/ComfyUI_vibe/CLAUDE.md
@@ -1,5 +1,8 @@
 # ComfyUI Prototypes - Development Guidelines
 
+<!-- Rules Version: 1.0 | Last Updated: 2025-11-28 -->
+<!-- Synced with: .cursorrules, .vscode/comfyui-vibe.code-snippets -->
+
 ## Project Purpose
 
 This is a prototype project for developing new ComfyUI frontend features. Code written here should be **portable** to the main `ComfyUI_frontend` repository.
@@ -60,6 +63,47 @@ async function fetchData() { ... }
 const { isLoading, error, execute } = useAsyncState(fetchFn)
 ```
 
+### 3.1 Component Size Limits (HARD RULE)
+
+- **NEVER** let a `.vue` file exceed **300 lines** of code
+- **NEVER** let `<template>` section exceed **150 lines**
+- **NEVER** let `<script>` section exceed **150 lines**
+- If a component grows beyond these limits, **STOP and refactor immediately**
+
+**When limits are exceeded:**
+1. Extract repeated UI patterns into child components
+2. Extract logic into composables
+3. Split large components into smaller, focused ones
+
+```
+src/components/
+├── common/              # Reusable UI primitives
+│   ├── TreeCategory.vue     # Collapsible category header
+│   ├── TreeItem.vue         # Tree list item
+│   ├── GridCard.vue         # Grid card component
+│   ├── ViewModeToggle.vue   # List/grid toggle
+│   ├── FilterDropdown.vue   # Filter dropdown
+│   └── SearchInput.vue      # Search input with icon
+```
+
+```vue
+<!-- BAD: 800+ line sidebar component -->
+<template>
+  <!-- Inline tree items, grid cards, dropdowns... -->
+</template>
+
+<!-- GOOD: Composed from small components -->
+<template>
+  <SidebarPanel>
+    <SearchInput v-model="query" />
+    <ViewModeToggle v-model="viewMode" />
+    <TreeCategory v-for="cat in categories" :key="cat.id">
+      <TreeItem v-for="item in cat.items" :key="item.id" />
+    </TreeCategory>
+  </SidebarPanel>
+</template>
+```
+
 ### 4. TypeScript Strict Mode
 
 - **NEVER** use `any` type - find or create proper types
@@ -252,6 +296,25 @@ When porting to ComfyUI_frontend, ensure:
 - Services use same HTTP client patterns
 - Types are compatible or easily adaptable
 
+## Common Pitfalls
+
+- NEVER use `any` type - use proper TypeScript types
+- NEVER use `as any` type assertions - fix the underlying type issue
+- NEVER use `--no-verify` flag when committing
+- NEVER delete or disable tests to make them pass
+- NEVER circumvent quality checks
+- NEVER use `dark:` Tailwind variants - use semantic tokens like `bg-surface-card`
+- NEVER use deprecated PrimeVue components (see PrimeVue section below)
+
+### PrimeVue Component Replacements
+
+DO NOT use deprecated components. Use these instead:
+- Dropdown → Select (`import from 'primevue/select'`)
+- OverlayPanel → Popover (`import from 'primevue/popover'`)
+- Calendar → DatePicker (`import from 'primevue/datepicker'`)
+- InputSwitch → ToggleSwitch (`import from 'primevue/toggleswitch'`)
+- Sidebar → Drawer (`import from 'primevue/drawer'`)
+
 ## Pre-commit Checklist
 
 Before committing:
@@ -262,3 +325,14 @@ Before committing:
 - [ ] No `any` types
 - [ ] Components are properly typed
 - [ ] New files follow naming conventions
+
+## Agent Workflow
+
+This project uses specialized Claude agents for different phases of development:
+
+1. **PRD Agent** (`/create-prd`) - Creates Product Requirements Documents
+2. **UX Agent** (`/ux-review`) - Reviews and designs user experience flows
+3. **UI Agent** (`/ui-design`) - Creates UI component specifications
+4. **Product Agent** (`/product-review`) - Reviews from product perspective
+
+See `.claude/commands/` for all available commands.
diff --git a/ComfyUI_vibe/PRDs/README.md b/ComfyUI_vibe/PRDs/README.md
new file mode 100644
index 000000000..ba2551b12
--- /dev/null
+++ b/ComfyUI_vibe/PRDs/README.md
@@ -0,0 +1,96 @@
+# Product Requirements Documents (PRDs)
+
+This folder contains all PRDs for ComfyUI Vibe features.
+
+## Structure
+
+```
+PRDs/
+├── _templates/          # PRD templates
+│   ├── feature-prd.md   # Full feature template
+│   ├── enhancement-prd.md
+│   └── quick-prd.md     # Lightweight template
+├── active/              # Currently being worked on
+├── backlog/             # Approved but not started
+├── completed/           # Shipped features
+└── archived/            # Deprecated/cancelled
+```
+
+## How to Create a PRD
+
+### Option 1: Using Claude Commands (Recommended)
+
+```bash
+# Full PRD with all sections
+/create-prd
+
+# Quick PRD for small features
+/quick-prd "Feature Name" --priority P2
+```
+
+### Option 2: Manual Creation
+
+1. Copy the appropriate template from `_templates/`
+2. Create a folder in `active/` with naming: `P{priority}-{feature-name}/`
+3. Rename the template to `PRD.md`
+4. Fill in all required sections
+
+## Naming Convention
+
+Feature folders use this pattern:
+```
+P{0-3}-{feature-name}/
+```
+
+Examples:
+- `P0-critical-auth-fix/`
+- `P1-node-search-panel/`
+- `P2-dark-mode-toggle/`
+- `P3-keyboard-shortcuts/`
+
+## Priority Levels
+
+| Priority | Meaning | SLA |
+|----------|---------|-----|
+| P0 | Critical - Blocks release, security issues | Immediate |
+| P1 | High - Important feature, must-have | Current sprint |
+| P2 | Medium - Nice to have, planned | Next sprint |
+| P3 | Low - Future consideration | Backlog |
+
+## Workflow
+
+1. **PRD Created** → `active/`
+2. **PRD Approved** → Start implementation
+3. **Feature Shipped** → Move to `completed/`
+4. **PRD Cancelled** → Move to `archived/`
+
+## Agent Workflow
+
+After PRD creation, use these agents in sequence:
+
+1. `/create-prd` - Create the PRD
+2. `/ux-review` - UX Agent reviews user flows
+3. `/ui-design` - UI Agent creates component specs
+4. `/product-review` - Product Agent final review
+5. `/generate-tasks` - Convert PRD to implementation tasks
+
+## PRD Sections Overview
+
+### Required Sections
+- Overview (problem statement, goals)
+- User Stories
+- Requirements (functional & non-functional)
+- Acceptance Criteria
+
+### Optional Sections
+- Technical Specification
+- Implementation Plan
+- Risks and Mitigations
+
+## Templates
+
+| Template | Use Case |
+|----------|----------|
+| `feature-prd.md` | New features requiring full spec |
+| `enhancement-prd.md` | Improvements to existing features |
+| `quick-prd.md` | Small changes, bug fixes |
diff --git a/ComfyUI_vibe/PRDs/_templates/enhancement-prd.md b/ComfyUI_vibe/PRDs/_templates/enhancement-prd.md
new file mode 100644
index 000000000..6f8e5b565
--- /dev/null
+++ b/ComfyUI_vibe/PRDs/_templates/enhancement-prd.md
@@ -0,0 +1,80 @@
+# Enhancement PRD: [Enhancement Name]
+
+| Field | Value |
+|-------|-------|
+| **Priority** | P0 / P1 / P2 / P3 |
+| **Status** | Draft / Approved / In Progress / Done |
+| **Owner** | [Name] |
+| **Created** | YYYY-MM-DD |
+| **Related Feature** | [Link to original feature PRD] |
+
+---
+
+## 1. Overview
+
+### Current State
+[Describe how the existing feature works currently]
+
+### Problem
+[What's wrong with the current implementation? What user feedback prompted this?]
+
+### Proposed Enhancement
+[Brief description of what changes will be made]
+
+---
+
+## 2. User Stories
+
+| ID | As a... | I want to... | So that... |
+|----|---------|--------------|------------|
+| US-01 | [role] | [action] | [benefit] |
+
+---
+
+## 3. Changes Required
+
+### 3.1 UI Changes
+
+| Component | Current | Proposed |
+|-----------|---------|----------|
+| [Name] | [Description] | [Description] |
+
+### 3.2 Behavior Changes
+
+| Scenario | Current Behavior | New Behavior |
+|----------|------------------|--------------|
+| [Scenario] | [Description] | [Description] |
+
+### 3.3 File Changes
+
+| File | Change Type | Description |
+|------|-------------|-------------|
+| `src/...` | Modify | [What changes] |
+
+---
+
+## 4. Acceptance Criteria
+
+- [ ] [Criterion 1]
+- [ ] [Criterion 2]
+- [ ] Backward compatible (no breaking changes)
+- [ ] `pnpm typecheck` passes
+- [ ] `pnpm lint` passes
+- [ ] `pnpm build` succeeds
+
+---
+
+## 5. Risks
+
+| Risk | Mitigation |
+|------|------------|
+| Breaking existing functionality | [Strategy] |
+| | |
+
+---
+
+## 6. Testing Plan
+
+| Test Case | Steps | Expected Result |
+|-----------|-------|-----------------|
+| TC-01 | [Steps] | [Result] |
diff --git a/ComfyUI_vibe/PRDs/_templates/feature-prd.md b/ComfyUI_vibe/PRDs/_templates/feature-prd.md
new file mode 100644
index 000000000..e357aa8cf
--- /dev/null
+++ b/ComfyUI_vibe/PRDs/_templates/feature-prd.md
@@ -0,0 +1,213 @@
+# PRD: [Feature Name]
+
+| Field | Value |
+|-------|-------|
+| **PRD ID** | PRD-YYYY-MM-NNN |
+| **Status** | Draft / In Review / Approved / In Progress / Completed |
+| **Priority** | P0 (Critical) / P1 (High) / P2 (Medium) / P3 (Low) |
+| **Owner** | [Name/GitHub handle] |
+| **Created** | YYYY-MM-DD |
+| **Last Updated** | YYYY-MM-DD |
+| **GitHub Issue** | #[issue-number] or N/A |
+| **Target Version** | v[X.Y.Z] |
+
+---
+
+## 1. Overview
+
+### 1.1 Problem Statement
+[Describe the problem this feature solves. What pain point does it address?]
+
+### 1.2 Goal
+[Clear, measurable objective. What does success look like?]
+
+### 1.3 Non-Goals
+[Explicitly state what this PRD does NOT cover to prevent scope creep]
+
+- Not implementing X
+- Not changing Y
+
+---
+
+## 2. User Stories
+
+| ID | As a... | I want to... | So that... | Priority |
+|----|---------|--------------|------------|----------|
+| US-01 | [role] | [action] | [benefit] | P0-P3 |
+| US-02 | | | | |
+
+---
+
+## 3. Requirements
+
+### 3.1 Functional Requirements
+
+| ID | Requirement | Priority | Notes |
+|----|-------------|----------|-------|
+| FR-01 | [Description] | P0-P3 | |
+| FR-02 | | | |
+
+### 3.2 Non-Functional Requirements
+
+| ID | Category | Requirement |
+|----|----------|-------------|
+| NFR-01 | Performance | [e.g., "Load time < 200ms"] |
+| NFR-02 | Accessibility | [e.g., "WCAG 2.1 AA compliant"] |
+| NFR-03 | Browser Support | [e.g., "Chrome, Firefox, Safari latest"] |
+
+---
+
+## 4. Technical Specification
+
+### 4.1 Architecture
+
+[Describe how this fits into the existing architecture]
+
+**Affected Layers:**
+- [ ] Components (v1/v2)
+- [ ] Composables
+- [ ] Stores (Pinia)
+- [ ] Services
+- [ ] Types
+- [ ] Utils
+
+### 4.2 Design Patterns to Follow
+
+Based on CLAUDE.md guidelines:
+- [ ] Composition API with `<script setup lang="ts">`
+- [ ] No hardcoded values (use `import.meta.env.VITE_*`)
+- [ ] TypeScript strict mode (no `any` types)
+- [ ] Semantic CSS tokens (no `dark:` variants)
+- [ ] DRY principles via composables
+- [ ] Zod for API response validation
+
+### 4.3 Component Interface
+
+```typescript
+// Example interface definition
+interface Props {
+  // Define expected props
+}
+
+interface Emits {
+  // Define events
+}
+```
+
+### 4.4 Dependencies
+
+| Dependency | Type | Purpose |
+|------------|------|---------|
+| [Name] | Internal/External | [Why needed] |
+
+---
+
+## 5. UX Specification
+
+### 5.1 User Flow
+
+[Describe the user journey step by step]
+
+1. User opens...
+2. User clicks...
+3. System responds...
+
+### 5.2 Wireframes/Mockups
+
+[Link to Figma/design files or embed images]
+
+### 5.3 Interactions
+
+| Trigger | Action | Feedback |
+|---------|--------|----------|
+| Click button X | Opens modal | Modal animates in |
+| | | |
+
+---
+
+## 6. UI Specification
+
+### 6.1 Components Needed
+
+| Component | Type | Location |
+|-----------|------|----------|
+| [Name] | New/Existing | src/components/v2/... |
+
+### 6.2 Styling Requirements
+
+- Colors: [semantic tokens to use]
+- Typography: [font sizes, weights]
+- Spacing: [padding, margins]
+- Responsive: [breakpoints to consider]
+
+---
+
+## 7. Acceptance Criteria
+
+### 7.1 Definition of Done
+
+- [ ] All user stories implemented
+- [ ] Unit tests written and passing
+- [ ] `pnpm typecheck` passes
+- [ ] `pnpm lint` passes
+- [ ] `pnpm build` succeeds
+- [ ] Code reviewed and approved
+- [ ] No hardcoded values
+- [ ] Follows naming conventions
+
+### 7.2 Test Scenarios
+
+| ID | Scenario | Expected Result |
+|----|----------|-----------------|
+| TC-01 | [Description] | [Outcome] |
+| TC-02 | | |
+
+---
+
+## 8. Implementation Plan
+
+### 8.1 Phases
+
+| Phase | Tasks | Assignee |
+|-------|-------|----------|
+| 1 | [Setup/Foundation] | |
+| 2 | [Core Implementation] | |
+| 3 | [Testing/Polish] | |
+
+### 8.2 File Changes
+
+| File Path | Action | Description |
+|-----------|--------|-------------|
+| `src/components/v2/[name].vue` | Create | New component |
+| `src/stores/[name]Store.ts` | Modify | Add state |
+
+---
+
+## 9. Risks and Mitigations
+
+| Risk | Impact | Probability | Mitigation |
+|------|--------|-------------|------------|
+| [Description] | High/Med/Low | High/Med/Low | [Strategy] |
+
+---
+
+## 10. Open Questions
+
+- [ ] [Question 1]
+- [ ] [Question 2]
+
+---
+
+## 11. References
+
+- [Link to design mockups]
+- [Link to related PRDs]
+- [Link to external documentation]
+
+---
+
+## Revision History
+
+| Date | Author | Changes |
+|------|--------|---------|
+| YYYY-MM-DD | [Name] | Initial draft |
diff --git a/ComfyUI_vibe/PRDs/_templates/quick-prd.md b/ComfyUI_vibe/PRDs/_templates/quick-prd.md
new file mode 100644
index 000000000..7ad83eb9d
--- /dev/null
+++ b/ComfyUI_vibe/PRDs/_templates/quick-prd.md
@@ -0,0 +1,57 @@
+# Quick PRD: [Feature Name]
+
+| Field | Value |
+|-------|-------|
+| **Priority** | P0 / P1 / P2 / P3 |
+| **Status** | Draft / Approved / In Progress / Done |
+| **Owner** | [Name] |
+| **Created** | YYYY-MM-DD |
+
+---
+
+## Summary
+
+[One paragraph description of what this feature/change does]
+
+---
+
+## Problem
+
+[What problem does this solve?]
+
+---
+
+## Solution
+
+[Brief description of the proposed solution]
+
+---
+
+## Requirements
+
+1. [Requirement 1]
+2. [Requirement 2]
+3. [Requirement 3]
+
+---
+
+## Acceptance Criteria
+
+- [ ] [Criterion 1]
+- [ ] [Criterion 2]
+- [ ] [Criterion 3]
+- [ ] `pnpm typecheck` passes
+- [ ] `pnpm lint` passes
+
+---
+
+## Implementation Notes
+
+**Affected Files:**
+- `src/...`
+
+**Dependencies:**
+- None / [List dependencies]
+
+**Patterns to Follow:**
+- Reference: `src/components/v2/...`