Web assets

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

SDD, but for landing pages — a phased multi-agent workflow that ships modern, high-converting landings that don't look AI-generated. One-command install.

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.

One thing 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.

What its author says it does

Copied from the file, not written here

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.

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, 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.