mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-02 14:27:40 +00:00
feat(infra): Add development rules, PRD system, and Claude agent commands
- 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>
This commit is contained in:
orkhanart
191
ComfyUI_vibe/.claude/commands/create-component.md
Normal file
191
ComfyUI_vibe/.claude/commands/create-component.md
Normal file
@@ -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
|
||||
```
|
||||
89
ComfyUI_vibe/.claude/commands/create-prd.md
Normal file
89
ComfyUI_vibe/.claude/commands/create-prd.md
Normal file
@@ -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
|
||||
171
ComfyUI_vibe/.claude/commands/generate-tasks.md
Normal file
171
ComfyUI_vibe/.claude/commands/generate-tasks.md
Normal file
@@ -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
|
||||
214
ComfyUI_vibe/.claude/commands/product-review.md
Normal file
214
ComfyUI_vibe/.claude/commands/product-review.md
Normal file
@@ -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)
|
||||
110
ComfyUI_vibe/.claude/commands/quick-prd.md
Normal file
110
ComfyUI_vibe/.claude/commands/quick-prd.md
Normal file
@@ -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
|
||||
```
|
||||
267
ComfyUI_vibe/.claude/commands/ui-design.md
Normal file
267
ComfyUI_vibe/.claude/commands/ui-design.md
Normal file
@@ -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
|
||||
155
ComfyUI_vibe/.claude/commands/ux-review.md
Normal file
155
ComfyUI_vibe/.claude/commands/ux-review.md
Normal file
@@ -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
|
||||
178
ComfyUI_vibe/.cursorrules
Normal file
178
ComfyUI_vibe/.cursorrules
Normal file
@@ -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
|
||||
```
|
||||
24
ComfyUI_vibe/.editorconfig
Normal file
24
ComfyUI_vibe/.editorconfig
Normal file
@@ -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
|
||||
@@ -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.
|
||||
|
||||
96
ComfyUI_vibe/PRDs/README.md
Normal file
96
ComfyUI_vibe/PRDs/README.md
Normal file
@@ -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 |
|
||||
80
ComfyUI_vibe/PRDs/_templates/enhancement-prd.md
Normal file
80
ComfyUI_vibe/PRDs/_templates/enhancement-prd.md
Normal file
@@ -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] |
|
||||
213
ComfyUI_vibe/PRDs/_templates/feature-prd.md
Normal file
213
ComfyUI_vibe/PRDs/_templates/feature-prd.md
Normal file
@@ -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 |
|
||||
57
ComfyUI_vibe/PRDs/_templates/quick-prd.md
Normal file
57
ComfyUI_vibe/PRDs/_templates/quick-prd.md
Normal file
@@ -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/...`
|
||||
Reference in New Issue
Block a user