Skip to content
ExamsLibraryFor agentsConnect your agent
commandsCommands·12/15

/design-engineering svg

Raw markdown On GitHub

Taught in

title: cmd-svg summary: "/design-engineering svg [create | animate | sticker] [target]" — author or clean an SVG on the token system, animate one with the engine its home allows, or turn frames or a clip into one editable animated SVG. tags: [command, svg, build]

The second word picks the job. Without one, create applies to a new or messy file and animate to a clean file the user wants moving.

svg create

  1. Read svg-creation and icon-systems, plus svg-animation if the asset will move. Read gotchas and pov, and take colours, stroke weight and the icon set from the project's contract.
  2. Draw on a whole-number grid with named groups, currentColor or var(--token, #fallback) colours, and <defs> / <symbol> for repeats; or refactor the given file into that shape.
  3. Run SVGO with viewBox, animated ids and <title> / <desc> preserved, then diff the render.
  4. Return the file, its size before → after, and a review-format table for a refactor.

svg animate

  1. Decide whether it should move at all (animation-decision-framework). If the file has unnamed groups or no viewBox, run create first.
  2. Read svg-animation, plus svg-path-morphing for shape changes, or video-to-vector-pipeline for frames or a clip.
  3. Pick the engine for where the file lives: inline CSS / WAAPI; the project's motion library; embedded keyframes or SMIL when it is used as an <img>; or node scripts/svg-flipbook.mjs for frames. Take values from easing-curves and duration-table, and add the reduced-motion path.
  4. Return the motion plan (trigger, engine, groups, values, reduced motion, size) and the file.

svg sticker

An animated isometric sticker → isometric-stickers; with fun-isometric installed → fun-isometric-reconciliation.

You may delegate to the svg-creator or svg-animator subagent where the host has them.