Create small SVG icons and favicons through an allowlist-secured, human-gated pipeline.
npx skills add https://github.com/sergeiwallace/skills --skill graphic-sergeiwallace
Please help me install this Agent Skill. Skill: graphic Source: https://github.com/sergeiwallace/skills/tree/main/skills/graphic Command: npx skills add https://github.com/sergeiwallace/skills --skill graphic-sergeiwallace
<text> elements with a fixed safe font list. - Mandatory SVG allowlist and SVGO normalization: Every candidate passes scripts/svg_allowlist.py, which rejects <script>, <foreignObject>, <image>, external hrefs, and non-allowlisted attributes outright rather than stripping them. - Multi-size contact-sheet rendering: Renders each candidate at 16/32/48/128px on light and dark backgrounds via @resvg/resvg-js, with a manifest, so legibility at small sizes is verified before selection. - Hard human gate and provenance receipt: Never auto-applies a candidate; a human picks one, then the asset is packaged as a favicon and a provenance entry is logged. - Use Case: You need a 32px monochrome favicon for an open-source project. The Skill inspects existing assets, authors a constrained SVG, sanitizes and renders it at all favicon sizes, and waits for your pick before wiring a <link rel="icon"> tag. ## Quick Start Ask the agent to run the graphic skill to create a 32px monochrome favicon for your project and review the rendered contact sheet before choosing one.High-intent search queries and answers about installing and using this skill.
Run the graphic skill with a brief describing subject, sizes, and palette. It authors or reuses a constrained SVG, sanitizes it through an allowlist, renders it at 16/32/48/128px on light and dark backgrounds, and waits for your explicit pick before packaging it with a link rel="icon" tag.
Pass the SVG through scripts/svg_allowlist.py, which rejects any file containing script, foreignObject, image, style elements, external hrefs, or non-allowlisted attributes. Rejected files must be regenerated from a clean source rather than stripped, then normalized with SVGO.
No. Phase one deliberately excludes novel vector generation, raster tracing, and raster generation. Requests needing those are declared out of scope, and you should use an image-generation tool available in your environment instead.
The allowlist script uses only the Python 3 standard library. The renderer requires the @resvg/resvg-js npm package (version 2.6.2, MPL-2.0 licensed), installed once by running npm install inside the scripts directory.
A best-effort strip can miss parser-level evasions, so the allowlist fails closed: any violation rejects the candidate outright. The SVG must be regenerated from a fresh, reviewable source rather than cleaned after the fact.
Yes, but only via a real text or tspan element with font-family restricted to a fixed list of widely available system font stacks. Hand-drawing letterforms as bezier paths is disallowed because it is illegible and hard to review.
ilanf23Define icon set standards for grid, sizes, naming, and styles.
compozyGenerate complete favicon packages from logos, initials, or brand colors in all required formats.
LortunateCorrect font choices, hierarchy, sizing, and readability in user-provided text.
EmasoftGenerate polished technical SVG icons, logos, patterns, and animations via a render-verify-deliver loop.