メニュー
Guides and automated instructions for migrating from Puppeteer, Playwright, or node-html-to-image to Takumi.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Guidelines, syntax, templates, API usage, and styling best practices for rendering static/animated images and vector SVG using Takumi.
Guides and automated instructions for migrating from Vercel's Satori, next/og, or @vercel/og to Takumi.
| name | migrate-from-puppeteer |
| description | Guides and automated instructions for migrating from Puppeteer, Playwright, or node-html-to-image to Takumi. |
Replace resource-heavy headless browser screenshots with native Takumi rendering.
Before (Puppeteer):
import puppeteer from "puppeteer";
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setViewport({ width: 1200, height: 630 });
await page.setContent(`<html><body><h1>Hello</h1></body></html>`);
const buffer = await page.screenshot({ type: "png" });
await browser.close();
After (Takumi):
import { render } from "takumi-js";
const buffer = await render(
<div tw="w-full h-full flex items-center justify-center bg-black text-white">
<h1 tw="text-6xl font-bold">Hello</h1>
</div>,
{ width: 1200, height: 630 }
);
Before: Capturing multiple page frames in a loop and encoding manually. After:
import { renderAnimation } from "takumi-js";
const buffer = await renderAnimation({
width: 400,
height: 400,
fps: 30,
format: "webp",
scenes: [
{
durationMs: 1000,
node: <div tw="animate-spin bg-blue-500 w-32 h-32" />,
},
],
});
<script> blocks. Fetch data first, then render layout tree with static state.RenderOptions instead of relying on default OS font lookups.