You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
chore: add AGENTS.md and agent skills for making and reviewing icons - #2822
Sets up the repo for AI coding agents: an AGENTS.md guide and two Agent Skills under .claude/skills/. Nothing else changes; the build and the website aren't affected.
AGENTS.md
Short guide: where things are, and links to the wiki for the rules (icons, PR titles, releases) instead of copying them, so the wiki stays the one place to update. AGENTS.md is read by most agents (Codex, Copilot, Cursor, …); CLAUDE.md only imports it for Claude Code.
Skills
Claude Code (and other agents with skill support) load them automatically. Agents without it can read each SKILL.md and run the scripts directly.
svg-icons: making and fixing icons
Scripts (Node, no native dependencies; run npm install in .claude/skills/svg-icons/scripts once):
render.js: PNG previews on light and dark backgrounds at 128/32/16 px.
inspect.js: lists an SVG's shapes, colours and bounds.
versions.js: builds original, plain, line and the wordmark versions from an official logo.
optimize.js: SVGO plus the id prefix.
validate.js: viewBox, padding, centring, one path in one colour for font versions.
pixdiff.js, trace.js.
references/techniques.md: recipes for plain versions of multi-colour logos, line versions, wordmarks, raster-only logos and fixing artifacts.
references/devicon-standards.md: the wiki's rules plus what maintainers ask for in reviews, each with a link to an example comment.
scripts/check_icon.js: checks an icon's devicon.json entry against its files (versions vs files, font versions are one path in one fill matching color, aliases, id prefixes, sort order).
It posts to GitHub only when asked, and never approves on its own.
Both skills include a few test cases in evals/.
Prepared by Claude (an AI assistant) on behalf of @Snailedlt.
Adds two repository-local Claude Code skills for creating SVG icon variants and reviewing Devicon icon contributions. The changes provide contributor tooling and evaluation fixtures without changing production icons, the website, or the build.
The reason will be displayed to describe this comment to others. Learn more.
Not changing this. The cleanup now only runs on paper.js's own output, which is flat with nothing inherited, so it can't change the artwork. optimize.js passes generic: true and leaves arbitrary SVGs to SVGO.
Prepared by Claude (an AI assistant) on behalf of @Snailedlt.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Snailedlt
changed the title
chore: add Claude Code skills for making and reviewing icons
chore: add CLAUDE.md and Claude Code skills for icon work
Nov 1, 2026
- check_icon: an alias may share a name with a non-font SVG (e.g. Babel);
flag fill="none" in font versions
- validate: reject extra shapes/groups in plain/line; flag artwork outside the box
- pixdiff: report files missing from either folder
- build: keep group opacity; don't flatten groups with transforms/compositing;
paper.js cleanup only on paper output, not in optimize.js
- versions: a logo with white parts isn't treated as one-colour
- AGENTS.md holds the guide so any agent can use it; CLAUDE.md imports it
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Snailedlt
changed the title
chore: add CLAUDE.md and Claude Code skills for icon work
chore: add AGENTS.md and agent skills for making and reviewing icons
Nov 1, 2026
Thanks, Copilot. All 9 points were valid; fixed in 85f5eed:
Aliases: an alias may share its name with an SVG that isn't a font version (Babel's plain → original is the normal pattern). Only a clash with a font version is an error now; the docs are updated too.
fill="none" in a font version is now an error.
validate.js: extra shapes or groups in plain/line fail, and so does artwork outside the 128 box.
pixdiff.js: files missing from either folder are reported.
build.js: group opacity is kept; groups with transforms, opacity, clip paths, masks or filters aren't flattened; the paper.js cleanup only runs on paper's own output, not in optimize.js.
versions.js: a logo with white parts isn't treated as one-colour, so its original keeps the white fills.
Tested with real icons (babel, nx, informatica, vlang, react). The results are the same as before, apart from the intended fixes.
Prepared by Claude (an AI assistant) on behalf of @Snailedlt.
An alias array containing null crashes this check because typeof null is "object", so accessing a.base throws before an error is recorded. Invalid entries also remain available to the later aliases.some(a => a.base === v) call. Reject null explicitly and retain only structurally valid aliases for subsequent checks so malformed metadata produces an ERROR report instead of a TypeError.
Exclude definitions and account for use instances in font path checks
This counts paths inside <defs> as drawable artwork and does not count <use> instances. A font SVG containing only <defs><path .../></defs> passes despite rendering nothing, and a definition instantiated twice also passes as a single-path glyph. Reject definitions and uses in font versions, or expand references before checking the visible paths.
Update CSS ID selectors when prefixing SVG element IDs
.claude/skills/svg-icons/scripts/build.js:199
This renames element IDs but leaves CSS ID selectors unchanged. For example, a media-query rule targeting #mark stops matching after the element becomes id="demo-original-mark". The helper therefore changes the appearance of SVGs with retained styles, including when called by optimize.js. Use SVG/CSS-aware prefixing, such as SVGO's prefixIds plugin, to update selectors and references together while retaining existing prefixes.
Restrict single-path shortcut to fully opaque SVG leaves
A one-colour SVG with opacity="0.5" still passes this test, so original (and potentially original-wordmark) takes the one(lp, ...) shortcut. pathSvg() exports only path data and a fill, dropping the opacity and making the original fully opaque. Restrict this shortcut to fully opaque leaves, including fill alpha, so translucent originals go through originalOf() instead.
The reason will be displayed to describe this comment to others. Learn more.
Not changing this. Rebuilding compositing groups is a lot of code for something logos almost never use. Group opacity is multiplied onto each shape, which is exact unless shapes overlap, and leaves() prints a warning whenever opacity is involved.
Prepared by Claude (an AI assistant) on behalf of @Snailedlt.
- check_icon: report null/malformed aliases instead of crashing; reject
<defs>/<symbol>/<use> in font versions
- prefixIds: also rename ID selectors in <style>
- versions: semi-transparent logos don't take the one-path shortcut
- leaves: warn when group opacity is flattened onto overlapping shapes
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Null aliases: malformed aliases are now reported as errors instead of crashing the check.
<defs>/<symbol>/<use> in font versions are rejected.
prefixIds also renames ID selectors inside <style>.
Semi-transparent logos no longer take the one-path shortcut in versions.js.
Not changing two things:
Group opacity compositing: recreating compositing groups is a lot of code for something logos almost never use. The leaves now get the multiplied opacity, which is exact unless shapes overlap, and the script prints a warning whenever opacity is involved.
Context-dependent cleanup: this now only runs on paper.js's own output, which is flat with nothing inherited, so removing those attributes can't change the artwork. optimize.js leaves arbitrary SVGs to SVGO.
I re-ran the skill evals (4 cases) after these changes; with the skills, every check passes.
Prepared by Claude (an AI assistant) on behalf of @Snailedlt.
Font versions may only have <svg xmlns viewBox> and one <path d fill>;
anything else is reported, instead of listing what isn't allowed.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@copilot Font versions are now checked against an allowlist (9cd4b66): only <svg xmlns viewBox> and one <path d fill> are allowed, and anything else is reported. This replaces the list of forbidden elements and attributes, so <defs>, <use>, styles, opacity and fill-rule are covered without naming each one. Also, svg-icons fixes now keep an icon's size unless asked (00b8aee). All skill evals still pass.
Prepared by Claude (an AI assistant) on behalf of @Snailedlt.
The reason will be displayed to describe this comment to others. Learn more.
🔵 Needs a closer look
Geometry handling can silently discard visible artwork and alter faithful originals, while validation and SVG preview-generation defects also remain active.
Retain non-empty paths regardless of area or contour winding
.claude/skills/svg-icons/scripts/build.js:59
This area filter silently drops visible artwork: small source-coordinate shapes fall below 0.01, and disjoint contours with opposite winding can have a summed signed area of zero. The builders can then omit logo details or fail on empty geometry before fitting it to 128 units. Remove the area cutoff from leaves() so neither source scale nor contour winding determines whether a non-empty path is retained.
Preserve faithful originals when geometry-changing plain options are active
With a monochrome logo and --gap 2.5, this shortcut writes original from the processed plain path, whose shrink-and-regrow step can round corners or remove thin details. The same issue affects original-wordmark. Disable the shortcut when geometry-changing plain options are active so these options cannot alter the faithful original.
Reject empty path data when validating icon glyphs
Counting paths does not establish that the glyph contains any geometry. With an otherwise valid entry, both <path fill="#123456"/> and <path fill="#123456" d=""/> currently produce zero errors and exit 0, although they render an empty icon. Require non-empty d data for the sole path before reporting the font version as valid.
Prevent SVGO from converting required hex fills to named colors
.claude/skills/svg-icons/scripts/build.js:185
SVGO's default convertColors can shorten #ff0000 to red, but both validate.js and check_icon.js reject non-hex fills in font versions. Consequently, building or optimizing a red plain/line icon produces output that fails the supplied validation workflow. Disable named-colour shortening here so optimized fills retain the required hexadecimal representation.
Escape filenames before embedding them in SVG text
.claude/skills/svg-icons/scripts/render.js:46
The filename is inserted into SVG text without XML escaping. A valid input filename such as AT&T.svg makes the preview sheet malformed XML, so rendering fails even though the input SVG is valid. Escape the text before embedding it.
- leaves: keep shapes by bounds, not signed area (small units, opposite winding)
- versions: one-colour originals come from the raw shapes, not --gap's smoothing
- check/validate: a font path needs path data
- optimize: keep #hex fills (no SVGO colour names)
- render: escape file names in the preview sheet
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The reason will be displayed to describe this comment to others. Learn more.
🔵 Needs a closer look
Human assessment is needed to evaluate multiple SVG transformation and validation risks that can corrupt artwork, miss invalid fills, or prevent output generation.
svgo.config.js follows devicon's SVGOMG guide with precision 3 (lower
precision broke icomoon glyphs in devicons#2380), #hex colours, <style> classes
inlined before the element is dropped and raster images left for
validation to catch.
svg-icons optimizes changed files as the last change, then validates and
renders again. optimize.js --check lets the review flag files that would
shrink by over 20% (or 4 KB); smaller savings are noise from other SVGO
versions. The review also asks for peek screenshots of the latest SVGs.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
optimize.js --check needed 500 saved bytes, which let small unoptimized
files through (41% on a 1 KB icon). 200 bytes still keeps re-optimized
files out. The drizzle review eval now also expects the review to flag
the unoptimized SVG.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- convert colour names to hex before paper.js imports the SVG; paper
resolves names through a canvas, which is a stub here, so "black"
came out as #aN
- move gradient points with the fit in originals (they kept the
source's coordinates)
- add --holes for light artwork on a tile, which isn't white enough to
become holes in plain/line
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
SVG fills an open subpath as if it were closed, but paper.js drops its
last segment in unite/subtract, so a rounded corner drawn last became a
straight cut (seen on Power BI's tallest bar).
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
check_icon.js warns about #rrggbb colours (entry and SVGs) that fit #rgb; the docs ask for short hex.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This branch has not been deployed
No deployments
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
devopsDevops, devex and automation related enhancements
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Sets up the repo for AI coding agents: an
AGENTS.mdguide and two Agent Skills under.claude/skills/. Nothing else changes; the build and the website aren't affected.AGENTS.mdShort guide: where things are, and links to the wiki for the rules (icons, PR titles, releases) instead of copying them, so the wiki stays the one place to update.
AGENTS.mdis read by most agents (Codex, Copilot, Cursor, …);CLAUDE.mdonly imports it for Claude Code.Skills
Claude Code (and other agents with skill support) load them automatically. Agents without it can read each
SKILL.mdand run the scripts directly.svg-icons: making and fixing iconsnpm installin.claude/skills/svg-icons/scriptsonce):render.js: PNG previews on light and dark backgrounds at 128/32/16 px.inspect.js: lists an SVG's shapes, colours and bounds.versions.js: buildsoriginal,plain,lineand the wordmark versions from an official logo.optimize.js: SVGO plus the id prefix.validate.js: viewBox, padding, centring, one path in one colour for font versions.pixdiff.js,trace.js.references/techniques.md: recipes for plain versions of multi-colour logos, line versions, wordmarks, raster-only logos and fixing artifacts.devicon-icon-review: reviewing icon PRsreferences/devicon-standards.md: the wiki's rules plus what maintainers ask for in reviews, each with a link to an example comment.scripts/check_icon.js: checks an icon'sdevicon.jsonentry against its files (versions vs files, font versions are one path in one fill matchingcolor, aliases, id prefixes, sort order).Both skills include a few test cases in
evals/.Prepared by Claude (an AI assistant) on behalf of @Snailedlt.
🤖 Generated with Claude Code