web-renderer-test
Add explicitly requested web renderer tests or update existing ones for implementation changes.
- Installs
- 2.8K
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/remotion-dev/remotion --skill web-renderer-test- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads web-renderer-test automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Use this skill to update existing web renderer tests when needed for implementation changes. Add new tests only when the user explicitly requests them.
The web renderer is in packages/web-renderer and the test suite is in packages/web-renderer/src/test.
It uses visual snapshot testing using vitest. A test file can for example be executed using:
bunx vitest src/test/video.test.tsx
Example
Each test is powered by a fixture in packages/web-renderer/src/test/fixtures.
A fixture looks like this for example:
import {AbsoluteFill} from 'remotion';
const Component: React.FC = () => {
return (
<AbsoluteFill
style={{
justifyContent: 'center',
alignItems: 'center',
}}
>
<div
style={{
backgroundColor: 'red',
width: 100,
height: 100,
borderRadius: 20,
}}
/>
</AbsoluteFill>
);
};
export const backgroundColor = {
component: Component,
id: 'background-color',
width: 200,
height: 200,
fps: 25,
durationInFrames: 1,
} as const;
The corresponding test looks like this:
import {test} from 'vitest';
import {renderStillOnWeb} from '../render-still-on-web';
import {backgroundColor} from './fixtures/background-color';
import {testImage} from './utils';
test('should render background-color', async () => {
const blob = await renderStillOnWeb({
licenseKey: 'free-license',
composition: backgroundColor,
frame: 0,
inputProps: {},
imageFormat: 'png',
});
await testImage({blob, testId: 'background-color'});
});
Adding a new test
- Add a new fixture in
packages/web-renderer/src/test/fixtures. - Important: Add the fixture to
packages/web-renderer/src/test/Root.tsxto add a way to preview it. - Add a new test in
packages/web-renderer/src/test. - Run
bunx vitest src/test/video.test.tsxto execute the test. - Important: Update
packages/docs/docs/client-side-rendering/limitations.mdxto reflect the newly supported property.
FAQ
What does the web-renderer-test skill do?
Add explicitly requested web renderer tests or update existing ones for implementation changes.
How do I install web-renderer-test?
Run npx skills add https://github.com/remotion-dev/remotion --skill web-renderer-test in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/web-renderer-test/ (personal) or .claude/skills/web-renderer-test/ (project).
Which AI agents can use web-renderer-test?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is web-renderer-test safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains web-renderer-test?
It is published by remotion-dev in remotion-dev/remotion, and it is an official skill from the maker of the technology it covers. It has 2,760 recorded installs.
More from remotion-dev/remotion
writing-docs
remotion-dev/remotion
Guides for writing and editing Remotion documentation. Use when adding docs pages, editing MDX files in packages/docs, or writing documentation content.
video-report
remotion-dev/remotion
Generate a report about a video
add-sfx
remotion-dev/remotion
Add a new sound effect to @remotion/sfx
docs-demo
remotion-dev/remotion
Add an interactive demo to the Remotion documentation. Use when creating a new component for docs pages.
add-expert
remotion-dev/remotion
Add a new expert to the Remotion experts page
make-pr
remotion-dev/remotion
Open a pull request for the current feature
Popular testing & qa skills
tdd
mattpocock/skills
Test-driven development. Use when the user wants to build features or fix bugs test-first, mentions "red-green-refactor", or wants integration tests.
grilling
mattpocock/skills
Grill the user relentlessly about a plan, decision, or idea. Use when the user wants to stress-test their thinking, or uses any 'grill' trigger phrases.
migrate-to-shoehorn
mattpocock/skills
Migrate test files from as type assertions to @total-typescript/shoehorn. Use when user mentions shoehorn, wants to replace as in tests, or needs partial test data.
run-train
lllllllama/rigorpilot-skills
Rigor Train skill for deep learning research repositories. Use when a documented or selected training command should be run conservatively for startup verification, short-run verification, full kickoff, or resume, with command, config, seed, log, checkpoint, status, and metric evidence written to standardized trainoutputs/. Do not use for environment setup, exploratory sweeps, speculative idea implementation, or end-to-end orchestration.
test-driven-development
obra/superpowers
Use when implementing any feature or bugfix, before writing implementation code
finishing-a-development-branch
obra/superpowers
Use when implementation is complete, all tests pass, and you need to decide how to integrate the work