Home

ComfyUI Guide Wiki

Project Overview

ComfyUI Guide is a comprehensive web application built with SvelteKit and TailwindCSS, designed to help users learn and master ComfyUI for AI art creation. The project aims to provide an accessible, user-friendly interface for tutorials, documentation, and community resources.

Table of Contents

1. Project Structure
2. Technical Stack
3. Development Setup
4. Component Architecture
5. Features
6. Styling Guidelines
7. Contributing Guidelines

Project Structure

src/
├── app.css                    # Global styles and Tailwind imports
├── app.html                   # Base HTML template
├── lib/
│   ├── components/           # Reusable components
│   │   ├── layout/          # Layout components
│   │   │   ├── Footer.svelte
│   │   │   ├── Navbar.svelte
│   │   │   └── PageWrapper.svelte
│   │   └── shared/          # Shared components
│   │       ├── FeatureCard.svelte
│   │       └── ThemeToggle.svelte
│   └── stores/              # Svelte stores
│       └── theme.ts         # Theme management
└── routes/                  # SvelteKit routes
    ├── +page.svelte         # Home page
    ├── getting-started/     # Getting started guide
    ├── tutorials/          # Tutorial pages
    ├── tricks/             # Tips & tricks
    └── gallery/            # Community gallery

Technical Stack

• Framework: SvelteKit
• Styling: TailwindCSS
• Icons: Lucide Icons
• Package Manager: pnpm
• TypeScript: For type safety
• Plugins:
  • @tailwindcss/typography
  • @tailwindcss/forms
  • @tailwindcss/aspect-ratio
  • @tailwindcss/container-queries

Development Setup

Prerequisites

• Node.js >= 18.0.0
• pnpm >= 8.0.0

Installation

# Clone repository
git clone [repository-url]
cd comfyui-guide

# Install dependencies
pnpm install

# Start development server
pnpm dev

Building for Production

pnpm build
pnpm preview

Component Architecture

Layout Components

PageWrapper

The main layout container component that provides:

• Consistent page structure
• Dark mode support
• Responsive layout
• Footer integration Detailed Documentation

Navbar

Navigation component featuring:

• Responsive design
• Active page highlighting
• Dark mode toggle
• Brand identity

Footer

Footer component with:

• Copyright information
• Dark mode support
• Responsive layout

Shared Components

FeatureCard

Reusable card component for:

• Feature highlights
• Tutorial previews
• Gallery items

ThemeToggle

Theme switching component with:

• System preference detection
• Local storage persistence
• Smooth transitions

Features

1. Theme Management

• Dark/Light mode toggle
• System preference detection
• Persistent user preference
• Smooth transitions

2. Responsive Design

• Mobile-first approach
• Breakpoint system:
  • sm: 640px
  • md: 768px
  • lg: 1024px
  • xl: 1280px
  • 2xl: 1536px

3. Navigation

• Responsive navigation bar
• Active page highlighting
• Smooth page transitions

4. Content Sections

1. Home Page

   • Feature overview
   • Quick navigation
   • Welcome message

2. Getting Started

   • Installation guide
   • Basic concepts
   • Setup instructions

3. Tutorials

   • Step-by-step guides
   • Advanced techniques
   • Best practices

4. Tips & Tricks

   • Performance optimization
   • Workflow management
   • Quality improvements

5. Gallery

   • Community showcase
   • Example workflows
   • Achievement highlights

Styling Guidelines

Color Palette

// Primary colors
indigo-600: '#4F46E5' // Primary brand color
indigo-400: '#818CF8' // Secondary brand color

// Gray scale
gray-900: '#111827' // Dark text
gray-100: '#F3F4F6' // Light background

Typography

• Font Family: System default stack
• Scale:
  • text-sm: 0.875rem
  • text-base: 1rem
  • text-lg: 1.125rem
  • text-xl: 1.25rem
  • text-2xl: 1.5rem
  • text-3xl: 1.875rem

Spacing System

Following Tailwind's spacing scale:

• 4: 1rem
• 6: 1.5rem
• 8: 2rem
• 12: 3rem
• 16: 4rem

Dark Mode

• Use dark: prefix for dark mode styles
• Maintain consistent contrast ratios
• Implement smooth transitions

Contributing Guidelines

Code Style

• Use TypeScript for type safety
• Follow SvelteKit conventions
• Implement proper component documentation
• Maintain consistent file structure

Commit Convention

type(scope): description

feat: new feature
fix: bug fix
docs: documentation
style: formatting
refactor: code restructure
test: testing
chore: maintenance

Development Process

1. Fork repository
2. Create feature branch
3. Implement changes
4. Write/update tests
5. Submit pull request

Documentation

• Update wiki for new features
• Include component documentation
• Provide usage examples
• Document breaking changes

Performance Optimization

• Implement lazy loading
• Optimize image delivery
• Minimize bundle size
• Use proper caching strategies

Testing Strategy

• Component testing
• Route testing
• Integration testing
• Accessibility testing

Deployment

• Build process
• Environment configuration
• Performance monitoring
• Error tracking

Resources

• SvelteKit Documentation
• TailwindCSS Documentation
• ComfyUI Repository
• Contribution Guidelines

License

MIT License - see LICENSE file for details.