npm package: @jbdgw/canva
Description: DGW graphic generation tool for Claude Code
Author: Jordan Bartlett
Latest version: 0.1.0

# @dgw/canva

> **Graphic generation tool for Claude Code**
> Create professional social media graphics from HTML/CSS with brand consistency

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## Overview

DGW Canva is a CLI tool that enables Claude Code to generate branded social media graphics by composing HTML/CSS designs and rendering them to PNG/PDF using Playwright. Perfect for teams that need consistent, on-brand graphics across multiple platforms.

### Key Features

- **🎨 Multiple Brand Support** - Foster Greatness, Doing Good Works, and custom brands
- **📱 5+ Social Formats** - Instagram (post/story), Facebook, Circle, Email headers
- **⚡ Fast Rendering** - Playwright-powered, parallel processing
- **☁️ Cloud Upload** - Automatic Supabase Storage integration
- **🤖 AI-Friendly** - Complete manual for Claude Code to use autonomously
- **🎯 Brand Components** - Pre-built components with your brand styling

## Quick Start

### Installation via GitHub Packages (Recommended for Team)

```bash
# 1. Create a GitHub Personal Access Token with `read:packages` scope
# Visit: https://github.com/settings/tokens/new

# 2. Configure npm for GitHub Packages
echo "@jbdgw:registry=https://npm.pkg.github.com" >> ~/.npmrc
echo "//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN" >> ~/.npmrc

# 3. Install globally (includes Claude Code skills!)
pnpm add -g @jbdgw/canva

# 4. Install Playwright browsers (one-time setup)
npx playwright install chromium

# 5. Verify installation
dgw-canva --version
ls ~/.claude/Skills/  # Skills automatically installed!
```

**What's included:**
- ✅ `dgw-canva` CLI command
- ✅ 3 Claude Code skills (auto-installed to `~/.claude/Skills/`)
- ✅ Foster Greatness brand themes
- ✅ Component library & examples

See [INSTALL.md](./INSTALL.md) for detailed team installation instructions.

### Development Installation

```bash
# Clone repository
git clone https://github.com/jbdgw/dgw-canvas.git
cd dgw_canva

# Install dependencies
pnpm install

# Install Playwright browsers
npx playwright install chromium

# Build the project
pnpm build
```

### Basic Usage

```bash
# Create an HTML design
cat > my-design.html << 'EOF'
<!DOCTYPE html>
<html>
<head>
  <meta name="brand" content="foster-greatness">
  <meta name="format" content="instagram-post">
</head>
<body style="width: 1080px; height: 1080px;">
  <div class="gradient-background primary">
    <h1 class="hero-text">Your Headline</h1>
  </div>
</body>
</html>
EOF

# Render to PNG
pnpm render --html ./my-design.html

# Render to both PNG and PDF
pnpm render --html ./my-design.html --format both

# Upload to Supabase
pnpm render --html ./my-design.html --upload --campaign "q1-2025"
```

### Configuration

Create `.env` file:

```bash
SUPABASE_URL=https://your-project.supabase.co
SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_KEY=your-service-key
SUPABASE_BUCKET=campaign-graphics
```

## Documentation

### For Claude Code

📘 **[Complete Claude Code Manual](docs/CLAUDE_CODE_MANUAL.md)** - Everything Claude Code needs to autonomously generate graphics

### For Developers

- **Available Formats:** Instagram Post/Story, Facebook Post, Circle Post, Email Header, Landing Hero
- **Available Brands:** Foster Greatness, Doing Good Works, Default
- **Output Formats:** PNG, PDF, or both
- **Brand Components:** Pre-styled typography, buttons, gradients, layouts

## CLI Commands

### `render`

Render HTML to PNG/PDF

```bash
pnpm render --html <path> [options]

Options:
  --html <path>        Path to HTML file (required)
  --output <path>      Output file path (default: ./outputs/graphic)
  --format <format>    Output format: png, pdf, or both (default: png)
  --preset <slug>      Format preset (instagram-post, facebook-post, etc.)
  --brand <slug>       Brand theme override
  --upload             Upload to Supabase after rendering
  --campaign <name>    Campaign name for storage path
```

### `formats`

List all available format presets

```bash
pnpm formats
```

### `brands`

List all available brand themes

```bash
pnpm brands
```

## Examples

### Using Brand Components

```html
<!DOCTYPE html>
<html>
<head>
  <meta name="brand" content="foster-greatness">
  <meta name="format" content="instagram-post">
</head>
<body>
  <div class="hero-section">
    <h1 class="hero-text">Transform Lives</h1>
    <p class="subtitle-text">Through mentorship</p>
    <button class="cta-button primary">Get Started</button>
  </div>
</body>
</html>
```

### Custom Design

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      width: 1080px;
      height: 1080px;
      background: linear-gradient(45deg, #667eea, #764ba2);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>
<body>
  <h1 style="color: white; font-size: 64px;">Custom Design</h1>
</body>
</html>
```

See `examples/templates/` for more examples.

## Project Structure

```
dgw_canva/
├── src/
│   ├── brands/          # Brand themes (Foster Greatness, DGW, etc.)
│   ├── cli/             # CLI interface
│   ├── renderer/        # Playwright rendering engine
│   ├── utils/           # Format presets and utilities
│   └── config/          # Supabase configuration
├── examples/
│   └── templates/       # Example HTML templates
├── docs/
│   └── CLAUDE_CODE_MANUAL.md  # Complete manual for Claude Code
└── outputs/             # Generated graphics
```

## Development

```bash
# Development mode (watch for changes)
pnpm dev

# Build for production
pnpm build

# Run tests
pnpm test

# Lint code
pnpm lint

# Format code
pnpm format
```

## Publishing

```bash
# Build package
pnpm build

# Publish to GitHub Packages
pnpm publish
```

## Tech Stack

- **TypeScript** - Type-safe development
- **Playwright** - Browser automation for rendering
- **Commander** - CLI framework
- **Supabase** - Cloud storage
- **Zod** - Schema validation

## Foster Greatness Brand

The tool includes official Foster Greatness brand colors and typography:

- **Primary Navy:** `#1a2949`
- **Teal Blue:** `#0067a2`
- **Accent Orange:** `#fa8526`
- **Typography:** Century Gothic

## Contributing

This is an internal tool for DGW/Foster Greatness. For questions or suggestions, contact Jordan Bartlett.

## License

MIT © Doing Good Works

## Support

- **Email:** jordanb@doinggoodworks.com
- **GitHub:** [jbdgw/dgw-canvas](https://github.com/jbdgw/dgw-canvas)

---

**Built with ❤️ for social impact organizations**