Motion Reel — Development skill for Claude Code
Agent skill for motion-designer-grade websites and code-rendered videos: kinetic type, full-bleed color cuts, riso WebGL2 shaders.
How to install Motion Reel
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open benjatestaferri7/motion-reel and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
What Motion Reel does
Agent skill for motion-designer-grade websites and code-rendered videos: kinetic type, full-bleed color cuts, riso WebGL2 shaders. Any brand, any palette.
Alternatives in Development
- Beautiful Feishu Whiteboard — 35 curated colour palette styles for building beautiful, editable Feishu / Lark (飞书) whiteboards 687 ★
- Skill.Color Expert — Agent skill for color science expertise 426 ★
- Caveman Claude Skill — Ultra-compressed communication mode for Claude 396 ★
README
motion-reel
An agent skill that builds **spectacular, motion-designer-grade websites and code-rendered videos**: hard cuts between full-bleed color fields, ultra-heavy kinetic type, HUD corners, particles, shape morphs, and 3D riso-print shaders. Every motion is timed to a beat. It works with any brand and palette.
[Leer en español](README.es.md)
Quick path
- Install the skill:
git clone https://github.com/benjatestaferri7/motion-reel ~/.claude/skills/motion-reel - Open any project in Claude Code and ask:
Use motion-reel to redesign this landing page.
- Answer two questions, one at a time:
- Style: Swiss Kinetic, Riso Shader, Hybrid, or Surprise me.
- Palette: your brand color, a preset, or Surprise me.
- The agent builds the result, then checks it with headless screenshots or a video contact sheet before reporting back.
To use it in a single project only, clone it into `/.claude/skills/motion-reel` instead.
One-prompt setup (no manual install)
Paste this into Claude Code, replacing the path with your site's folder:
Clone https://github.com/benjatestaferri7/motion-reel into ~/.claude/skills/motion-reel,
then use the motion-reel skill to redesign the website in ./my-site
**How it works:** Claude Code does not load skills straight from a URL. This prompt asks Claude to install the skill first and then follow it, so it behaves exactly like a manual install.
What happens next, every time:
- Claude reads your site's files.
- It asks for the style: Swiss Kinetic, Riso Shader, Hybrid, or Surprise me.
- It asks for the palette: brand color, a preset, or Surprise me. With Surprise me it infers your industry and tone from your README, copy, and CSS, picks a palette, tells you why, and offers one re-roll.
- It builds the result, checks it with headless screenshots, and reports anything it could not verify.
No code is written until both questions are answered.
Pointing
Related Skills
Procedural Landscapes Threejs
Generate procedural 3D landscapes and terrain in Three.js using WebGPU compute shaders with automatic WebGL2 f
Indigo Riso Poster Skill
Claude Code / Codex skill: turn a theme word into an indigo-and-cream duotone riso-print poster. Halftone dots
Verify Render
Download a rendered Poppify reel, run ffprobe + frame extract, surface a verdict on whether the render matches
Color Specialist
Use when colour is failing. Contrast below AA, a palette with no system behind it, dark mode that is only inve
Birch
A beaver that cuts your talking videos into reels. Runs on your Mac, plans with your own Claude.
Hueshift
A color palette tool paired with an MCP server. Users can generate modern (OKLCH-based) palettes from a refere
Related Agents
Fe Design Expert
Use for design system review, typography audit, color palette evaluation, motion design, and AI-generated desi
Aesthetic Definer
Help users define their own color palette and visual aesthetic for branding and image creation. Use when user
Palette Curator
Resolves and validates the infographic Story House, semantic color roles, brand fit, restrained creative chara