line-art-animation — скилл

---
name: line-art-animation
description: Build animated line-art components in SVG and TypeScript — thin ink lines on paper, people and animals that walk, run, cycle and react, scenes with wind, lit windows and a day/night cycle, exported to video if needed. Use this whenever someone asks for a line art (or ink, pen, doodle, hand-drawn) animation, an animated illustration or scene component, little characters doing everyday things, a living street/village/shop/park, a day-night cycle illustration, "make it like this clip" for a drawn animation, or a video of such a component — even if they never say "SVG" or "line art".
---

# Line-art animation

Animated illustration components: everything is drawn with one thin pen on paper,
built live in SVG from TypeScript, so it stays crisp at any size, responds to the
pointer, and can be stepped frame by frame for checking or video export.

This skill ships a small library (`lib/`), two examples (`examples/walker`, a single
figure in ~150 lines; `examples/village`, a full scene) and tools (`scripts/`).
Read the example that's closest to the request before writing anything.

## Workflow

1. **Pin the look** before anything moves. Read `references/style.md`. Decide the pen
   weight, paper colour, figure proportions and the one or two flat accent colours.
2. **Set up the project.** Copy `lib/` into the project (it's four dependency-free
   `.ts` files) and use Vite + TypeScript (`package.json`, `tsconfig.json` and
   `vite.config.ts` in this repo show the setup). Components are plain DOM/SVG — no framework needed.
3. **Build one figure or one corner first** and show it (screenshot or a short clip,
   next to the reference if there is one). Get a yes before building the rest.