القائمة
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.