Claude-Code-Workflow/EXAMPLES.md

📖 Claude Code Workflow - Real-World Examples

This document provides practical, real-world examples of using CCW for common development tasks.

---

📋 Table of Contents

• Quick Start Examples
• Web Development
• API Development
• Testing & Quality Assurance
• Refactoring
• UI/UX Design
• Bug Fixes
• Documentation
• DevOps & Automation
• Complex Projects

---

🚀 Quick Start Examples

Example 1: Simple Express API

Objective: Create a basic Express.js API with CRUD operations

# Option 1: Lite workflow (fastest)
/workflow:lite-plan "Create Express API with CRUD endpoints for users (GET, POST, PUT, DELETE)"

# Option 2: Full workflow (more structured)
/workflow:plan "Create Express API with CRUD endpoints for users"
/workflow:execute

What CCW does:

1. Analyzes your project structure
2. Creates Express app setup
3. Implements CRUD routes
4. Adds error handling middleware
5. Creates basic tests

Result:

src/
├── app.js              # Express app setup
├── routes/
│   └── users.js        # User CRUD routes
├── controllers/
│   └── userController.js
└── tests/
    └── users.test.js

Example 2: React Component

Objective: Create a React login form component

/workflow:lite-plan "Create a React login form component with email and password fields, validation, and submit handling"

What CCW does:

1. Creates LoginForm component
2. Adds form validation (email format, password requirements)
3. Implements state management
4. Adds error display
5. Creates component tests

Result:

// components/LoginForm.jsx
import React, { useState } from 'react';

export function LoginForm({ onSubmit }) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [errors, setErrors] = useState({});

  // ... validation and submit logic
}

---

🌐 Web Development

Example 3: Full-Stack Todo Application

Objective: Build a complete todo application with React frontend and Express backend

Phase 1: Planning with Brainstorming

# Multi-perspective analysis
/workflow:brainstorm:auto-parallel "Full-stack todo application with user authentication, real-time updates, and dark mode"

# Review brainstorming artifacts
# Then create implementation plan
/workflow:plan

# Verify plan quality
/workflow:action-plan-verify

Brainstorming generates:

• System architecture analysis
• UI/UX design recommendations
• Data model design
• Security considerations
• API design patterns

Phase 2: Implementation

# Execute the plan
/workflow:execute

# Monitor progress
/workflow:status

What CCW implements:

Backend (server/):

• Express server setup
• MongoDB/PostgreSQL integration
• JWT authentication
• RESTful API endpoints
• WebSocket for real-time updates
• Input validation middleware

Frontend (client/):

• React app with routing
• Authentication flow
• Todo CRUD operations
• Real-time updates via WebSocket
• Dark mode toggle
• Responsive design

Phase 3: Testing

# Generate comprehensive tests
/workflow:test-gen WFS-todo-application

# Execute test tasks
/workflow:execute

# Run iterative test-fix cycle
/workflow:test-cycle-execute

Tests created:

• Unit tests for components
• Integration tests for API
• E2E tests for user flows
• Authentication tests
• WebSocket connection tests

Phase 4: Quality Review

# Security review
/workflow:review --type security

# Architecture review
/workflow:review --type architecture

# General quality review
/workflow:review

Complete session:

/workflow:session:complete

---

Example 4: E-commerce Product Catalog

Objective: Build product catalog with search, filters, and pagination

# Start with UI design exploration
/workflow:ui-design:explore-auto --prompt "Modern e-commerce product catalog with grid layout, filters sidebar, and search bar" --targets "catalog,product-card" --style-variants 3

# Review designs in compare.html
# Sync selected designs
/workflow:ui-design:design-sync --session <session-id> --selected-prototypes "catalog-v2,product-card-v1"

# Create implementation plan
/workflow:plan

# Execute
/workflow:execute

Features implemented:

• Product grid with responsive layout
• Search functionality with debounce
• Category/price/rating filters
• Pagination with infinite scroll option
• Product card with image, title, price, rating
• Sort options (price, popularity, newest)

---

🔌 API Development

Example 5: RESTful API with Authentication

Objective: Create RESTful API with JWT authentication and role-based access control

# Detailed planning
/workflow:plan "RESTful API with JWT authentication, role-based access control (admin, user), and protected endpoints for posts resource"

# Verify plan
/workflow:action-plan-verify

# Execute
/workflow:execute

Implementation includes:

Authentication:

// routes/auth.js
POST /api/auth/register
POST /api/auth/login
POST /api/auth/refresh
POST /api/auth/logout

Protected Resources:

// routes/posts.js
GET    /api/posts        # Public
GET    /api/posts/:id    # Public
POST   /api/posts        # Authenticated
PUT    /api/posts/:id    # Authenticated (owner or admin)
DELETE /api/posts/:id    # Authenticated (owner or admin)

Middleware:

• authenticate - Verifies JWT token
• authorize(['admin']) - Role-based access
• validateRequest - Input validation
• errorHandler - Centralized error handling

Example 6: GraphQL API

Objective: Convert REST API to GraphQL

# Analyze existing REST API
/cli:analyze "Analyze REST API structure in src/routes/"

# Plan GraphQL migration
/workflow:plan "Migrate REST API to GraphQL with queries, mutations, and subscriptions for posts and users"

# Execute migration
/workflow:execute

GraphQL schema created:

type Query {
  posts(limit: Int, offset: Int): [Post!]!
  post(id: ID!): Post
  user(id: ID!): User
}

type Mutation {
  createPost(input: CreatePostInput!): Post!
  updatePost(id: ID!, input: UpdatePostInput!): Post!
  deletePost(id: ID!): Boolean!
}

type Subscription {
  postCreated: Post!
  postUpdated: Post!
}

---

🧪 Testing & Quality Assurance

Example 7: Test-Driven Development (TDD)

Objective: Implement user authentication using TDD approach

# Start TDD workflow
/workflow:tdd-plan "User authentication with email/password login, registration, and password reset"

# Execute (Red-Green-Refactor cycles)
/workflow:execute

# Verify TDD compliance
/workflow:tdd-verify

TDD cycle tasks created:

Cycle 1: Registration

1. IMPL-1.1 - Write failing test for user registration
2. IMPL-1.2 - Implement registration to pass test
3. IMPL-1.3 - Refactor registration code

Cycle 2: Login

1. IMPL-2.1 - Write failing test for login
2. IMPL-2.2 - Implement login to pass test
3. IMPL-2.3 - Refactor login code

Cycle 3: Password Reset

1. IMPL-3.1 - Write failing test for password reset
2. IMPL-3.2 - Implement password reset
3. IMPL-3.3 - Refactor password reset

Example 8: Adding Tests to Existing Code

Objective: Generate comprehensive tests for existing authentication module

# Create test generation workflow from existing code
/workflow:test-gen WFS-authentication-implementation

# Execute test tasks
/workflow:execute

# Run test-fix cycle until all tests pass
/workflow:test-cycle-execute --max-iterations 5

Tests generated:

• Unit tests for each function
• Integration tests for auth flow
• Edge case tests (invalid input, expired tokens, etc.)
• Security tests (SQL injection, XSS, etc.)
• Performance tests (load testing, rate limiting)

Test coverage: Aims for 80%+ coverage

---

🔄 Refactoring

Example 9: Monolith to Microservices

Objective: Refactor monolithic application to microservices architecture

Phase 1: Analysis

# Deep architecture analysis
/cli:mode:plan --tool gemini "Analyze current monolithic architecture and create microservices migration strategy"

# Multi-role brainstorming
/workflow:brainstorm:auto-parallel "Migrate monolith to microservices with API gateway, service discovery, and message queue" --count 5

Phase 2: Planning

# Create detailed migration plan
/workflow:plan "Phase 1 microservices migration: Extract user service and auth service from monolith"

# Verify plan
/workflow:action-plan-verify

Phase 3: Implementation

# Execute migration
/workflow:execute

# Review architecture
/workflow:review --type architecture

Microservices created:

services/
├── user-service/
│   ├── src/
│   ├── Dockerfile
│   └── package.json
├── auth-service/
│   ├── src/
│   ├── Dockerfile
│   └── package.json
├── api-gateway/
│   ├── src/
│   └── config/
└── docker-compose.yml

Example 10: Code Optimization

Objective: Optimize database queries for performance

# Analyze current performance
/cli:mode:code-analysis "Analyze database query performance in src/repositories/"

# Create optimization plan
/workflow:plan "Optimize database queries with indexing, query optimization, and caching"

# Execute optimizations
/workflow:execute

Optimizations implemented:

• Database indexing strategy
• N+1 query elimination
• Query result caching (Redis)
• Connection pooling
• Pagination for large datasets
• Database query monitoring

---

🎨 UI/UX Design

Example 11: Design System Creation

Objective: Create a complete design system for a SaaS application

# Extract design from local reference images
/workflow:ui-design:imitate-auto --input "design-refs/*.png"

# Or import from existing code
/workflow:ui-design:imitate-auto --input "./src/components"

# Or create from scratch
/workflow:ui-design:explore-auto --prompt "Modern SaaS design system with primary components: buttons, inputs, cards, modals, navigation" --targets "button,input,card,modal,navbar" --style-variants 3

Design system includes:

• Color palette (primary, secondary, accent, neutral)
• Typography scale (headings, body, captions)
• Spacing system (4px grid)
• Component library:
  • Buttons (primary, secondary, outline, ghost)
  • Form inputs (text, select, checkbox, radio)
  • Cards (basic, elevated, outlined)
  • Modals (small, medium, large)
  • Navigation (sidebar, topbar, breadcrumbs)
• Animation patterns
• Responsive breakpoints

Output:

design-system/
├── tokens/
│   ├── colors.json
│   ├── typography.json
│   └── spacing.json
├── components/
│   ├── Button.jsx
│   ├── Input.jsx
│   └── ...
└── documentation/
    └── design-system.html

Example 12: Responsive Landing Page

Objective: Design and implement a marketing landing page

# Design exploration
/workflow:ui-design:explore-auto --prompt "Modern SaaS landing page with hero section, features grid, pricing table, testimonials, and CTA" --targets "hero,features,pricing,testimonials" --style-variants 2 --layout-variants 3 --device-type responsive

# Select best designs and sync
/workflow:ui-design:design-sync --session <session-id> --selected-prototypes "hero-v2,features-v1,pricing-v3"

# Implement
/workflow:plan
/workflow:execute

Sections implemented:

• Hero section with animated background
• Feature cards with icons
• Pricing comparison table
• Customer testimonials carousel
• FAQ accordion
• Contact form
• Responsive navigation
• Dark mode support

---

🐛 Bug Fixes

Example 13: Quick Bug Fix

Objective: Fix login button not working on mobile

# Analyze bug
/cli:mode:bug-diagnosis "Login button click event not firing on mobile Safari"

# Claude analyzes and implements fix

Fix implemented:

// Before
button.onclick = handleLogin;

// After (adds touch event support)
button.addEventListener('click', handleLogin);
button.addEventListener('touchend', (e) => {
  e.preventDefault();
  handleLogin(e);
});

Example 14: Complex Bug Investigation

Objective: Debug memory leak in React application

Investigation

# Start session for thorough investigation
/workflow:session:start "Memory Leak Investigation"

# Deep bug analysis
/cli:mode:bug-diagnosis --tool gemini "Memory leak in React components - event listeners not cleaned up"

# Create fix plan
/workflow:plan "Fix memory leaks in React components: cleanup event listeners and cancel subscriptions"

Implementation

# Execute fixes
/workflow:execute

# Generate tests to prevent regression
/workflow:test-gen WFS-memory-leak-investigation

# Execute tests
/workflow:execute

Issues found and fixed:

1. Missing cleanup in useEffect hooks
2. Event listeners not removed
3. Uncancelled API requests on unmount
4. Large state objects not cleared

---

📝 Documentation

Example 15: API Documentation Generation

Objective: Generate comprehensive API documentation

# Analyze existing API
/memory:load "Generate API documentation for all endpoints"

# Create documentation
/workflow:plan "Generate OpenAPI/Swagger documentation for REST API with examples and authentication info"

# Execute
/workflow:execute

Documentation includes:

• OpenAPI 3.0 specification
• Interactive Swagger UI
• Request/response examples
• Authentication guide
• Rate limiting info
• Error codes reference

Example 16: Project README Generation

Objective: Create comprehensive README for open-source project

# Update project memory first
/memory:update-full --tool gemini

# Generate README
/workflow:plan "Create comprehensive README.md with installation, usage, examples, API reference, and contributing guidelines"

/workflow:execute

README sections:

• Project overview
• Features
• Installation instructions
• Quick start guide
• Usage examples
• API reference
• Configuration
• Contributing guidelines
• License

---

⚙️ DevOps & Automation

Example 17: CI/CD Pipeline Setup

Objective: Set up GitHub Actions CI/CD pipeline

/workflow:plan "Create GitHub Actions workflow for Node.js app with linting, testing, building, and deployment to AWS"

/workflow:execute

Pipeline created:

# .github/workflows/ci-cd.yml
name: CI/CD

on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Run tests
        run: npm test

  build:
    needs: test
    runs-on: ubuntu-latest
    steps:
      - name: Build
        run: npm run build

  deploy:
    needs: build
    if: github.ref == 'refs/heads/main'
    runs-on: ubuntu-latest
    steps:
      - name: Deploy to AWS
        run: npm run deploy

Example 18: Docker Containerization

Objective: Dockerize full-stack application

# Plan containerization
/workflow:plan "Dockerize full-stack app with React frontend, Express backend, PostgreSQL database, and Redis cache using docker-compose"

# Execute
/workflow:execute

# Review
/workflow:review --type architecture

Created files:

├── docker-compose.yml
├── frontend/
│   └── Dockerfile
├── backend/
│   └── Dockerfile
├── .dockerignore
└── README.docker.md

---

🏗️ Complex Projects

Example 19: Real-Time Chat Application

Objective: Build real-time chat with WebSocket, message history, and file sharing

Complete Workflow

# 1. Brainstorm
/workflow:brainstorm:auto-parallel "Real-time chat application with WebSocket, message history, file upload, user presence, typing indicators" --count 5

# 2. UI Design
/workflow:ui-design:explore-auto --prompt "Modern chat interface with message list, input box, user sidebar, file preview" --targets "chat-window,message-bubble,user-list" --style-variants 2

# 3. Sync designs
/workflow:ui-design:design-sync --session <session-id>

# 4. Plan implementation
/workflow:plan

# 5. Verify plan
/workflow:action-plan-verify

# 6. Execute
/workflow:execute

# 7. Generate tests
/workflow:test-gen <session-id>

# 8. Execute tests
/workflow:execute

# 9. Review
/workflow:review --type security
/workflow:review --type architecture

# 10. Complete
/workflow:session:complete

Features implemented:

• WebSocket server (Socket.io)
• Real-time messaging
• Message persistence (MongoDB)
• File upload (S3/local storage)
• User authentication
• Typing indicators
• Read receipts
• User presence (online/offline)
• Message search
• Emoji support
• Mobile responsive

Example 20: Data Analytics Dashboard

Objective: Build interactive dashboard with charts and real-time data

# Brainstorm data viz approach
/workflow:brainstorm:auto-parallel "Data analytics dashboard with real-time metrics, interactive charts, filters, and export functionality"

# Plan implementation
/workflow:plan "Analytics dashboard with Chart.js/D3.js, real-time data updates via WebSocket, date range filters, and CSV export"

# Execute
/workflow:execute

Dashboard features:

• Real-time metric cards (users, revenue, conversions)
• Line charts (trends over time)
• Bar charts (comparisons)
• Pie charts (distributions)
• Data tables with sorting/filtering
• Date range picker
• Export to CSV/PDF
• Responsive grid layout
• Dark mode
• WebSocket updates every 5 seconds

---

💡 Tips for Effective Examples

Best Practices

1. Start with clear objectives

   • Define what you want to build
   • List key features
   • Specify technologies if needed

2. Use appropriate workflow

   • Simple tasks: /workflow:lite-plan
   • Complex features: /workflow:brainstorm → /workflow:plan
   • Existing code: /workflow:test-gen or /cli:analyze

3. Leverage quality gates

   • Run /workflow:action-plan-verify before execution
   • Use /workflow:review after implementation
   • Generate tests with /workflow:test-gen

4. Maintain memory

   • Update memory after major changes
   • Use /memory:load for quick context
   • Keep CLAUDE.md files up to date

5. Complete sessions

   • Always run /workflow:session:complete
   • Generates lessons learned
   • Archives session for reference

---

🔗 Related Resources

• Getting Started Guide - Basics
• Architecture - How it works
• Command Reference - All commands
• FAQ - Common questions
• Contributing - How to contribute

---

📬 Share Your Examples

Have a great example to share? Contribute to this document!

See CONTRIBUTING.md for guidelines.

---

Last Updated: 2025-11-20 Version: 5.8.1