[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7EFWSQHDG2AAK3REVB7PCHA":3,"skill-same:01M7EFWSQHDG2AAK3REVB7PCHA":254},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":25,"commitSha":26,"skillDirectory":27,"forksCount":28,"repositoryHtmlUrl":29,"repositoryHomepageUrl":6,"ownerHtmlUrl":30,"ownerBlogUrl":31,"ownerDescription":32,"updatedAt":33,"install":34,"resources":47},"01M7EFWSQHDG2AAK3REVB7PCHA","animated-svg",null,"Designs, generates, validates and optimizes self-contained animated SVG files that render wherever an image can be shown, on web pages, in apps, docs sites and GitHub READMEs, such as cards, banners and headings, stats, streak and project cards, loaders, badges, charts and diagrams, timelines, logo walls, contribution calendars and progress rings. CSS and SMIL only, five timing presets, a generator for 23 kinds at any size with desktop and phone layouts, 15 theme presets or a brand color, starter packs for a whole README, a validator with WCAG contrast checks, a frame and poster renderer and a safe minifier. Use when the user asks for an \"animated SVG\", an \"SVG for my website\" or landing page, a \"README card\", \"README banner\" or \"README header\", an \"SVG loader\", to \"animate this SVG\", a \"line draw\", an \"SVG diagram for README\", a \"GitHub profile animation\", or runs \u002Fanimated-svg [create|animate|optimize]. React and Motion scenes inside an app go to motion-scene; reviews of an existing file go to svg-audit.","Sagargupta16\u002Fsvg-forge","Sagargupta16","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F92421383?v=4","01M786D4R1TQ7DRTTSGQB4DAMN","Sagar Gupta","01M7EFWQEHHGD783YVNZ51485F",3,"MIT","https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: animated-svg\ndescription: >-\n  Designs, generates, validates and optimizes self-contained animated SVG\n  files that render wherever an image can be shown, on web pages, in apps,\n  docs sites and GitHub READMEs, such as cards, banners and headings,\n  stats, streak and project cards, loaders, badges, charts and diagrams,\n  timelines, logo walls, contribution calendars and progress rings. CSS and\n  SMIL only, five timing presets, a generator for 23 kinds at any\n  size with desktop and phone layouts, 15 theme presets or a brand color,\n  starter packs for a whole README, a validator with WCAG contrast checks,\n  a frame and poster renderer and a safe minifier. Use when the user asks\n  for an \"animated SVG\", an \"SVG for my website\" or landing page, a \"README\n  card\", \"README banner\" or \"README header\", an \"SVG loader\", to\n  \"animate this SVG\", a \"line draw\", an \"SVG diagram for README\", a \"GitHub\n  profile animation\", or runs \u002Fanimated-svg [create|animate|optimize].\n  React and Motion scenes inside an app go to motion-scene; reviews of an\n  existing file go to svg-audit.\nargument-hint: \"[create|animate|optimize] \u003Cwhat>\"\n---\n\n# animated-svg\n\nBuild one self-contained `.svg` that animates on its own clock, survives GitHub's image pipeline, reads on dark and light themes, and stays small. Everything moves with SMIL or CSS inside the file; nothing loads from outside it.\n\nScript paths below are relative to this skill's folder (the directory that holds this SKILL.md). Run them with Python 3.12+; they use the standard library only.\n\n## Which skill\n\n| Need | Skill |\n| --- | --- |\n| A standalone `.svg` for a web page, app, docs site, package page, README or any `\u003Cimg>`; an SVG inlined in a plain HTML page; a still PNG of one for slides, email or link previews | animated-svg (this one) |\n| An animated React component using Motion (`motion\u002Freact`) inside an app | motion-scene |\n| Review, debug or shrink an existing SVG or scene (\"why doesn't it animate on GitHub\") | svg-audit |\n\nFor a finished graphic end to end (storyboard, build, validate, iterate at every size), the plugin's `svg-designer` subagent follows this skill.\n\n## Modes\n\n- `create` (default): a new file from a description or data. Run the workflow below from step 1.\n- `animate`: add motion to an existing static SVG. Say what the drawing is and which two or three parts make it that; the part that gives it away is the one that moves. Name the mechanism (step 3), then add techniques from [references\u002Fsmil-and-css.md](references\u002Fsmil-and-css.md) without changing its geometry. Prefix any ids you add. Then steps 5 to 7.\n- `optimize`: make an existing animated file smaller without breaking it. Go straight to [references\u002Foptimize.md](references\u002Foptimize.md), then steps 5 and 6.\n\n## Workflow\n\n### 1. Pin the requirements, then pick the delivery target\n\nBefore drawing, settle five things from the request (ask only for what cannot be inferred): where it is shown (README, social card, app page, slide), the size (a preset from step 4 or WxH; a README card with text also gets a phone file), the theme (GitHub dark and light, a preset, or a brand color), what it must say (the real numbers, names or steps), and whether it loops or plays once.\n\n| Target | Shown through | Allowed | Not allowed | Validate with |\n| --- | --- | --- | --- | --- |\n| `standalone` | `\u003Cimg>`, `\u003Cpicture>`, CSS `background-image` or a Markdown image: web pages, apps, docs sites, npm and PyPI pages, GitHub READMEs | SMIL, CSS in an inline `\u003Cstyle>`, system fonts, small data URIs | script and event handlers, `\u003CforeignObject>`, external `href`\u002F`url()`\u002F`@import`, hover and click, in-SVG theme switching | `--target standalone` |\n| `web` | inline `\u003Csvg>` in a page you control | everything above, plus `:hover`\u002F`:focus` and a page-level pause control | script inside the SVG; unprefixed ids (they collide with the page) | `--target web` |\n\nDefault to `standalone`: it works on every surface that shows an image, on a site you do not control, and in a repo. GitHub strips inline `\u003Csvg>` from Markdown, so a README can only show the file as an image ([references\u002Fgithub-readme.md](references\u002Fgithub-readme.md)). Every surface, from landing pages and apps to slides, email and link previews, with what it does to an animated SVG and how to ship to it: [references\u002Fwhere-it-runs.md](references\u002Fwhere-it-runs.md).\n\n### 2. Pick a timing preset\n\n| Preset | Duration | Use when |\n| --- | --- | --- |\n| `micro` | 120-300 ms, one-shot | hover, press or toggle feedback; `web` target only (an `\u003Cimg>` gets no pointer events) |\n| `short` | 0.4-1.2 s one-shot, 60-120 ms stagger, total under ~1.5 s | data that should settle: stat tiles, charts drawing in, bars, list cards |\n| `medium` (default) | 3-6 s seamless loop | one mechanism: packets on a wire, a pulse, a scan, a loader |\n| `long` | 8-20 s storyboard loop, 3-6 beats on one clock | multi-step diagrams, rotating taglines, a terminal that types |\n| `ambient` | 20-60 s, set by speed in px\u002Fs (default 40) | logo or tag strips, slow background drift |\n\nThe clock starts when the image loads, not when it scrolls into view, so a one-shot entrance below the fold has usually finished before anyone sees it: the final frame must be the complete, real state. Easing curves, stagger math, loop rules and the WCAG 2.2.2 note: [references\u002Ftiming.md](references\u002Ftiming.md).\n\n### 3. Design the mechanism and storyboard before drawing\n\n1. Write the subject as `input -> processing -> output` in its own nouns (read the code or the user's description, not a generic category).\n2. Offer two or three concepts, one line each (the scene or object, what moves, what the resting frame shows) and let the user pick; skip this when the request already names them. Line-figure hero art: [references\u002Fisometric.md](references\u002Fisometric.md).\n3. Design the rest before the motion: the still frame is the thumbnail, so it is composed, with one bright mark where the eye starts ([references\u002Fdesign.md](references\u002Fdesign.md) section 1).\n4. Give every moving element a meaning: packet = request or artifact, line draw = progress, pulse = live, highlight = active step. Cut motion that means nothing.\n5. Choose one clock `T`. Write the beat table: what moves, from where to where, during which fraction of `T`. Every element uses `T` (or `T \u002F k`).\n6. Check the budget: about 12 animated elements per scene, 40 per file, one accent plus neutrals, one highlight at a time, labels of 12 characters or fewer.\n\n```\nclock T = 6 s loop (medium)\n| # | beat                      | t \u002F T     | moves              |\n| 1 | artifact appears at BUILD | 0.00-0.08 | packet fades in    |\n| 2 | travels BUILD to DEPLOY   | 0.08-0.62 | packet on the wire |\n| 3 | TEST lights as it passes  | 0.30-0.52 | node highlight     |\n| 4 | rest, reset while hidden  | 0.90-1.00 | everything at rest |\n```\n\nComposition, grid, palette, contrast on both GitHub themes and type sizing: [references\u002Fdesign.md](references\u002Fdesign.md).\n\n### 4. Generate with forge.py, or hand-author from a template\n\nIf a kind fits, generate it with `scripts\u002Fforge.py` and change the data, not the output. The kinds, their `--data` shapes and every option are in [references\u002Fkinds.md](references\u002Fkinds.md):\n\n| Group | Kinds |\n| --- | --- |\n| Stats and data | `tiles`, `stats`, `streak`, `chart`, `bars`, `breakdown`, `radar`, `ring`, `calendar`, `skyline` |\n| Headers, cards and identity | `hero`, `banner`, `heading`, `card`, `quote`, `badge`, `logos`, `marquee`, `divider` |\n| Diagrams and stories | `flow`, `timeline`, `typing` |\n| Small marks | `loader` (11 variants) |\n\nThe options that matter most:\n- `--size`: `WxH`, a width, or a preset (`readme`, `card`, `og`, `linkedin-banner`, `square`, `story`, `icon-128` and more). Or `--width`\u002F`--height` (8 to 4096), not both.\n- `--theme`: `dark` (default), `light`, `both` (the GitHub pair), a preset (`nord`, `dracula`, `catppuccin-mocha`, ...), a family with `--mode dark|light|both`, `auto:\u003Chex>` for a brand color, or a palette `.json`. Every preset and the contrast rules: [references\u002Fthemes-and-sizes.md](references\u002Fthemes-and-sizes.md).\n- `--device phone|both`: a phone layout drawn 320 px wide with no text under 10.5 px; `both` writes `NAME.svg` and `NAME-mobile.svg` and prints the `\u003Cpicture>` that swaps them at 1012 px, GitHub's breakpoint; pass `--breakpoint PX` for your own page ([references\u002Fgithub-readme.md](references\u002Fgithub-readme.md) section 3b). Any card with text needs it: an 840 px card shows at about 0.37x on a phone.\n- `--accent \"#rrggbb\"`, `--timing`, `--loop`\u002F`--once`, `--data FILE.json`, `--title`, `--variant`.\n\n```bash\npython scripts\u002Fforge.py --kind flow --timing long --data pipeline.json --out assets\u002Fflow.svg\npython scripts\u002Fforge.py --kind hero --theme both --device both --accent \"#a78bfa\" --out assets\u002Fhero.svg\n```\n\nA set of files (`--theme both`, `--mode both`, `--device both`) needs `--out` and prints the `\u003Cpicture>` with the paths as given, so pass a repo-relative `--out`. Bad options or data exit with status 2 and a message.\n\nA whole README (header, section headings, stats, footer) is one pack: copy `assets\u002Fpacks\u002Fprofile.json` or `assets\u002Fpacks\u002Fproject.json`, edit the data and alt text, and run `python scripts\u002Fpack.py PACK.json`. Every card shares one theme, accent and device set, and `snippet.md` holds the markup in order, rows and links included ([references\u002Fkinds.md](references\u002Fkinds.md), Packs).\n\nIf no kind fits, hand-author: start from the closest starter template (forge output with sample data, already validated), keep its frame, prefixed ids and `role`\u002F`\u003Ctitle>`\u002F`\u003Cdesc>` block, and add motion one recipe at a time from [references\u002Fsmil-and-css.md](references\u002Fsmil-and-css.md). Choose SMIL for geometry, paths, morphs, discrete steps and chains; CSS for transform and opacity on groups and anything that should honor reduced motion.\n\n### 5. Validate\n\n```bash\npython scripts\u002Fvalidate_svg.py assets\u002Fhero-dark.svg --theme dark --strict-contrast\npython scripts\u002Fvalidate_svg.py assets\u002Fhero-light.svg --theme light --strict-contrast\n```\n\n- `FILE_OR_DIR...` one or more files, or folders to scan for `*.svg`; `--target standalone|web` (default `standalone`; `web` downgrades external references, `\u003CforeignObject>` and a missing xmlns to warnings); `--max-kb N` (error above N, warning above half; defaults 100 KB standalone, 200 KB web); `--json` for machine-readable findings.\n- Each finding has a rule id, severity and line. Exit status is 1 when any file has an error. Fix every error: SV001-SV004 structure, SV005-SV009 blocked content (script, handlers, `\u003CforeignObject>`, external references, `@import` and remote fonts), SV010-SV011 accessible name, SV012 duplicate ids, SV013 size, SV014 en or em dashes, SV024 a negative width, height or radius (the element is not rendered).\n- Then read the warnings: SV017 and SV018 (keyTimes, values and keySplines counts, keySplines without `calcMode=\"spline\"`) usually mean an animation silently does nothing; SV015 more than 40 animated elements; SV016 a repeat under 100 ms; SV019 `pathLength` with `non-scaling-stroke`; SV020 a data URI over 64 KB.\n- SV021-SV023 check contrast: text 4.5:1 (3:1 at 24 px, or 18.66 px bold) on the SVG's own background, or on both GitHub pages when it has none (SV022); solid shapes 3:1 (SV023, WCAG 1.4.11); gradients by their worst stop. `--theme dark|light` per half of a pair, `--strict-contrast` to make them errors, `stats.contrast` in `--json`.\n- Generated files: fix the data or the generator, never the output.\n- Symptom lookup when something renders wrong: [references\u002Fgotchas.md](references\u002Fgotchas.md).\n\n### 6. Look at it\n\nA passing validator is not a working animation.\n\n1. See the timing: `python scripts\u002Fframes.py FILE.svg` writes `FILE.frames.png`, frames from t=0 to just before the loop restarts, so the start and the seam sit on one sheet. Read the PNG: entrances, overlaps, and the loop landing back on frame one. `--times 0,1.2,2.4` picks moments; `--theme both` adds a light row; captions show `k`, the keyTimes position. It needs headless Chrome, Edge or Chromium; exit 3 means none was found, so open the `.html` it wrote. Run it again on the `-mobile.svg` file, and with `--width 240` for a gallery tile, and fix any label that stops reading there.\n2. Open the file directly in Chrome and Firefox (and Safari or WebKit when you can). Watch two full cycles; the seam is where loops break.\n3. Seek exact frames by hand when the sheet is not enough: with the `.svg` open as its own page, run `document.documentElement.pauseAnimations(); document.documentElement.setCurrentTime(2.4)` in the console for SMIL, and `document.getAnimations().forEach(a => { a.pause(); a.currentTime = 2400; })` for CSS. Check each beat boundary from the storyboard.\n4. Web pages: open the page at 390 px and 1280 px wide, in both color schemes. README files: push to a branch and view the README on GitHub for that branch, in both GitHub themes, at 390 px and at 1280 px wide. The phone file must show under 1012 px and the desktop file above it. An 840 px card with no phone file renders at about 0.41x on a phone; anything that must be read needs about 22-24 px drawn size.\n5. Rows of cards or images inside links: render the snippet with `gh api --method POST markdown -f mode=gfm -F text=@snippet.md` and confirm no `js-gh-image-fallback` class appears.\n6. Accessibility: the file names itself (`role=\"img\"`, `\u003Ctitle>`, `\u003Cdesc>`); the README markup carries real alt text with the content and numbers (replace forge's title-only alt in the printed snippet); decorative pieces use `alt=\"\"`. See [references\u002Faccessibility.md](references\u002Faccessibility.md).\n\n### 7. Optimize safely\n\n- Skip it for forge output; it is already compact.\n- Run `python scripts\u002Foptimize_svg.py FILE --out min.svg` (`--in-place`, `--check`, `--precision 2`). It drops comments, metadata, editor namespaces and whitespace between tags, removes defaults it is sure of and rounds geometry. It never touches ids, `\u003Canimate*>`\u002F`\u003Cset>` or `\u003Cstyle>`, and it writes nothing if the result loses an id or an animation, or adds a validator error.\n- For more bytes on exported artwork, use SVGO with `assets\u002Fsvgo.config.mjs` (default `preset-default` deletes fade-in start states, rewrites ids that `begin` points at, strips `role=\"img\"` and turns animated shapes into paths), then re-run step 5 and compare animation counts before and after.\n- Budgets: aim under 50 KB, hard stop 100 KB unless the user accepts more; rasters at 2x drawn size; no embedded fonts unless the font is the point.\n\nAll of it, with the config and the reasons: [references\u002Foptimize.md](references\u002Foptimize.md).\n\n## Deliver\n\nHand back:\n- the file paths and sizes (both theme files when `both`, and the `-mobile` files when `--device both`);\n- the markup: the `\u003Cpicture>` snippet or `\u003Cimg>`, with descriptive alt text (a pack's `snippet.md`), or a `frames.py --poster` PNG for a surface that takes no SVG;\n- the timing preset and the beat table used;\n- the validator result (with contrast), the `frames.py` contact sheet, and which browsers, themes and widths were checked;\n- anything not verified (for example Safari not available), and a note when a README loop runs longer than 5 s (WCAG 2.2.2 cannot be met inside an image).\n\n## Never do\n\n- Never put `\u003Cscript>`, event handlers, `\u003CforeignObject>`, external `href`\u002F`url()`\u002F`@import` or web-font URLs in a standalone file.\n- Never paste inline `\u003Csvg>` into Markdown or rely on hover and click inside an `\u003Cimg>`.\n- Never switch themes with `prefers-color-scheme` inside the file for a README; ship a `\u003Cpicture>` pair.\n- Never put pale accents or light text on a transparent file without a light variant.\n- Never put information only in motion: the resting frame holds the whole message.\n- Never light two places at once: one highlight, which moves to the active part.\n- Never run beats on different clocks or ship a loop that jumps at its seam.\n- Never animate `d` with CSS (Safari ignores it) or draw lines with a negative `stroke-dashoffset`.\n- Never run SVGO's default preset on an animated file or hand-edit a generated one.\n- Never interpolate unescaped user text, emoji or dash characters into SVG text.\n- Never add a reduced-motion gate by default (motion stays visible; `--reduced-motion respect` is the user's opt-in), and never add one to an app that has its own motion control.\n- Never ship without running the validator and looking at the result.\n\n## References\n\n- [references\u002Fgithub-readme.md](references\u002Fgithub-readme.md): what survives GitHub's sanitizer and image proxy, `\u003Cpicture>` for dark and light, the `\u003Cimg>` inside `\u003Ca>` quirk, data URIs, size budgets, caching, the Firefox caveat, previewing.\n- [references\u002Fsmil-and-css.md](references\u002Fsmil-and-css.md): copy-paste recipes for entrances, line draws, bars, marquees, shine, pulse, packets on paths, rotating taglines, typing, morphs, chaining and phase offsets; SMIL versus CSS.\n- [references\u002Ftiming.md](references\u002Ftiming.md): the five presets, easing curves, stagger math, one-clock storyboards, seamless loops, length budgets, WCAG 2.2.2 and the reduced-motion trade-off.\n- [references\u002Fdesign.md](references\u002Fdesign.md): mechanism over decoration, layout grids, palette and contrast on both GitHub themes, typography and width estimates, chips and label fitting, element budgets.\n- [references\u002Foptimize.md](references\u002Foptimize.md): `optimize_svg.py`, the animation-safe SVGO v4 config, id prefixing, size budgets, determinism.\n- [references\u002Fkinds.md](references\u002Fkinds.md): every kind with its data shape, default timing and phone layout, every option, packs, the starter templates.\n- [references\u002Fthemes-and-sizes.md](references\u002Fthemes-and-sizes.md): theme presets, families and `--mode`, brand and palette themes, the contrast guarantee, size presets, native versus scaled kinds.\n- [references\u002Fgotchas.md](references\u002Fgotchas.md): symptom, cause and fix for the failures that cost the most time.\n- [references\u002Fisometric.md](references\u002Fisometric.md): isometric line figures for hero and cover art: projection, solids, stroke weights, a designed rest, one highlight, paint order, the clock as the pointer.\n- [references\u002Faccessibility.md](references\u002Faccessibility.md): naming the file, alt text, decorative graphics, contrast, motion and WCAG.\n- [references\u002Fwhere-it-runs.md](references\u002Fwhere-it-runs.md): image, inline and document embedding; landing pages, apps, docs sites, link previews, slides, email and favicons; poster PNGs; your own breakpoint and theme switch.\n","# animated-svg\n\nBuild one self-contained `.svg` that animates on its own clock, survives GitHub's image pipeline, reads on dark and light themes, and stays small. Everything moves with SMIL or CSS inside the file; nothing loads from outside it.\n\nScript paths below are relative to this skill's folder (the directory that holds this SKILL.md). Run them with Python 3.12+; they use the standard library only.\n\n## Which skill\n\n| Need | Skill |\n| --- | --- |\n| A standalone `.svg` for a web page, app, docs site, package page, README or any `\u003Cimg>`; an SVG inlined in a plain HTML page; a still PNG of one for slides, email or link previews | animated-svg (this one) |\n| An animated React component using Motion (`motion\u002Freact`) inside an app | motion-scene |\n| Review, debug or shrink an existing SVG or scene (\"why doesn't it animate on GitHub\") | svg-audit |\n\nFor a finished graphic end to end (storyboard, build, validate, iterate at every size), the plugin's `svg-designer` subagent follows this skill.\n\n## Modes\n\n- `create` (default): a new file from a description or data. Run the workflow below from step 1.\n- `animate`: add motion to an existing static SVG. Say what the drawing is and which two or three parts make it that; the part that gives it away is the one that moves. Name the mechanism (step 3), then add techniques from [references\u002Fsmil-and-css.md](references\u002Fsmil-and-css.md) without changing its geometry. Prefix any ids you add. Then steps 5 to 7.\n- `optimize`: make an existing animated file smaller without breaking it. Go straight to [references\u002Foptimize.md](references\u002Foptimize.md), then steps 5 and 6.\n\n## Workflow\n\n### 1. Pin the requirements, then pick the delivery target\n\nBefore drawing, settle five things from the request (ask only for what cannot be inferred): where it is shown (README, social card, app page, slide), the size (a preset from step 4 or WxH; a README card with text also gets a phone file), the theme (GitHub dark and light, a preset, or a brand color), what it must say (the real numbers, names or steps), and whether it loops or plays once.\n\n| Target | Shown through | Allowed | Not allowed | Validate with |\n| --- | --- | --- | --- | --- |\n| `standalone` | `\u003Cimg>`, `\u003Cpicture>`, CSS `background-image` or a Markdown image: web pages, apps, docs sites, npm and PyPI pages, GitHub READMEs | SMIL, CSS in an inline `\u003Cstyle>`, system fonts, small data URIs | script and event handlers, `\u003CforeignObject>`, external `href`\u002F`url()`\u002F`@import`, hover and click, in-SVG theme switching | `--target standalone` |\n| `web` | inline `\u003Csvg>` in a page you control | everything above, plus `:hover`\u002F`:focus` and a page-level pause control | script inside the SVG; unprefixed ids (they collide with the page) | `--target web` |\n\nDefault to `standalone`: it works on every surface that shows an image, on a site you do not control, and in a repo. GitHub strips inline `\u003Csvg>` from Markdown, so a README can only show the file as an image ([references\u002Fgithub-readme.md](references\u002Fgithub-readme.md)). Every surface, from landing pages and apps to slides, email and link previews, with what it does to an animated SVG and how to ship to it: [references\u002Fwhere-it-runs.md](references\u002Fwhere-it-runs.md).\n\n### 2. Pick a timing preset\n\n| Preset | Duration | Use when |\n| --- | --- | --- |\n| `micro` | 120-300 ms, one-shot | hover, press or toggle feedback; `web` target only (an `\u003Cimg>` gets no pointer events) |\n| `short` | 0.4-1.2 s one-shot, 60-120 ms stagger, total under ~1.5 s | data that should settle: stat tiles, charts drawing in, bars, list cards |\n| `medium` (default) | 3-6 s seamless loop | one mechanism: packets on a wire, a pulse, a scan, a loader |\n| `long` | 8-20 s storyboard loop, 3-6 beats on one clock | multi-step diagrams, rotating taglines, a terminal that types |\n| `ambient` | 20-60 s, set by speed in px\u002Fs (default 40) | logo or tag strips, slow background drift |\n\nThe clock starts when the image loads, not when it scrolls into view, so a one-shot entrance below the fold has usually finished before anyone sees it: the final frame must be the complete, real state. Easing curves, stagger math, loop rules and the WCAG 2.2.2 note: [references\u002Ftiming.md](references\u002Ftiming.md).\n\n### 3. Design the mechanism and storyboard before drawing\n\n1. Write the subject as `input -> processing -> output` in its own nouns (read the code or the user's description, not a generic category).\n2. Offer two or three concepts, one line each (the scene or object, what moves, what the resting frame shows) and let the user pick; skip this when the request already names them. Line-figure hero art: [references\u002Fisometric.md](references\u002Fisometric.md).\n3. Design the rest before the motion: the still frame is the thumbnail, so it is composed, with one bright mark where the eye starts ([references\u002Fdesign.md](references\u002Fdesign.md) section 1).\n4. Give every moving element a meaning: packet = request or artifact, line draw = progress, pulse = live, highlight = active step. Cut motion that means nothing.\n5. Choose one clock `T`. Write the beat table: what moves, from where to where, during which fraction of `T`. Every element uses `T` (or `T \u002F k`).\n6. Check the budget: about 12 animated elements per scene, 40 per file, one accent plus neutrals, one highlight at a time, labels of 12 characters or fewer.\n\n```\nclock T = 6 s loop (medium)\n| # | beat                      | t \u002F T     | moves              |\n| 1 | artifact appears at BUILD | 0.00-0.08 | packet fades in    |\n| 2 | travels BUILD to DEPLOY   | 0.08-0.62 | packet on the wire |\n| 3 | TEST lights as it passes  | 0.30-0.52 | node highlight     |\n| 4 | rest, reset while hidden  | 0.90-1.00 | everything at rest |\n```\n\nComposition, grid, palette, contrast on both GitHub themes and type sizing: [references\u002Fdesign.md](references\u002Fdesign.md).\n\n### 4. Generate with forge.py, or hand-author from a template\n\nIf a kind fits, generate it with `scripts\u002Fforge.py` and change the data, not the output. The kinds, their `--data` shapes and every option are in [references\u002Fkinds.md](references\u002Fkinds.md):\n\n| Group | Kinds |\n| --- | --- |\n| Stats and data | `tiles`, `stats`, `streak`, `chart`, `bars`, `breakdown`, `radar`, `ring`, `calendar`, `skyline` |\n| Headers, cards and identity | `hero`, `banner`, `heading`, `card`, `quote`, `badge`, `logos`, `marquee`, `divider` |\n| Diagrams and stories | `flow`, `timeline`, `typing` |\n| Small marks | `loader` (11 variants) |\n\nThe options that matter most:\n- `--size`: `WxH`, a width, or a preset (`readme`, `card`, `og`, `linkedin-banner`, `square`, `story`, `icon-128` and more). Or `--width`\u002F`--height` (8 to 4096), not both.\n- `--theme`: `dark` (default), `light`, `both` (the GitHub pair), a preset (`nord`, `dracula`, `catppuccin-mocha`, ...), a family with `--mode dark|light|both`, `auto:\u003Chex>` for a brand color, or a palette `.json`. Every preset and the contrast rules: [references\u002Fthemes-and-sizes.md](references\u002Fthemes-and-sizes.md).\n- `--device phone|both`: a phone layout drawn 320 px wide with no text under 10.5 px; `both` writes `NAME.svg` and `NAME-mobile.svg` and prints the `\u003Cpicture>` that swaps them at 1012 px, GitHub's breakpoint; pass `--breakpoint PX` for your own page ([references\u002Fgithub-readme.md](references\u002Fgithub-readme.md) section 3b). Any card with text needs it: an 840 px card shows at about 0.37x on a phone.\n- `--accent \"#rrggbb\"`, `--timing`, `--loop`\u002F`--once`, `--data FILE.json`, `--title`, `--variant`.\n\n```bash\npython scripts\u002Fforge.py --kind flow --timing long --data pipeline.json --out assets\u002Fflow.svg\npython scripts\u002Fforge.py --kind hero --theme both --device both --accent \"#a78bfa\" --out assets\u002Fhero.svg\n```\n\nA set of files (`--theme both`, `--mode both`, `--device both`) needs `--out` and prints the `\u003Cpicture>` with the paths as given, so pass a repo-relative `--out`. Bad options or data exit with status 2 and a message.\n\nA whole README (header, section headings, stats, footer) is one pack: copy `assets\u002Fpacks\u002Fprofile.json` or `assets\u002Fpacks\u002Fproject.json`, edit the data and alt text, and run `python scripts\u002Fpack.py PACK.json`. Every card shares one theme, accent and device set, and `snippet.md` holds the markup in order, rows and links included ([references\u002Fkinds.md](references\u002Fkinds.md), Packs).\n\nIf no kind fits, hand-author: start from the closest starter template (forge output with sample data, already validated), keep its frame, prefixed ids and `role`\u002F`\u003Ctitle>`\u002F`\u003Cdesc>` block, and add motion one recipe at a time from [references\u002Fsmil-and-css.md](references\u002Fsmil-and-css.md). Choose SMIL for geometry, paths, morphs, discrete steps and chains; CSS for transform and opacity on groups and anything that should honor reduced motion.\n\n### 5. Validate\n\n```bash\npython scripts\u002Fvalidate_svg.py assets\u002Fhero-dark.svg --theme dark --strict-contrast\npython scripts\u002Fvalidate_svg.py assets\u002Fhero-light.svg --theme light --strict-contrast\n```\n\n- `FILE_OR_DIR...` one or more files, or folders to scan for `*.svg`; `--target standalone|web` (default `standalone`; `web` downgrades external references, `\u003CforeignObject>` and a missing xmlns to warnings); `--max-kb N` (error above N, warning above half; defaults 100 KB standalone, 200 KB web); `--json` for machine-readable findings.\n- Each finding has a rule id, severity and line. Exit status is 1 when any file has an error. Fix every error: SV001-SV004 structure, SV005-SV009 blocked content (script, handlers, `\u003CforeignObject>`, external references, `@import` and remote fonts), SV010-SV011 accessible name, SV012 duplicate ids, SV013 size, SV014 en or em dashes, SV024 a negative width, height or radius (the element is not rendered).\n- Then read the warnings: SV017 and SV018 (keyTimes, values and keySplines counts, keySplines without `calcMode=\"spline\"`) usually mean an animation silently does nothing; SV015 more than 40 animated elements; SV016 a repeat under 100 ms; SV019 `pathLength` with `non-scaling-stroke`; SV020 a data URI over 64 KB.\n- SV021-SV023 check contrast: text 4.5:1 (3:1 at 24 px, or 18.66 px bold) on the SVG's own background, or on both GitHub pages when it has none (SV022); solid shapes 3:1 (SV023, WCAG 1.4.11); gradients by their worst stop. `--theme dark|light` per half of a pair, `--strict-contrast` to make them errors, `stats.contrast` in `--json`.\n- Generated files: fix the data or the generator, never the output.\n- Symptom lookup when something renders wrong: [references\u002Fgotchas.md](references\u002Fgotchas.md).\n\n### 6. Look at it\n\nA passing validator is not a working animation.\n\n1. See the timing: `python scripts\u002Fframes.py FILE.svg` writes `FILE.frames.png`, frames from t=0 to just before the loop restarts, so the start and the seam sit on one sheet. Read the PNG: entrances, overlaps, and the loop landing back on frame one. `--times 0,1.2,2.4` picks moments; `--theme both` adds a light row; captions show `k`, the keyTimes position. It needs headless Chrome, Edge or Chromium; exit 3 means none was found, so open the `.html` it wrote. Run it again on the `-mobile.svg` file, and with `--width 240` for a gallery tile, and fix any label that stops reading there.\n2. Open the file directly in Chrome and Firefox (and Safari or WebKit when you can). Watch two full cycles; the seam is where loops break.\n3. Seek exact frames by hand when the sheet is not enough: with the `.svg` open as its own page, run `document.documentElement.pauseAnimations(); document.documentElement.setCurrentTime(2.4)` in the console for SMIL, and `document.getAnimations().forEach(a => { a.pause(); a.currentTime = 2400; })` for CSS. Check each beat boundary from the storyboard.\n4. Web pages: open the page at 390 px and 1280 px wide, in both color schemes. README files: push to a branch and view the README on GitHub for that branch, in both GitHub themes, at 390 px and at 1280 px wide. The phone file must show under 1012 px and the desktop file above it. An 840 px card with no phone file renders at about 0.41x on a phone; anything that must be read needs about 22-24 px drawn size.\n5. Rows of cards or images inside links: render the snippet with `gh api --method POST markdown -f mode=gfm -F text=@snippet.md` and confirm no `js-gh-image-fallback` class appears.\n6. Accessibility: the file names itself (`role=\"img\"`, `\u003Ctitle>`, `\u003Cdesc>`); the README markup carries real alt text with the content and numbers (replace forge's title-only alt in the printed snippet); decorative pieces use `alt=\"\"`. See [references\u002Faccessibility.md](references\u002Faccessibility.md).\n\n### 7. Optimize safely\n\n- Skip it for forge output; it is already compact.\n- Run `python scripts\u002Foptimize_svg.py FILE --out min.svg` (`--in-place`, `--check`, `--precision 2`). It drops comments, metadata, editor namespaces and whitespace between tags, removes defaults it is sure of and rounds geometry. It never touches ids, `\u003Canimate*>`\u002F`\u003Cset>` or `\u003Cstyle>`, and it writes nothing if the result loses an id or an animation, or adds a validator error.\n- For more bytes on exported artwork, use SVGO with `assets\u002Fsvgo.config.mjs` (default `preset-default` deletes fade-in start states, rewrites ids that `begin` points at, strips `role=\"img\"` and turns animated shapes into paths), then re-run step 5 and compare animation counts before and after.\n- Budgets: aim under 50 KB, hard stop 100 KB unless the user accepts more; rasters at 2x drawn size; no embedded fonts unless the font is the point.\n\nAll of it, with the config and the reasons: [references\u002Foptimize.md](references\u002Foptimize.md).\n\n## Deliver\n\nHand back:\n- the file paths and sizes (both theme files when `both`, and the `-mobile` files when `--device both`);\n- the markup: the `\u003Cpicture>` snippet or `\u003Cimg>`, with descriptive alt text (a pack's `snippet.md`), or a `frames.py --poster` PNG for a surface that takes no SVG;\n- the timing preset and the beat table used;\n- the validator result (with contrast), the `frames.py` contact sheet, and which browsers, themes and widths were checked;\n- anything not verified (for example Safari not available), and a note when a README loop runs longer than 5 s (WCAG 2.2.2 cannot be met inside an image).\n\n## Never do\n\n- Never put `\u003Cscript>`, event handlers, `\u003CforeignObject>`, external `href`\u002F`url()`\u002F`@import` or web-font URLs in a standalone file.\n- Never paste inline `\u003Csvg>` into Markdown or rely on hover and click inside an `\u003Cimg>`.\n- Never switch themes with `prefers-color-scheme` inside the file for a README; ship a `\u003Cpicture>` pair.\n- Never put pale accents or light text on a transparent file without a light variant.\n- Never put information only in motion: the resting frame holds the whole message.\n- Never light two places at once: one highlight, which moves to the active part.\n- Never run beats on different clocks or ship a loop that jumps at its seam.\n- Never animate `d` with CSS (Safari ignores it) or draw lines with a negative `stroke-dashoffset`.\n- Never run SVGO's default preset on an animated file or hand-edit a generated one.\n- Never interpolate unescaped user text, emoji or dash characters into SVG text.\n- Never add a reduced-motion gate by default (motion stays visible; `--reduced-motion respect` is the user's opt-in), and never add one to an app that has its own motion control.\n- Never ship without running the validator and looking at the result.\n\n## References\n\n- [references\u002Fgithub-readme.md](references\u002Fgithub-readme.md): what survives GitHub's sanitizer and image proxy, `\u003Cpicture>` for dark and light, the `\u003Cimg>` inside `\u003Ca>` quirk, data URIs, size budgets, caching, the Firefox caveat, previewing.\n- [references\u002Fsmil-and-css.md](references\u002Fsmil-and-css.md): copy-paste recipes for entrances, line draws, bars, marquees, shine, pulse, packets on paths, rotating taglines, typing, morphs, chaining and phase offsets; SMIL versus CSS.\n- [references\u002Ftiming.md](references\u002Ftiming.md): the five presets, easing curves, stagger math, one-clock storyboards, seamless loops, length budgets, WCAG 2.2.2 and the reduced-motion trade-off.\n- [references\u002Fdesign.md](references\u002Fdesign.md): mechanism over decoration, layout grids, palette and contrast on both GitHub themes, typography and width estimates, chips and label fitting, element budgets.\n- [references\u002Foptimize.md](references\u002Foptimize.md): `optimize_svg.py`, the animation-safe SVGO v4 config, id prefixing, size budgets, determinism.\n- [references\u002Fkinds.md](references\u002Fkinds.md): every kind with its data shape, default timing and phone layout, every option, packs, the starter templates.\n- [references\u002Fthemes-and-sizes.md](references\u002Fthemes-and-sizes.md): theme presets, families and `--mode`, brand and palette themes, the contrast guarantee, size presets, native versus scaled kinds.\n- [references\u002Fgotchas.md](references\u002Fgotchas.md): symptom, cause and fix for the failures that cost the most time.\n- [references\u002Fisometric.md](references\u002Fisometric.md): isometric line figures for hero and cover art: projection, solids, stroke weights, a designed rest, one highlight, paint order, the clock as the pointer.\n- [references\u002Faccessibility.md](references\u002Faccessibility.md): naming the file, alt text, decorative graphics, contrast, motion and WCAG.\n- [references\u002Fwhere-it-runs.md](references\u002Fwhere-it-runs.md): image, inline and document embedding; landing pages, apps, docs sites, link previews, slides, email and favicons; poster PNGs; your own breakpoint and theme switch.\n",{"name":5,"description":7,"argument-hint":24},"[create|animate|optimize] \u003Cwhat>","main","1ea7db144dc19fab09b90ee7c8023945707d0b8f","skills\u002Fanimated-svg",0,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge","https:\u002F\u002Fgithub.com\u002FSagargupta16","sagargupta.online","DevOps\u002FMLOps Consultant at @aws | MCA '24 NIT Warangal | Exploring AI Agents, Workflows & ML | 5x AWS Certified","2026-11-10 12:04:52",{"source":8,"skillName":5,"commands":35,"prompt":45,"zipAvailable":46},[36,39,42],{"tool":37,"command":38},"npx","npx skills add Sagargupta16\u002Fsvg-forge --skill animated-svg",{"tool":40,"command":41},"bunx","bunx skills add Sagargupta16\u002Fsvg-forge --skill animated-svg",{"tool":43,"command":44},"pnpm","pnpm dlx skills add Sagargupta16\u002Fsvg-forge --skill animated-svg","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002FSKILL.md",true,[48,54,58,62,66,72,76,80,84,88,92,96,100,104,108,112,116,120,124,128,132,136,140,144,148,152,156,160,164,168,172,176,180,186,190,194,198,202,206,210,214,218,222,226,230,234,238,242,246,250],{"path":49,"resourceType":50,"resourceTypeDesc":51,"sizeBytes":52,"sourceHtmlUrl":53},"assets\u002Fpacks\u002Fprofile.json","ASSET","资产文件",5313,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fassets\u002Fpacks\u002Fprofile.json",{"path":55,"resourceType":50,"resourceTypeDesc":51,"sizeBytes":56,"sourceHtmlUrl":57},"assets\u002Fpacks\u002Fproject.json",4011,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fassets\u002Fpacks\u002Fproject.json",{"path":59,"resourceType":50,"resourceTypeDesc":51,"sizeBytes":60,"sourceHtmlUrl":61},"assets\u002Fpalettes\u002Fember.json",527,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fassets\u002Fpalettes\u002Fember.json",{"path":63,"resourceType":50,"resourceTypeDesc":51,"sizeBytes":64,"sourceHtmlUrl":65},"assets\u002Fpalettes\u002Fpaper.json",561,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fassets\u002Fpalettes\u002Fpaper.json",{"path":67,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":70,"sourceHtmlUrl":71},"assets\u002Fsvgo.config.mjs","SCRIPT","脚本",4468,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fassets\u002Fsvgo.config.mjs",{"path":73,"resourceType":50,"resourceTypeDesc":51,"sizeBytes":74,"sourceHtmlUrl":75},"assets\u002Ftemplates\u002Fbadge.svg",1850,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fassets\u002Ftemplates\u002Fbadge.svg",{"path":77,"resourceType":50,"resourceTypeDesc":51,"sizeBytes":78,"sourceHtmlUrl":79},"assets\u002Ftemplates\u002Fbanner.svg",2718,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fassets\u002Ftemplates\u002Fbanner.svg",{"path":81,"resourceType":50,"resourceTypeDesc":51,"sizeBytes":82,"sourceHtmlUrl":83},"assets\u002Ftemplates\u002Fbars.svg",3510,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fassets\u002Ftemplates\u002Fbars.svg",{"path":85,"resourceType":50,"resourceTypeDesc":51,"sizeBytes":86,"sourceHtmlUrl":87},"assets\u002Ftemplates\u002Fbreakdown.svg",5688,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fassets\u002Ftemplates\u002Fbreakdown.svg",{"path":89,"resourceType":50,"resourceTypeDesc":51,"sizeBytes":90,"sourceHtmlUrl":91},"assets\u002Ftemplates\u002Fcalendar.svg",33735,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fassets\u002Ftemplates\u002Fcalendar.svg",{"path":93,"resourceType":50,"resourceTypeDesc":51,"sizeBytes":94,"sourceHtmlUrl":95},"assets\u002Ftemplates\u002Fcard.svg",5140,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fassets\u002Ftemplates\u002Fcard.svg",{"path":97,"resourceType":50,"resourceTypeDesc":51,"sizeBytes":98,"sourceHtmlUrl":99},"assets\u002Ftemplates\u002Fchart.svg",3195,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fassets\u002Ftemplates\u002Fchart.svg",{"path":101,"resourceType":50,"resourceTypeDesc":51,"sizeBytes":102,"sourceHtmlUrl":103},"assets\u002Ftemplates\u002Fdivider.svg",1246,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fassets\u002Ftemplates\u002Fdivider.svg",{"path":105,"resourceType":50,"resourceTypeDesc":51,"sizeBytes":106,"sourceHtmlUrl":107},"assets\u002Ftemplates\u002Fflow-long.svg",7858,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fassets\u002Ftemplates\u002Fflow-long.svg",{"path":109,"resourceType":50,"resourceTypeDesc":51,"sizeBytes":110,"sourceHtmlUrl":111},"assets\u002Ftemplates\u002Fflow-short.svg",6703,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fassets\u002Ftemplates\u002Fflow-short.svg",{"path":113,"resourceType":50,"resourceTypeDesc":51,"sizeBytes":114,"sourceHtmlUrl":115},"assets\u002Ftemplates\u002Fflow.svg",7835,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fassets\u002Ftemplates\u002Fflow.svg",{"path":117,"resourceType":50,"resourceTypeDesc":51,"sizeBytes":118,"sourceHtmlUrl":119},"assets\u002Ftemplates\u002Fheading.svg",1969,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fassets\u002Ftemplates\u002Fheading.svg",{"path":121,"resourceType":50,"resourceTypeDesc":51,"sizeBytes":122,"sourceHtmlUrl":123},"assets\u002Ftemplates\u002Fhero-light.svg",8321,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fassets\u002Ftemplates\u002Fhero-light.svg",{"path":125,"resourceType":50,"resourceTypeDesc":51,"sizeBytes":126,"sourceHtmlUrl":127},"assets\u002Ftemplates\u002Fhero.svg",8418,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fassets\u002Ftemplates\u002Fhero.svg",{"path":129,"resourceType":50,"resourceTypeDesc":51,"sizeBytes":130,"sourceHtmlUrl":131},"assets\u002Ftemplates\u002Floader.svg",1179,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fassets\u002Ftemplates\u002Floader.svg",{"path":133,"resourceType":50,"resourceTypeDesc":51,"sizeBytes":134,"sourceHtmlUrl":135},"assets\u002Ftemplates\u002Flogos.svg",5733,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fassets\u002Ftemplates\u002Flogos.svg",{"path":137,"resourceType":50,"resourceTypeDesc":51,"sizeBytes":138,"sourceHtmlUrl":139},"assets\u002Ftemplates\u002Fmarquee-ambient.svg",16008,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fassets\u002Ftemplates\u002Fmarquee-ambient.svg",{"path":141,"resourceType":50,"resourceTypeDesc":51,"sizeBytes":142,"sourceHtmlUrl":143},"assets\u002Ftemplates\u002Fmarquee.svg",7214,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fassets\u002Ftemplates\u002Fmarquee.svg",{"path":145,"resourceType":50,"resourceTypeDesc":51,"sizeBytes":146,"sourceHtmlUrl":147},"assets\u002Ftemplates\u002Fquote.svg",3964,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fassets\u002Ftemplates\u002Fquote.svg",{"path":149,"resourceType":50,"resourceTypeDesc":51,"sizeBytes":150,"sourceHtmlUrl":151},"assets\u002Ftemplates\u002Fradar.svg",5686,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fassets\u002Ftemplates\u002Fradar.svg",{"path":153,"resourceType":50,"resourceTypeDesc":51,"sizeBytes":154,"sourceHtmlUrl":155},"assets\u002Ftemplates\u002Fring.svg",3366,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fassets\u002Ftemplates\u002Fring.svg",{"path":157,"resourceType":50,"resourceTypeDesc":51,"sizeBytes":158,"sourceHtmlUrl":159},"assets\u002Ftemplates\u002Fskyline.svg",26314,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fassets\u002Ftemplates\u002Fskyline.svg",{"path":161,"resourceType":50,"resourceTypeDesc":51,"sizeBytes":162,"sourceHtmlUrl":163},"assets\u002Ftemplates\u002Fstats.svg",6577,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fassets\u002Ftemplates\u002Fstats.svg",{"path":165,"resourceType":50,"resourceTypeDesc":51,"sizeBytes":166,"sourceHtmlUrl":167},"assets\u002Ftemplates\u002Fstreak.svg",4951,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fassets\u002Ftemplates\u002Fstreak.svg",{"path":169,"resourceType":50,"resourceTypeDesc":51,"sizeBytes":170,"sourceHtmlUrl":171},"assets\u002Ftemplates\u002Ftiles.svg",3978,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fassets\u002Ftemplates\u002Ftiles.svg",{"path":173,"resourceType":50,"resourceTypeDesc":51,"sizeBytes":174,"sourceHtmlUrl":175},"assets\u002Ftemplates\u002Ftimeline.svg",7026,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fassets\u002Ftemplates\u002Ftimeline.svg",{"path":177,"resourceType":50,"resourceTypeDesc":51,"sizeBytes":178,"sourceHtmlUrl":179},"assets\u002Ftemplates\u002Ftyping.svg",5660,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fassets\u002Ftemplates\u002Ftyping.svg",{"path":181,"resourceType":182,"resourceTypeDesc":183,"sizeBytes":184,"sourceHtmlUrl":185},"references\u002Faccessibility.md","REFERENCE","参考文档",5571,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Freferences\u002Faccessibility.md",{"path":187,"resourceType":182,"resourceTypeDesc":183,"sizeBytes":188,"sourceHtmlUrl":189},"references\u002Fdesign.md",10360,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Freferences\u002Fdesign.md",{"path":191,"resourceType":182,"resourceTypeDesc":183,"sizeBytes":192,"sourceHtmlUrl":193},"references\u002Fgithub-readme.md",13370,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Freferences\u002Fgithub-readme.md",{"path":195,"resourceType":182,"resourceTypeDesc":183,"sizeBytes":196,"sourceHtmlUrl":197},"references\u002Fgotchas.md",9855,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Freferences\u002Fgotchas.md",{"path":199,"resourceType":182,"resourceTypeDesc":183,"sizeBytes":200,"sourceHtmlUrl":201},"references\u002Fisometric.md",9115,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Freferences\u002Fisometric.md",{"path":203,"resourceType":182,"resourceTypeDesc":183,"sizeBytes":204,"sourceHtmlUrl":205},"references\u002Fkinds.md",14426,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Freferences\u002Fkinds.md",{"path":207,"resourceType":182,"resourceTypeDesc":183,"sizeBytes":208,"sourceHtmlUrl":209},"references\u002Foptimize.md",7943,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Freferences\u002Foptimize.md",{"path":211,"resourceType":182,"resourceTypeDesc":183,"sizeBytes":212,"sourceHtmlUrl":213},"references\u002Fsmil-and-css.md",21917,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Freferences\u002Fsmil-and-css.md",{"path":215,"resourceType":182,"resourceTypeDesc":183,"sizeBytes":216,"sourceHtmlUrl":217},"references\u002Fthemes-and-sizes.md",5762,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Freferences\u002Fthemes-and-sizes.md",{"path":219,"resourceType":182,"resourceTypeDesc":183,"sizeBytes":220,"sourceHtmlUrl":221},"references\u002Ftiming.md",10324,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Freferences\u002Ftiming.md",{"path":223,"resourceType":182,"resourceTypeDesc":183,"sizeBytes":224,"sourceHtmlUrl":225},"references\u002Fwhere-it-runs.md",5117,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Freferences\u002Fwhere-it-runs.md",{"path":227,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":228,"sourceHtmlUrl":229},"scripts\u002Fforge.py",299927,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fscripts\u002Fforge.py",{"path":231,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":232,"sourceHtmlUrl":233},"scripts\u002Fframes.py",26261,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fscripts\u002Fframes.py",{"path":235,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":236,"sourceHtmlUrl":237},"scripts\u002Foptimize_svg.py",26229,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fscripts\u002Foptimize_svg.py",{"path":239,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":240,"sourceHtmlUrl":241},"scripts\u002Fpack.py",16565,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fscripts\u002Fpack.py",{"path":243,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":244,"sourceHtmlUrl":245},"scripts\u002Fsizes.py",11153,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fscripts\u002Fsizes.py",{"path":247,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":248,"sourceHtmlUrl":249},"scripts\u002Fthemes.py",30770,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fscripts\u002Fthemes.py",{"path":251,"resourceType":68,"resourceTypeDesc":69,"sizeBytes":252,"sourceHtmlUrl":253},"scripts\u002Fvalidate_svg.py",65585,"https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fanimated-svg\u002Fscripts\u002Fvalidate_svg.py",[255,262],{"skillNo":256,"name":257,"nameZh":6,"description":258,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":259,"categories":260,"keywords":261,"publishedAt":19},"01M7EFXACZX1KQPE4GBGJA2Y3P","svg-audit","Audits an existing SVG file or animated React scene and returns ranked findings with fixes: render-target safety (GitHub README image proxy, browsers), accessibility, motion quality, file weight and code hygiene. Runs the bundled validator, then reviews what a linter cannot see. Use when the user says \"audit this SVG\", \"why doesn't my SVG animate on GitHub\", \"check this README card\", \"is this SVG accessible\", \"review my animation\", \"shrink this SVG\", or runs \u002Fsvg-audit [file]. Reports first; only edits files when the user asks for the fixes.","https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fsvg-audit\u002FSKILL.md",[],[],{"skillNo":263,"name":264,"nameZh":6,"description":265,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":266,"categories":267,"keywords":268,"publishedAt":19},"01M7EFX2T5020KGQWMG0KWEBT9","motion-scene","Designs and builds animated React and Motion (motion\u002Freact) scenes for web apps, such as project cover art, service card illustrations, hero art and architecture or mechanism diagrams that show what a thing actually does. Works in three modes, research (read the subject into a storyboard brief), build (implement it with a copy-in TypeScript kit) and verify (browser checks and gates). Use when the user asks for an \"animated illustration\", \"cover scene\", \"hero animation\", \"diagram animation in React\", \"Motion animation for a card\", an animated project or service card, a looping mechanism scene, or runs \u002Fmotion-scene [research|build|verify]. Standalone .svg files go to animated-svg; reviews of existing art go to svg-audit.","https:\u002F\u002Fgithub.com\u002FSagargupta16\u002Fsvg-forge\u002Fblob\u002Fmain\u002Fskills\u002Fmotion-scene\u002FSKILL.md",[],[]]