web-asset-generator

Files (9)

• CLAUDE.md
• SKILL.md
• specifications.md · references/
• check_dependencies.py · scripts/
• emoji_utils.py · scripts/
• generate_favicons.py · scripts/
• generate_og_images.py · scripts/
• __init__.py · scripts/lib/
• validators.py · scripts/lib/

SKILL.md (first lines)

# Web Asset Generator

Generate professional web assets from logos or text slogans, including favicons, app icons, and social media meta images.

## Quick Start

When a user requests web assets:

1. **Use AskUserQuestion tool to clarify needs** if not specified:
   - What type of assets they need (favicons, app icons, social images, or everything)
   - Whether they have source material (logo image vs text/slogan)
   - For text-based images: color preferences

2. **Check for source material**:
   - If user uploaded an image: use it as the source
   - If user provides text/slogan: generate text-based images

3. **Run the appropriate script(s)**:
   - Favicons/icons: `scripts/generate_favicons.py`
   - Social media images: `scripts/generate_og_images.py`

4. **Provide the generated assets and HTML tags** to the user

## Using Interactive Questions

**IMPORTANT**: Always use the AskUserQuestion tool to gather requirements instead of plain text questions. This provides a better user experience with visual selection UI.

### Why Use AskUserQuestion?

✅ **Visual UI**: Users see options as clickable chips/tags instead of typing responses
✅ **Faster**: Click to select instead of typing out answers
✅ **Clearer**: Descriptions explain what each option means
✅ **Fewer errors**: No typos or misunderstandings from free-form text
✅ **Professional**: Consistent with modern Claude Code experience

### Example Flow

**User request**: "I need web assets"

**Claude uses AskUserQuestion** (not plain text):
```
What type of web assets do you need?                    [Asset type]
○ Favicons only - Browser tab icons (16x16, 32x32, 96x96) and favicon.ico
○ App icons only - PWA icons for iOS/Android (180x180, 192x192, 512x512)
○ Social images only - Open Graph images for Facebook, Twitter, WhatsApp, LinkedIn
● Everything - Complete package: favicons + app icons + social images
```

User clicks → Claude immediately knows what to generate

### Question Patterns

Below are the standard question patterns to use in various scenarios. Copy the structure and adapt as needed.

### Question Pattern 1: Asset Type Selection

When the user's request is vague (e.g., "create web assets", "I need icons"), use AskUserQuestion:

**Question**: "What type of web assets do you need?"
**Header**: "Asset type"
**Options**:
- **"Favicons only"** - Description: "Browser tab icons (16x16, 32x32, 96x96) and favicon.ico"
- **"App icons only"** - Description: "PWA icons for iOS/Android (180x180, 192x192, 512x512)"
- **"Social images only"** - Description: "Open Graph images for Facebook, Twitter, WhatsApp, LinkedIn"
- **"Everything"** - Description: "Complete package: favicons + app icons + social images"

### Question Pattern 2: Source Material

When the asset type is determined but source is unclear:

**Question**: "What source material will you provide?"
**Header**: "Source"
**Options**:
- **"Logo image"** - Description: "I have or will upload a logo/image file"
- **"Emoji"** - Description: "Generate favicon from an emoji character"
- **"Text/slogan"** - Description: "Create images from text only"
- **"Logo + text"** - Description: "Combine logo with text overlay (for social images)"

### Question Pattern 3: Platform Selection (for social images)

When user requests social images but doesn't specify platforms:

**Question**: "Which social media platforms do you need images for?"
**Header**: "Platforms"
**Multi-select**: true
**Options**:
- **"Facebook/WhatsApp/LinkedIn"** - Description: "Standard 1200x630 Open Graph format"
- **"Twitter"** - Description: "1200x675 (16:9 ratio) for large image cards"
- **"All platforms"** - Description: "Generate all variants including square format"

### Question Pattern 4: Color Preferences (for text-based images)

When generating text-based social images:

**Question**: "What colors should we use for your social images?"
**Header**: "Colors"
**Options**:
- **"I'll provide colors"** - Description: "Let me specify exact hex codes for brand colors"
- **"Default theme"** - Description: "Use default purple background (#4F46E5) with white text"
- **"Extract from logo"** - Description: "Auto-detect brand colors from uploaded logo"
- **"Custom gradient"** - Description: "Let me choose gradient colors"

### Question Pattern 5: Icon Type Clarification

When user says "create icons" or "generate icons" (ambiguous):

**Question**: "What kind of icons do you need?"
**Header**: "Icon type"
**Options**:
- **"Website favicon"** - Description: "Small browser tab icon"
- **"App icons (PWA)"** - Description: "Mobile home screen icons"
- **"Both"** - Description: "Favicon + app icons"

### Question Pattern 6: Emoji Selection

When user selects "Emoji" as source material:

**Step 1**: Ask for project description (free text):
- "What is your website/app about?"

From alonw0/web-asset-generator, MIT.