skill CX Codex

light-spotlight-render — Claude Code skill for HTML animation

Q: How do I install light-spotlight-render in Claude Code?

Run `npx skills add vibe-motion/skills --skill light-spotlight-render -a claude-code`. The skill file is available at `~/.claude/skills/light-spotlight-render/SKILL.md`.

Create a standalone HTML animation that reveals text with a swinging spotlight. Adjust the effect’s text, motion, lamp size, glow, and colors.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓

npx skills add vibe-motion/skills --skill light-spotlight-render -a claude-code

Open on GitHub

What light-spotlight-render does

The skill builds an HTML animation from assets/light_spotlight_template.html. Its scripts/render_light_spotlight.py script inserts sanitized settings for the label, swing angle and cycle, lamp scale, glow, colors, and video dimensions. You can choose an output path; otherwise, the filename is based on the label.

The lamp scales from its top vertex, so its light grows from the tip rather than the swing axis. Set the background to transparent for a transparent canvas. Python 3 is needed to run the script. The result is an HTML file, not a video; video output takes a separate tool or browser capture.

What it helps with

build a text reveal with a swinging spotlight
adjust the spotlight’s swing and lamp scale
set the glow and animation colors
save the effect as a standalone HTML file

Example prompts for the agent

Create an HTML animation that reveals “vibe-motion” with a spotlight.
Set the background to transparent and change the glow.
Generate a spotlight logo reveal and save it as out/logo.html.

How to install light-spotlight-render

1Skills CLI (Vercel)

npx skills add vibe-motion/skills --skill light-spotlight-render -a claude-code

2Manually: put the files in place

~/.claude/skills/light-spotlight-render/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/light-spotlight-render/

1Skills CLI (Vercel)

npx skills add vibe-motion/skills --skill light-spotlight-render -a codex

2Manually: put the files in place

.agents/skills/light-spotlight-render/SKILL.md

For all projects use ~/.agents/skills/

1Skills CLI (Vercel)

npx skills add vibe-motion/skills --skill light-spotlight-render -a cursor

2Manually: put the files in place

.cursor/skills/light-spotlight-render/SKILL.md

Cursor also reads .agents/skills/ and .claude/skills/

1GitHub CLI

gh skill install vibe-motion/skills light-spotlight-render

2Manually: put the files in place

.github/skills/light-spotlight-render/SKILL.md

1Skills CLI (Vercel)

npx skills add vibe-motion/skills --skill light-spotlight-render -a gemini-cli

2Platform CLI

gemini skills install https://github.com/vibe-motion/skills --path light-spotlight-render

Manually: put the files in place

.devin/skills/light-spotlight-render/SKILL.md

The legacy .windsurf/skills/ path still works

Skills CLI (Vercel)

npx skills add vibe-motion/skills --skill light-spotlight-render -a opencode

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about light-spotlight-render

How do I install light-spotlight-render in Claude Code?

Run npx skills add vibe-motion/skills --skill light-spotlight-render -a claude-code. The skill file is available at ~/.claude/skills/light-spotlight-render/SKILL.md.

What does light-spotlight-render do?

It creates a standalone HTML animation that reveals supplied text with a swinging spotlight. Open the generated file in a browser to preview it.

Can light-spotlight-render generate a video?

It produces an HTML animation. To get video, use another tool or capture the animation in a browser.

Similar skills

Everything for Design →

frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. 1,025,790installs grill-me Matt Pocock grill-me interviews you about a plan or design to expose gaps and sharpen decisions. Use it before implementation starts. 1,424,476installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. CX Codex +1 678,700installs prototype Matt Pocock Creates throwaway prototypes for checking state logic or exploring UI before committing the decision to the main codebase. 986,201installs grilling Matt Pocock Stress-test a plan, decision, or idea through structured rounds of questions. Use it when you need to expose assumptions before acting. 979,543installs codebase-design Matt Pocock This skill helps design modules with small interfaces and hidden complexity. Use it when refactoring code, choosing a seam, or making tests easier to write. 850,344installs

From the same set7

claude-typer Renders a clip where a line of text types itself out in a Claude-style window, then returns the path to the .mov it wrote. CX Codex +1 1,100installs procedural-fish-render Clones or updates the procedural-fish repository and exports procedural fish animation to a video file via Remotion. CX Codex +1 1,000installs ruler-progress-render Clones ruler-progress-animator and renders a ruler progress animation video using Remotion presets. Helps generate transparent motion assets directly from the terminal. CX Codex +1 958installs remotion-3d-ticker Builds looping 3D column scroll effects for Remotion videos. Useful for multi-lane photo feeds, credits, and parallax showcases. CX Codex +1 852installs wechat-2d-render Pulls the wechat-2d project and renders its WeChat-style 2D chat animation with Remotion. Useful when you need a clip to drop into an edit. CX Codex +1 817installs threejs-earth-render Clones the Three.js Earth repo, renders a globe route animation with Puppeteer frame capture, and writes a GIF or MP4. CX Codex +1 653installs