Skip to content

GETTING_STARTED.md

Latest commit

 

History

History
275 lines (198 loc) · 6.31 KB

GETTING_STARTED.md

File metadata and controls

275 lines (198 loc) · 6.31 KB
Raw

Getting Started

Quick guide for teammates to start prototyping on this project.

Clone & Branch Setup

Each team member has their own main and stage branches.

For Alex (comfydesigner)

git clone https://github.com/orkhanart/comfy_vibe.git
cd comfy_vibe
git checkout alex/main
pnpm install
pnpm dev

Your branches:

  • alex/main - your main working branch
  • alex/stage - for staging/testing changes

For Pablo (PabloWiedemann)

git clone https://github.com/orkhanart/comfy_vibe.git
cd comfy_vibe
git checkout pablo/main
pnpm install
pnpm dev

Your branches:

  • pablo/main - your main working branch
  • pablo/stage - for staging/testing changes

Branch Workflow

  1. Work on your [name]/main branch
  2. Push changes to your branch
  3. When ready for review, create PR to main

Deploy to Vercel

Each branch automatically gets a preview URL when pushed. To set up your own Vercel deployment:

  1. Go to vercel.com and sign in with GitHub
  2. Click "Add New Project"
  3. Import the orkhanart/comfy_vibe repository
  4. Configure:
    • Framework Preset: Vite
    • Root Directory: ./
    • Build Command: pnpm build
    • Output Directory: dist
    • Install Command: pnpm install
  5. Under "Git" settings, set your branch (alex/main or pablo/main) as the production branch
  6. Deploy

Your preview URLs:

  • alex/main → comfy-vibe-alex.vercel.app (or similar)
  • pablo/main → comfy-vibe-pablo.vercel.app (or similar)

Every push to your branch will auto-deploy.

Commands

pnpm install      # Install dependencies
pnpm dev          # Start dev server → http://localhost:5174
pnpm typecheck    # Type checking
pnpm lint:fix     # Fix linting issues
pnpm format       # Format code
pnpm build        # Production build

Project Overview

Vue 3 + TypeScript frontend prototype for ComfyUI - a node-based AI workflow editor. Currently uses mock data (no backend required).

Main interfaces:

  • /workflow-editor - Full node graph editor (Vue Flow)
  • /linear-mode - Simplified step-by-step interface
  • /workspace - Dashboard for managing workflows, assets, models

How to Prompt AI (Claude Code)

Starting a New Feature

"I want to add [feature] to [location]. Look at existing patterns in [similar component] for reference."

Fixing Bugs

"There's a bug in [component]: [describe issue]. Expected: [X]. Actual: [Y]."

Refactoring

"Refactor [component/file] to [goal]. Keep same functionality but [improvement]."

Understanding Code

"Explain how [feature/component] works. What files are involved?"

How to Edit Code

Where to Put Things

What Where
New page/route src/views/
Reusable component src/components/[domain]/
UI primitives src/components/ui/
State management src/stores/
TypeScript types src/types/
Mock data src/data/
API calls src/services/
Reusable logic src/composables/

Key Patterns

  • All components use Vue 3 Composition API with <script setup lang="ts">
  • Styling uses Tailwind CSS utility classes
  • State managed through Pinia stores
  • Theme supports light/dark modes via CSS variables

How to Create a PRD

Step 1: Define the Problem

  • What user problem are we solving?
  • Who is affected?
  • What's the current experience?

Step 2: Define Success

  • Primary and secondary goals
  • Non-goals (what's out of scope)

Step 3: Describe the Solution

  • User flow (step by step)
  • UI/UX requirements
  • Technical requirements (store, components, types)

Step 4: Break into Tasks

  • Create types
  • Add state to store
  • Create component
  • Connect to view
  • Add styling

PRD Template

# Feature: [Name]

## Problem
[1-2 sentences]

## Solution
[1-2 sentences]

## User Stories
- As a [user], I want to [action] so that [benefit]

## Requirements
### Must Have
- [ ] Requirement 1
- [ ] Requirement 2

### Nice to Have
- [ ] Optional 1

## Design
[Link to Figma or description]

## Technical Notes
- Affects: [components/stores]
- New files: [list]

## Tasks
- [ ] Task 1
- [ ] Task 2

How to Brainstorm

Exploring the Codebase

"What components handle [feature]?" "How does [functionality] work?"

Generating Ideas

"I want to improve [area]. Current behavior: [X]. What approaches could work?"

Comparing Approaches

"Compare approaches for [feature]: A vs B. What are the tradeoffs?"

Validating Ideas

"I'm thinking of implementing [idea]. Does this fit the existing architecture?"

How to Start Prototyping

1. Understand First

  • Read ARCHITECTURE.md
  • Look at similar components in the codebase
  • Ask Claude what patterns to follow

2. Start Small

  • Create minimal version first
  • Focus on core functionality
  • Skip advanced features initially

3. Iterate

  • Add features incrementally
  • Follow existing patterns
  • Test as you go

4. Polish

  • Improve styling
  • Add proper TypeScript types
  • Match existing design patterns

Quick Reference

Key Files

File Purpose
src/stores/uiStore.ts Main UI state (theme, sidebars, tabs)
src/data/workspaceMockData.ts All mock data
src/components/ui/ Base UI components
src/views/WorkflowEditorView.vue Main editor page
ARCHITECTURE.md Full architecture docs

Available UI Components

Button, Card, Dialog, Icon, Input, Select, Switch, Textarea, Popover, Tooltip

Figma Integration

Connect Figma to Claude Code for design-to-code workflows.

Setup

  1. Add Figma MCP Server

    claude mcp add figma -- npx -y figma-developer-mcp --stdio

  2. Authenticate - Run /mcp in Claude Code, then authenticate in browser

  3. Verify - You should see: Authentication successful. Connected to figma.

Usage

Share a Figma URL with Claude:

"Implement this design: [Figma URL]"

"Create a Vue component matching this Figma frame"

Tips

  1. Read before writing - Always look at existing patterns first
  2. Keep files small - Max 500 lines per file
  3. Use existing components - Check src/components/ui/ before creating new ones
  4. Type everything - Use TypeScript interfaces
  5. Mock data first - Add to src/data/ before worrying about APIs
  6. Commit often - Small, focused commits with clear messages