Use this skill whenever a user wants to animate a logo or icon for the web — output targets are HTML + CSS and React components. Triggers include: "animate my logo", "make my SVG animate", "logo reveal animation", "stroke animation", "draw-in effect", "loop my logo", "spinning logo", "logo for landing page", "animated favicon", "logo intro animation", or any request combining a logo file (SVG or PNG) with words like animation, motion, loop, reveal, transition, or effect. Also trigger when the user pastes raw SVG path data and asks for something that moves. Input can be an SVG file OR a PNG/raster image — the skill handles both. Use this skill even if the user only mentions one output target (HTML or React).
2026-05-04