ChanMeng666
UserA composable SVG animation system driven by Claude Code. Describe an animation in natural language; get a production-ready .svg file. 25 motion/shape/filter primitives, 4 skills, 3 subagents, snapshot-tested, Next.js preview.
Categories
Indexed Skills (6)
svg-verify
Visually verify a rendered SVG animation by opening it in chrome-devtools MCP, capturing keyframes, and scoring against the 5-point quality rubric. Invoke this immediately after `/svg-animate` writes an output, or whenever the user asks "is this animation good?", "how does it look?", "verify the motion", or "check the SVG visually". Always run before declaring an animation complete. Returns a ≤100-word verdict and never leaks screenshots into the calling thread.
svg-add-primitive
Add a new reusable motion / shape / filter primitive to lib/primitives/ with safety: JSDoc + sensible defaults + at least one consuming preset + passing snapshot tests + updated docs/lib-api.md + CLAUDE.md index. Use this only when /svg-animate has flagged a missing capability or when the user explicitly asks to "add a primitive", "extend the lib", "teach the system to <verb>", or "I need a new <motion / filter / shape> for ...". This is the only sanctioned path for growing lib/primitives/; do not edit those files directly.
svg-animate
Create, edit, or remix an animated SVG file from a natural-language description. Use this whenever the user asks you to make, build, design, generate, animate, or "draw something that moves" — mascots, logos, loaders, badges, icons, characters, brand marks, or any visual asset that should animate. Always prefer this skill over hand-writing SVG strings. Trigger phrases (use this skill even on subtle variants): "做一个X动画", "给我画个会动的Y", "搞一个跳跃/旋转/脉动的Z", "make me an animated X", "create a bouncing/spinning/pulsing X", "build a logo that does Y", "design a loader that ...", "I need an SVG mascot for ...". Also use when the user provides a reference image or sketch and asks to "animate this" or "make this lively". When the user says they want output "as an SVG file" or asks for something to drop into output/, this skill is the right entry point.
svg-export
Finalize a rendered SVG for production: run SVGO optimization, add accessibility metadata (<title>, <desc>), verify viewBox sanity, and copy to a user-specified destination. Use when the user says "ship it", "optimize and export", "make it production-ready", "minify this SVG", "copy the final SVG to <path>", "export <slug> for the website", or asks for the byte-size after optimization. Always run after /svg-animate produces a passing verdict and before the SVG is committed or shared.
typst
Generate professional PDF documents using the Typst typesetting system. Use when the user asks to create a PDF, write a document, generate a report, typeset a paper, build a presentation, or make a resume / CV / cover letter / letter / invoice / thesis / handout / poster — even when they do not say "Typst" explicitly. Especially trigger when the user mentions one-page CV, two-column resume, academic paper with bibliography, or any CJK (Chinese / Japanese / Korean) document.
linkedin-post
Use when Chan Meng wants to write an English LinkedIn post for personal-brand marketing — either an "idea" post (sharing a framework/opinion) or a post-event "recap" (reflecting on an offline tech meetup, mentioning speakers/organizers/companies to grow her network). Drafts on-brand copy with emoji + hashtags, generates a Caldera-branded visual (Mermaid diagram, OpenAI image, or HTML card), and drafts it into the LinkedIn composer via claude-in-chrome for review — never auto-posts.
Bio shown is the top-scored skill's repo description as a fallback — real GitHub bios land in a future update.