Web assets

Skill propiter/landing-craft/skills/web-assets

Trigger: favicon, .ico, app icon, PWA icon, OG image, open graph, social card, Twitter card, export PNG, rasterize SVG, generate image assets, og/social. Produce production web image assets from HTML/SVG using only local tools.From its SKILL.md

Install

npx -y skills add propiter/landing-craft --skill web-assets

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
runs commandsInstructs the agent to run 3 commands, including `icotool -c -o favicon.ico icon-16.png icon-32.png icon-48.png` and 2 more.

What its file declares

Copied from the file, not written here

The file declares its own license as Apache-2.0. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

2.3 KB, 527 tokens by cl100k_base, as published. Nobody here has run it

When to Use

Generating shippable web image assets: favicons, app/PWA icons, Open Graph / social cards, or rasterizing an SVG/HTML design to an exact-size PNG. Uses ONLY locally installed tools — no cloud, no new global deps.

Toolchain (what's actually installed)

Playwright MCP = the rasterizer. Render any HTML/SVG at an EXACT viewport, then browser_take_screenshot. Most reliable HTML/SVG→PNG path on this machine.
icotool (/usr/bin/icotool, from icoutils) = bundle PNGs into a multi-resolution .ico.
ffmpeg = fallback convert and any video-frame work.
NO ImageMagick / sharp / rsvg-convert installed — do NOT assume them.

Recipes

Favicon + app icons

Author one square master (SVG or HTML), transparent bg, ~10% safe padding.
Render PNGs via Playwright at: 16, 32, 48, 180 (apple-touch), 192, 512.
Bundle the small sizes into .ico: icotool -c -o favicon.ico icon-16.png icon-32.png icon-48.png
Emit head tags: icon (svg + 32 png), apple-touch-icon (180), and a webmanifest referencing 192/512.

OG / social card (1200×630)

Build an HTML template (brand type/colors — see brand-voice + frontend-design).
Playwright: browser_resize to 1200×630, navigate, browser_take_screenshot (viewport, NOT full-page).
Variants on request: 1080×1080 (square), 1080×1920 (story/reel).

Hard Rules

ALWAYS render at the literal target pixel size (set the viewport); NEVER scale a smaller screenshot up — upscaling = blur.
.ico must carry at least 16+32; add 48 for crispness. apple-touch-icon must be 180px and NON-transparent (Safari fills transparency black).
OG text must be large and high-contrast (renders thumbnail-small); put the key line in the top-left third.
Confirm output dimensions after export; don't assume them.

Output Contract

Return: files generated with their exact dimensions, the tool used per asset, and the <head>/manifest snippet to wire them in.

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.