Generate web assets like favicons, app icons, social media images, and Open Graph preview cards.
What it does
A web app needs more than one image. It needs a favicon in multiple sizes, an Apple touch icon, an OG image with the right dimensions for each platform, a PWA manifest icon set, and a Twitter card image — each with platform-specific dimension requirements that change occasionally. Claude knows it needs these but doesn't always get the sizes right, forgets certain formats, or generates them one at a time. This skill loads the complete platform-specific requirements and generates the full asset set in one pass.
Use case
Launching or updating a web app and needing the complete set of web assets. Also useful when adding PWA support to an existing app. Made by alonw0.
"Generate the complete favicon and icon set for my web app." "Create OG images for these five pages — use the design I've described." "Build a Twitter card image for our product launch." "Generate all the PWA icons I need for the manifest." "Create a full social sharing image set for this article."
Describe the visual — your brand colours, logo, or a description of the image content.
Specify which platforms you need assets for, or ask for the complete set.
Claude generates all sizes and formats, plus the HTML meta tags to reference them.
Input
A description of the visual design — brand colours, logo description, content, and any platform-specific requirements.
Output
The complete asset set: correctly sized images for each platform, the HTML meta tags to reference them, and the PWA manifest icon entries if needed.
npx skillsadd alonw0/skills/web-asset-generator
Requires skills.sh CLI
Build Obsidian.md plugins following official API patterns, TypeScript best practices, and plugin review guidelines.
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.