Two Agent Skills — about 11,800 words of method — that give Claude the working process of a web studio: plan before designing, be specific instead of generic, and animate only where motion does a job. Install once, commit to the repo, and every future session inherits it.
In your project directory:
$ npx cg-web-skills install --all
✔ Installed cg-web-animate to .claude/skills/cg-web-animate
✔ Installed cg-web-designer to .claude/skills/cg-web-designer
Requires Node.js 20 or later and Claude Code.
You are installing instructions into a directory Claude reads. That deserves a straight answer before anything else.
They are independent — install one or both. When both are present, cg-web-designer leads the project and treats motion as part of the design direction, while cg-web-animate supplies the motion craft. You never have to call them by name.
cg-web-designerLead web designer, UX and content strategist, frontend quality lead
It treats every request as a small studio engagement instead of jumping straight to a homepage. The result is a website that was decided, not generated.
5,832 words of method
cg-web-animateSenior design engineer and motion designer
Its job is explicitly not to add animation everywhere. It is to make motion that carries meaning — and to leave the rest still.
5,952 words of method
Because a prompt is personal, unversioned and easy to forget. This is the honest comparison, not a straw man.
| Why not just keep a good prompt? | Prompt | Skill |
|---|---|---|
| Where it lives | A note, a gist, your clipboard | A folder in the repo, committed and reviewed like code |
| Who has it | You, when you remember to paste it | Everyone who clones the project, in every session |
| Cost when unused | Tokens in every conversation you paste it into | None — Claude loads a skill only when the task matches its description |
| Updates | Manual, and your copy silently drifts | npx cg-web-skills@latest update --all, with local edits protected |
Agent Skills are folders of instructions Claude loads on demand. Each has a SKILL.md whose description tells Claude when it is relevant. When your request matches, Claude reads it and follows it. When it does not, the skill stays out of the way.
This website was planned and built with the two skills it documents. The process ran in order: discovery, strategy, information architecture, design direction, then code. Those artefacts are committed in the docs/ folder of this repository — including the design direction that explains why this page has no gradients, no rounded corners, no stock photography, and colour only inside terminal output.
The package was published on 24 September 2026. There are no download counts, testimonials, or customer logos on this page because there are none to show yet. The skills forbid inventing them, so the site does not.
$ npx cg-web-skills install --all
Then open Claude Code in the same project and describe what you want — for example, “Plan and build a website for my physiotherapy practice.”