web-asset-generator

What the source does

• FilesystemNone observedNo reads or writes in the source
• NetworkNone observedNo outbound calls in the source
• ShellNone observedNo commands run in the source
• DependenciesPinnedNothing floats
• SecretsNone foundNo keys in source

Five audit layers

Gates applied: no behavioural pass.

Audit 0.4.1 · source sha 9020b1134918 · 20 Oct 2026Report an issue or request a re-scan

• Publisheralonw0 GitHub userOwner of the repository this skill is read from
• Source folderalonw0/web-asset-generator/skills/web-asset-generatorThe exact folder we audited
• LicenceMITAs the repository states it
• Commit pinned for this verdict9020b1134918A new audit runs when the source changes
• Repository statusNot archivedLast push 265 days ago
• Sandboxed runNot runSkills are read, not executed; layer L4 is skipped

Its description: Generate web assets including favicons, app icons (PWA), and social media meta images (Open Graph) for Facebook, Twitter, WhatsApp, and LinkedIn. Use when users need icons, favicons, social sharing images, or Open Graph…

---
name: web-asset-generator
description: Generate web assets including favicons, app icons (PWA), and social media meta images (Open Graph) for Facebook, Twitter, WhatsApp, and LinkedIn. Use when users need icons, favicons, social sharing images, or Open Graph images from logos or text slogans. Handles image resizing, text-to-image generation, and provides proper HTML meta tags.
---

# 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?"
- Use this to generate emoji suggestions

**Step 2**: Use AskUserQuestion to present the 4 suggested emojis:

**Question**: "Which emoji best represents your project?"
**Header**: "Emoji"
**Options**: (Dynamically generated based on project description)
- Example: **"🚀 Rocket"** - Description: "Rocket, launch, startup, space"
- Example: **"☕ Coffee"** - Description: "Coffee, cafe, beverage, drink"
- Example: **"💻 Laptop"** - Description: "Computer, laptop, code, dev"
- Example: **"🎨 Art"** - Description: "Art, design, creative, paint"

**Implementation**:
```bash
# Get suggestions
python scripts/generate_favicons.py --suggest "coffee shop" output/ all

# Then generate with selected emoji
python scripts/generate_favicons.py --emoji "☕" output/ all
```

**Optional**: Ask about background

Excerpt, first 6,003 characters of SKILL.md, verbatim from the audited commit. It is text from someone else’s repository, quoted so you can judge it before your agent reads it.

1. 2026-10-20
   ✓SAFE B 89 / 100

   first audit · source 9020b1134918

Questions about web-asset-generator

• github.com/alonw0/web-asset-generator/tree/main/skills/web-asset — the audited source at commit 9020b1134918 and every finding aboveObserved · 20 Oct 2026

Spotted something wrong? Report a correction · Methodology