generate-assets

What this skill does

You are the Asset Creator. You generate high-quality images and visual assets for website components using AI.

# Core Responsibilities
1. **Asset Generation**: Use Replicate's FLUX 1.1 Pro to generate images based on prompts.
2. **Prompt Enhancement**: Automatically enrich prompts with modern UI elements, gradients, patterns, and theme-aware styling.
3. **Size Intelligence**: Detect existing image dimensions and match them, or use appropriate defaults.
4. **Format Optimization**: Output WebP format for optimal web performance.
5. **Aspect Ratio Management**: Use appropriate aspect ratios for different component types.
6. **Transparent Backgrounds**: Support transparent backgrounds for foreground/smaller assets.
7. **File Management**: Save assets to `public/assets/images/` or appropriate subdirectories.

# Prerequisites

⚠️ **IMPORTANT**: Before using this skill, ensure `REPLICATE_API_TOKEN` is set in your environment variables (`.env`, `.env.local`, or `.env.production`).

# Requirements must be met: pnpm add replicate
and Dev Requirement: pnpm add sharp -D

# Tools & Scripts

## Asset Generator Script
**Script**: `.claude/skills/generate-assets/scripts/generate-asset.ts`

**Usage**:
```bash
pnpm run script .claude/skills/generate-assets/scripts/generate-asset.ts "<prompt>" "[aspect-ratio]" "[filename]" "[folder]" "[asset-type]" "[transparent]"
```

**Parameters**:
- `prompt`: Base description of the image to generate. Will be automatically enhanced with modern UI elements, gradients, patterns, and theme-aware styling.
- `aspect-ratio`: Optional aspect ratio. If omitted and file exists, uses existing image dimensions. Otherwise defaults by asset type.
- `filename`: Name of the file without extension (default: auto-generated from prompt).
- `folder`: Subfolder in `public/assets/images/` (default: root of `public/assets/images/`).
- `asset-type`: Optional type: "hero", "feature", "transformation", "foreground", "other" (default: "other"). Affects prompt enhancement and default aspect ratio.
- `transparent`: Optional "true" or "false" (default: "false"). If true, removes background for transparent assets.

**Examples**:
```bash
# Hero section with automatic enhancement
pnpm run script .claude/skills/generate-assets/scripts/generate-asset.ts "modern dashboard interface" "16:9" "hero-dashboard" "hero" "hero" "false"

# Feature showcase (will auto-detect size if file exists)
pnpm run script .claude/skills/generate-assets/scripts/generate-asset.ts "AI content generation" "" "feature-ai" "features" "feature" "false"

# Foreground asset with transparent background
pnpm run script .claude/skills/generate-assets/scripts/generate-asset.ts "decorative stars" "" "stars" "foreground" "foreground" "true"
```

# Workflow

When asked to "Generate an asset for X" or "Create an image for the hero section":
1. **Check Environment**: Verify `REPLICATE_API_TOKEN` is set. If not, inform the user.
2. **Check Existing Assets**: If replacing an image, check if file exists and use its dimensions.
3. **Determine Requirements**: 
   - Identify the component type (hero, feature, transformation, foreground, etc.)
   - Determine if transparent background is needed (for smaller/foreground assets)
   - Choose appropriate aspect ratio (or let script auto-detect from existing file)
4. **Generate Asset**: Run the script with a base prompt (will be automatically enhanced).
5. **Process**: The script automatically:
   - Enhances prompt with modern UI elements, gradients, patterns, and theme-aware styling
   - Generates the image using FLUX 1.1 Pro
   - Removes background if transparent is requested
   - Resizes to match existing image or appropriate default
   - Optimizes as WebP format
   - Saves to the appropriate location
6. **Verify**: Confirm the file was created successfully.

# Common Use Cases

## Hero Section Assets
- Show product interface, dashboard, or solution in action
- Aspect ratio: `16:9` or `21:9`
- Example: "modern SaaS dashboard with analytics charts and user interface"

## Feature Showcase
- Demonstrate specific features or capabilities
- Aspect ratio: `1:1` or `4:3`
- Example: "AI-powered content generation interface with real-time preview"

## Transformation/Before-After
- Show how the solution works or transforms something
- Aspect ratio: `16:9`
- Example: "before and after comparison of content optimization"

# Prompt Enhancement Features

The script automatically enhances prompts with:
- **Modern UI Elements**: Playful interface components, glassmorphism, neomorphic design
- **Background Patterns**: Subtle dots, geometric grids, triangles, stars, gradients
- **Theme Awareness**: Inspired by project's theme colors and design system
- **Decorative Elements**: Stars, dots, lines, floating shapes for larger images
- **Style Modifiers**: Professional, high quality, subtle, elegant, contemporary

# Size Intelligence

- **Existing Images**: If replacing an image, automatically detects dimensions and matches them
- **New Images**: Uses appropriate defaults based on asset type:
  - Hero: 1920x1080 (16:9)
  - Feature: 1024x1024 (1:1)
  - Transformation: 1920x1080 (16:9)
  - Foreground: 512x512 (1:1)

# Technical Details

- **Generation Model**: `black-forest-labs/flux-1.1-pro`
- **Background Removal**: `bria/remove-background` (for transparent assets)
- **Output Format**: WebP (optimized for web)
- **Output Quality**: 80 (default)
- **Safety Tolerance**: 2 (default)
- **Prompt Upsampling**: true (default)
- **Location**: `public/assets/images/[folder]/[filename].webp`

# Reference
For advanced configuration and model details, see [reference.md](reference.md).