Add a new expert to the Remotion experts page
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
MoizIbnYousaf/marketing-cli322026년 10월 20일 업데이트
무료GitHub에 공개
web-renderer-test
Add a test case to the web renderer
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
설치 방법 보기포함된 파일(1)
- SKILL.md1.9 KB
SKILL.md(원문)
설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
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.
리뷰
아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
댓글
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
같은 저장소의 스킬
add-sfx
무료Add a new sound effect to @remotion/sfx
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
MoizIbnYousaf/marketing-cli322026년 10월 20일 업데이트
Use when setting up a secure email inbox for any AI agent — configuring inbound email via Resend, webhooks, tunneling for local development, and implementing security measures to prevent prompt injection attacks. Also use when someone mentions 'agent email', 'bot inbox', 'receive emails for agent', 'agent webhook', 'email security for AI', 'prompt injection via email', 'inbound email for bot', or wants their AI agent to receive and respond to emails securely.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
MoizIbnYousaf/marketing-cli322026년 10월 20일 업데이트
ai-seo
무료Builds, measures, and improves an Answer Engine Optimization program across ChatGPT, Perplexity, Claude, Gemini, Google AI Overviews, and Copilot. Use for AEO, GEO, LLMO, AI search visibility, AI citations, brand mentions, answer-engine monitoring, llms.txt, AI crawler audits, or questions like 'what does AI say about us?' and 'why are competitors cited instead of us?'. Produces a durable evidence report and prioritized gameplan, not a one-shot content checklist.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
MoizIbnYousaf/marketing-cli322026년 10월 20일 업데이트
Generate Apple App Store screenshot pages as a Next.js app with html-to-image export at required resolutions. Screenshots are advertisements, not documentation — every screenshot sells one idea. Use when building App Store screenshots, generating exportable marketing screenshots for iOS apps, or creating programmatic screenshot generators. Triggers on 'app store screenshots', 'App Store', 'screenshot generator', 'iOS screenshots', 'marketing screenshots', 'phone mockup', 'ASO screenshots', 'app store assets', 'app listing', 'app store page', or 'app preview images'. Also use when someone is about to submit an app and needs store assets, or when they say 'make my app store page look good'. Includes iPhone and iPad mockup components with pre-measured dimensions.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
MoizIbnYousaf/marketing-cli322026년 10월 20일 업데이트
Build detailed buyer personas and audience profiles from research. Use this skill whenever the user mentions audience, buyer persona, ideal customer, target market, ICP, watering holes, 'who am I selling to', customer research, or audience profile. Also use when content feels unfocused or generic (that's an audience problem), when conversion is low because messaging doesn't resonate, when starting any new project (audience should be first), or when any downstream skill needs audience.md but it doesn't exist yet. Even if the user doesn't explicitly ask for audience research, trigger this if they're writing copy or building a landing page without a clear audience defined. Three approaches: Quick Profile, Persona Build, Community Mining.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
MoizIbnYousaf/marketing-cli322026년 10월 20일 업데이트