Takumi

Use this skill when work touches Takumi / takumi-js: rendering JSX, HTML, or node trees to PNG/JPEG/WebP/ICO/SVG/animations without Chromium; ImageResponse OG routes; fonts/images/emoji; Tailwind tw vs full stylesheets; or migrating from next/og / Satori.

Workflow

1. Inspect the local surface before changing code:
   • Packages: takumi-js (preferred all-in-one), optionally @takumi-rs/core, @takumi-rs/wasm, @takumi-rs/helpers.
   • Version: target v2 (current 2.5.x). Treat v1 APIs (loadFonts, fetchedResources, createImageResponse) as legacy.
   • Runtime: Node (native) vs Edge / Cloudflare Workers / browser (WASM). takumi-js auto-picks; pin platform natives for cross-compile deploys.
   • Entry: render / renderSvg / renderAnimation vs ImageResponse from takumi-js/response.
   • Styling path: inline style, built-in tw, <style>, or compiled CSS via stylesheets.
2. Refresh docs when the user asks for latest behavior, the installed major is unclear, or work touches v2 resource options / animation. Start from source-map.md.
3. For install, packages, render / ImageResponse, inputs, and canvas sizing, use setup-core.md.
4. For fonts, images, emoji, tw, and stylesheets, use fonts-images-styling.md.
5. For formats, DPR, SVG, animation, and raw/ffmpeg frames, use formats-animation.md.
6. For Next.js, TanStack Start, Workers, Astro, and other hosts, use frameworks.md.
7. For v2 upgrades, Satori/next/og migration, and troubleshooting, use pitfalls-migration.md.
8. Prefer bun / bunx in command examples. Never copy Fumadocs annotations ([!code --], [!code highlight]) into generated code.