Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →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.
.claude/skills/majiayu000-web-asset-generator/SKILL.md| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-22 | ✗→✓ | ▲ Improved | 163% | 0% |
| case-04 | ✓→✗ | ▼ Worse | 38% | 0% |
| case-21 | ✓→✗ | ▼ Worse | 63% | 0% |
| case-05 | ✓→✓ | ＝ Same ✓ | 71% | 0% |
| case-14 | ✓→✓ | ＝ Same ✓ | 186% | 0% |
Generate professional web assets from logos or text slogans, including favicons, app icons, and social media meta images.
When a user requests web assets:
scripts/generate_favicons.pyscripts/generate_og_images.pyIMPORTANT: Always use the AskUserQuestion tool to gather requirements instead of plain text questions. This provides a better user experience with visual selection UI.
✅ 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
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 imagesUser clicks → Claude immediately knows what to generate
Below are the standard question patterns to use in various scenarios. Copy the structure and adapt as needed.
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:
When the asset type is determined but source is unclear:
Question: "What source material will you provide?" Header: "Source" Options:
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:
When generating text-based social images:
Question: "What colors should we use for your social images?" Header: "Colors" Options:
When user says "create icons" or "generate icons" (ambiguous):
Question: "What kind of icons do you need?" Header: "Icon type" Options:
When user selects "Emoji" as source material:
Step 1: Ask for project description (free text):
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)
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 color for app icons:
Question: "Do you want a background color for app icons?" Header: "Background" Options:
When to use: After generating assets and showing HTML tags to the user
Question: "Would you like me to add these HTML tags to your codebase?" Header: "Integration" Options:
If user selects "Yes, auto-detect":
If user selects "Yes, I'll tell you where":
Framework Detection Priority:
next.config.js, update app/layout.tsx or pages/_app.tsxastro.config.mjs, update layout files in src/layouts/svelte.config.js, update src/app.htmlnuxt.config.js, update app.vue or nuxt.config.tsindex.html or *.html filesgatsby-config.js, update gatsby-ssr.jsWhen to use: After code integration (or if user declined integration)
Question: "Would you like to test your meta tags now?" Header: "Testing" Options:
Provide appropriate testing URLs:
When user has a logo image:
bashpython scripts/generate_favicons.py <source_image> <output_dir> [icon_type]
Arguments:
source_image: Path to the logo/image fileoutput_dir: Where to save generated iconsicon_type: Optional - 'favicon', 'app', or 'all' (default: 'all')Example:
bashpython scripts/generate_favicons.py /mnt/user-data/uploads/logo.png /home/claude/output all
Generates:
favicon-16x16.png, favicon-32x32.png, favicon-96x96.pngfavicon.ico (multi-resolution)apple-touch-icon.png (180x180)android-chrome-192x192.png, android-chrome-512x512.pngNEW FEATURE: Create favicons from emoji characters with smart suggestions!
When user wants emoji-based icons, first get suggestions:
bashpython scripts/generate_favicons.py --suggest "coffee shop" /home/claude/output all
This returns 4 emoji suggestions based on the description:
1. ☕ Coffee - coffee, cafe, beverage
2. 🌐 Globe - web, website, global
3. 🏪 Store - shop, store, retail
4. 🛒 Cart - shopping, cart, ecommercebashpython scripts/generate_favicons.py --emoji "☕" <output_dir> [icon_type] [--emoji-bg COLOR]
Arguments:
--emoji: Emoji character to useoutput_dir: Where to save generated iconsicon_type: Optional - 'favicon', 'app', or 'all' (default: 'all')--emoji-bg: Optional background color (default: transparent for favicons, white for app icons)Examples:
bash# Basic emoji favicon (transparent background) python scripts/generate_favicons.py --emoji "🚀" /home/claude/output favicon # Emoji with custom background for app icons python scripts/generate_favicons.py --emoji "☕" --emoji-bg "#F5DEB3" /home/claude/output all # Complete set with white background python scripts/generate_favicons.py --emoji "💻" --emoji-bg "white" /home/claude/output all
Generates same files as logo-based generation:
Note: Requires pilmoji library: pip install pilmoji
When user has a logo and needs Open Graph images:
bashpython scripts/generate_og_images.py <output_dir> --image <source_image>
Example:
bashpython scripts/generate_og_images.py /home/claude/output --image /mnt/user-data/uploads/logo.png
Generates:
og-image.png (1200x630 - Facebook, WhatsApp, LinkedIn)twitter-image.png (1200x675 - Twitter)og-square.png (1200x1200 - Square variant)When user provides a text slogan or tagline:
bashpython scripts/generate_og_images.py <output_dir> --text "Your text here" [options]
Options:
--logo <path>: Include a logo with the text--bg-color <color>: Background color (hex or name, default: '#4F46E5')--text-color <color>: Text color (default: 'white')Example:
bashpython scripts/generate_og_images.py /home/claude/output \ --text "Transform Your Business with AI" \ --logo /mnt/user-data/uploads/logo.png \ --bg-color "#4F46E5"
For users who want the complete package:
bash# Generate favicons and icons python scripts/generate_favicons.py /mnt/user-data/uploads/logo.png /home/claude/output all # Generate social media images python scripts/generate_og_images.py /home/claude/output --image /mnt/user-data/uploads/logo.png
Or for text-based:
bash# Generate favicons from logo python scripts/generate_favicons.py /mnt/user-data/uploads/logo.png /home/claude/output all # Generate social media images with text + logo python scripts/generate_og_images.py /home/claude/output \ --text "Your Tagline Here" \ --logo /mnt/user-data/uploads/logo.png
Detailed material starting at ## Delivering Assets to User has been moved to reference/extended.md to keep this skill concise. Load that reference when the task requires the moved examples, command catalogs, checklists, platform details, or implementation templates.
| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-01 | fail→fail | 12,033 | 8,610 | -28% | 1 | 1 | 0% | 2,519 | 4,014 | +59% | 0 | 0 | — |
case-02 | fail→fail | 17,258 | 13,017 | -25% | 1 | 1 | 0% | 3,383 | 4,499 | +33% | 0 | 0 | — |
case-03 | fail→fail | 13,550 | 16,648 | +23% | 1 | 1 | 0% | 2,557 | 3,971 | +55% | 0 | 0 | — |
case-04 | pass→fail | 14,369 | 5,598 | -61% | 1 | 1 | 0% | 2,732 | 3,767 | +38% | 0 | 0 | — |
case-05 | pass→pass | 20,811 | 17,480 | -16% | 1 | 1 | 0% | 3,904 | 6,688 | +71% | 0 | 0 | — |
case-06 | fail→fail | 7,072 | 5,127 | -28% | 1 | 1 | 0% | 1,021 | 3,791 | +271% | 0 | 0 | — |
case-07 | fail→fail | 8,338 | 10,067 | +21% | 1 | 1 | 0% | 1,314 | 4,319 | +229% | 0 | 0 | — |
case-08 | fail→fail | 10,733 | 6,805 | -37% | 1 | 1 | 0% | 1,784 | 3,780 | +112% | 0 | 0 | — |
case-09 | fail→fail | 11,460 | 6,306 | -45% | 1 | 1 | 0% | 1,910 | 3,854 | +102% | 0 | 0 | — |
case-19 | fail→fail | 13,930 | 5,358 | -62% | 1 | 1 | 0% | 2,836 | 3,839 | +35% | 0 | 0 | — |
case-10 | fail→fail | 18,727 | 6,980 | -63% | 1 | 1 | 0% | 3,432 | 3,886 | +13% | 0 | 0 | — |
case-11 | fail→fail | 27,608 | 5,485 | -80% | 1 | 1 | 0% | 6,076 | 3,802 | -37% | 0 | 0 | — |
case-12 | fail→fail | 11,974 | 6,181 | -48% | 1 | 1 | 0% | 2,246 | 3,827 | +70% | 0 | 0 | — |
case-13 | fail→fail | 13,744 | 8,011 | -42% | 1 | 1 | 0% | 2,595 | 5,075 | +96% | 0 | 0 | — |
case-14 | pass→pass | 9,689 | 11,728 | +21% | 1 | 1 | 0% | 1,768 | 5,060 | +186% | 0 | 0 | — |
case-15 | pass→pass | 11,732 | 13,155 | +12% | 1 | 1 | 0% | 1,889 | 5,704 | +202% | 0 | 0 | — |
case-16 | fail→fail | 9,065 | 13,585 | +50% | 1 | 1 | 0% | 1,399 | 4,445 | +218% | 0 | 0 | — |
case-17 | fail→fail | 10,675 | 12,952 | +21% | 1 | 1 | 0% | 1,592 | 4,533 | +185% | 0 | 0 | — |
case-18 | fail→fail | 12,068 | 10,711 | -11% | 1 | 1 | 0% | 2,366 | 4,333 | +83% | 0 | 0 | — |
case-20 | fail→fail | 23,487 | 5,435 | -77% | 1 | 1 | 0% | 4,625 | 3,821 | -17% | 0 | 0 | — |
case-21 | pass→fail | 12,817 | 6,797 | -47% | 1 | 1 | 0% | 2,345 | 3,817 | +63% | 0 | 0 | — |
case-22 | fail→pass | 10,340 | 7,709 | -25% | 1 | 1 | 0% | 1,870 | 4,921 | +163% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 22 cases were attempted, and 5 counted toward the lift figure. The other 17 produced results that are not comparable between the two arms, so they are excluded from the headline rather than averaged into it. The headline lift of -5 percentage points is the difference between those two pass rates over the 5 comparable cases. 3 cases got worse with the skill loaded, and they are included in that figure.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.