skills.rest
Chau165
Chau165COMMUNITY
Explore all skills by this author →
GitHub

svg-paperjs

Generate SVG and Paper.js support graphics for HyperFrames animation projects.

Updated Jul 22, 2026
Search Tags:#animation#svg#asset generation#vector graphics#hyperframes#procedural geometry#paper.js
One-click install
npx skills add https://github.com/Chau165/local_skill --skill svg-paperjs-chau165
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svg-paperjs
Source: https://github.com/Chau165/local_skill/tree/main/codex/skills/svg-paperjs
Command: npx skills add https://github.com/Chau165/local_skill --skill svg-paperjs-chau165

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires paper.

What problem does it solve? Creating vector support graphics like rails, routes, gauges, and particles for HyperFrames animations requires a disciplined workflow that keeps procedural SVG separate from primary illustrated assets and preserves animation-ready structure. ## Core Features & Use Cases - Support Graphic Generation: Write raw SVG or use Paper.js for inherently graphic layers such as rails, pipelines, routes, gauges, chart lines, particles, masks, and highlights. - Asset Contract Enforcement: Produce lightweight SVG with stable group IDs for independently moving parts and meaningful viewBox values, keeping assets reusable across projects. - Routing Guardrails: Route image-based cartoon, character, and environment requests to illustrated asset workflows instead of substituting primitive geometry placeholders. - Use Case: When building a HyperFrames scene that needs an animated gauge overlay and route line on top of illustrated characters, use this Skill to generate the SVG support layers while the primary visuals come from the approved asset manifest. ## Quick Start Use the svg-paperjs skill to create an SVG route line and gauge overlay with stable group IDs for my HyperFrames scene.

Frequently Asked Questions about svg-paperjs

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create SVG support graphics for HyperFrames animations?▼

Write raw SVG for graphic layers like rails, routes, and gauges, or use Paper.js for procedural path-heavy geometry. Give moving parts stable group IDs and a meaningful viewBox, then save the SVG into the project's assets directory.

When should I use Paper.js instead of raw SVG?▼

Use Paper.js for procedural or path-heavy support geometry where manual path authoring is impractical. Raw SVG is preferred for straightforward graphic elements like routes, gauges, chart lines, and masks.

Can SVG replace illustrated cartoon characters in HyperFrames?▼

No. SVG and Paper.js are subordinate to the illustrated asset manifest in image-based cartoon mode. They may connect or augment primary assets but must not become the visual medium for characters, buildings, vehicles, or environments.

Does Paper.js need to be installed per project?▼

No. Use the shared user-wide motion-toolkit installation and verify it with its npm verify script before first use. Run generation scripts from that toolkit and write only the resulting SVG into the project's assets directory.

Why does my generated SVG fail the world-motion audit?▼

Generated SVG alone is not proof of animation. The composition DOM must expose background, environment, actor, and target as separate world layers animated through the registered seek-safe HyperFrames runtime, and world-motion-audit.mjs must return PASS.

Related Skills

Explore More Design & Creative Skills→
CoRLab-TechCoRLab-Tech

figma-illustration-import

Import Figma vector illustrations into React components with SVG/PNG assets and Storybook stories.

Official
Intermediate
alecs5amalecs5am
118

three

Render deterministic Three.js scenes synchronized to HyperFrames hf-seek events.

Community
Intermediate
getspurgetspur
2

explainer-video-editor

Coordinate end-to-end explainer video production with approval gates and manifest-based validation.

Official
Advanced
aiunlocked1412aiunlocked1412
14

illustrator-pro

Generate AI prompts and vector briefs with style guides and export specs.

Community
Advanced