跪拜 Guibai
← All articles
Claude · ChatGPT · Agent

Reusable Claude Skills: A Miniature Nanjing Animation Turns Prompts Into a Repeatable Pipeline

By jerrywus ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Skills earn their place when a task gets repeated. This animation pipeline shows how bundling prompts, reference rules, approval gates, and verification scripts turns a one-off chat into a reusable workflow, and how to evaluate a skill's quality with test tasks rather than by admiring its directory structure.

Summary

A Claude Skill named memphis-mini-world produced a 20-second, 1080×1080, 60fps miniature animation of Nanjing's Xinjiekou district. SKILL.md inside it is still a prompt for the model; the usable part is a directory that saves how reference photos and style screenshots get interpreted, when to stop and show four preview frames, and which scripts can be reused. The next animation on a different theme can call the same skill instead of fishing the right instructions out of chat history.

The workflow leans on progressive disclosure. The model sees the skill's name and description, reads SKILL.md when the task matches, then loads style guides, canvas runtime rules, and production checklists only at the step that needs them. A four-frame preview at 1.8, 6.1, 10.7, and 17.6 seconds gates full rendering until explicit approval, and deterministic frame(i) lets any frame be recomputed and compared via RGBA checksums.

A companion tool called skill-designer structures content and offers patterns like Pipeline, Generator, and Reviewer; Anthropic's official skill-creator adds test tasks, pass-rate summaries, and trigger-test tooling. This project used skill-designer and skipped the official harness. The skill grew through iterations: buildings over-detailed into low-poly models, a statue looked eerie, a car ignored a pedestrian, and an opening sequence ended before the first preview frame. Final v1.1.0 separates approval, visual, sound, and production steps and passes 20 Python and 10 Node tests, but no new city has yet run an end-to-end Chrome render.

Takeaways
— The animation is 20 seconds, 1080×1080, 60fps, with a coral-red car passing Sun Yat-sen statue.
— Four preview frames at 1.8, 6.1, 10.7, and 17.6 seconds gate full render until explicit approval.
— Deterministic frame(i) allows frame recomputation and RGBA checksum comparison.
— The skill directory includes SKILL.md, references/, assets/, and scripts/.
— Progressive disclosure: the model reads the skill entry, then step-specific docs.
— skill-designer uses five patterns: tool/framework specs, template generation, checklist review, ask-then-act, and step execution.
— Anthropic's skill-creator provides test tasks, pass-rate summaries, trigger tests, and optimization tools.
— The skill passed 20 Python and 10 Node tests covering approval, path restrictions, breakpoint verification, and collision counterexamples.
— Final v1.1.0 separates approval, visual, sound, and production steps.
— A new theme requires new preview approval; the Xinjiekou approval does not carry over.
Conclusions

Renaming a file does not change model behavior; the value of a Skill is packaging decision rules and reusable tools.

Progressive disclosure is a practical pattern for controlling how much context the model loads at each step, separate from pipeline step ordering.

Judging a Skill's quality requires running comparative test tasks, not counting lines in SKILL.md.

AI's tendency to add excessive detail needed manual pruning; the same design judgment applies to prompting as to art direction.

Verification scripts can enforce approval gates that natural language alone cannot guarantee.

Concepts & terms
Progressive disclosure
In Claude Skills, the model reads a skill's name and description, then SKILL.md, and only loads detailed reference files and scripts when a specific step needs them. This keeps context small and avoids forcing the model to infer reading order.
Deterministic frame(i)
A rendering function where the frame number fully determines the image, so computing frame 300 twice yields identical RGBA values. This allows frame-level checks, resumable exports, and pixel fingerprint comparisons.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗