A catalog course for the 16 skills that turn Claude Code into a product studio: build interfaces, apply visual identity, animate, put video on the page, generate diagrams, test in the browser, and research competitors. Each skill analyzed: what it does, when to use it, how it improves your pages, and ready-to-use prompts.
The 4 skill groups coming together in a better page — illustrative diagram
Each track groups skills by job to be done. Pick what your page needs.
Generate and redesign high-quality UI: frontend-design, impeccable, web-artifacts-builder and design-designer.
4 skills →Consistent look & feel: theme-factory, brand-guidelines, canvas-design, and algorithmic-art for backgrounds and assets.
4 skills →Movement and video on the page: animation-designer, 3d-animation-creator, remotion, seedance + HyperFrames/FFmpeg.
4 modules →Page support: beautiful-mermaid, excalidraw, agent-browser (Playwright) and website-intelligence.
4 skills →Does your page need to take shape, develop an identity, come to life, or be tested? There’s a path for each kind of work.
Each module analyzes one skill: what it does, when it activates, how it improves the page, and where it stops.
Each analysis includes ready-to-use prompts to activate the skill in Claude Code and combine it with others.