Agent skill

Code2media

by tsingliuwin in tsingliuwin/autoclaw

Universal media renderer with no fixed template — any custom layout, size or style becomes pixel-perfect images (PNG/JPEG/WebP), vector SVG, paged PDFs or animations (WebP/GIF).

MITAuto-check passedDocuments & Office

Install Code2media

skills CLI
$ npx skills add tsingliuwin/autoclaw --skill code2media -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install tsingliuwin/autoclaw code2media --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/tsingliuwin/autoclaw.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/code2media .claude/skills/code2media && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
code2media
GitHub stars
280
Token cost
~956 tokens
SKILL.md length
136 words
Files
9 (incl. scripts, references)
Skills in repo
3
Repo updated
First seen
Licence
MIT

At a glance

Universal media renderer with no fixed template — any custom layout, size or style becomes pixel-perfect images (PNG/JPEG/WebP), vector SVG, paged PDFs or animations (WebP/GIF).

  • Works in 4 steps: 选起点:优先修改 templates/… → 写出 HTML 片段文件(不需要完整 HTML 文档),数据直接填进模板。 → 运行渲染脚本 → …
  • No dedicated scenario skill fits: 自定义图形/任意尺寸图片/数据图表卡片/一次性版式/长文转PDF/出动图/GIF动画/内容可视化
  • SKILL.md covers 何时使用, 工作流程, 命令速查 and 模板清单(templates/), plus 2 more sections
  • Runs JavaScript scripts from its folder; calls node and npm

What it does

Code2media is an agent skill from tsingliuwin/autoclaw. Universal media renderer with no fixed template — any custom layout, size or style becomes pixel-perfect images (PNG/JPEG/WebP), vector SVG, paged PDFs or animations (WebP/GIF). Use when no dedicated scenario skill fits: 自定义图形/任意尺寸图片/数据图表卡片/一次性版式/长文转PDF/出动图/GIF动画/内容可视化. Do not use for posters or covers (poster-maker) or invoices/quotes/receipts (invoice-maker).

Its SKILL.md is about 960 tokens, which your agent loads only when the skill is triggered. The skill folder holds 11 other files, including scripts and reference files (for example `references/syntax-guide.md` and `scripts/package.json`).

It sits in Documents & Office, covering Forms and invoices, PDF and Design to code. It works with Tailwind CSS. The repository describes itself as: AutoClaw is a hyper-lightweight AI agent designed to live inside Docker containers. Unlike heavy, GUI-dependent agents, AutoClaw is built for headless, massive-scale concurrency. The licence is MIT.

When your agent uses it

  • No dedicated scenario skill fits: 自定义图形/任意尺寸图片/数据图表卡片/一次性版式/长文转PDF/出动图/GIF动画/内容可视化
  • Covers (poster-maker)
  • Invoices/quotes/receipts (invoice-maker)

Example prompts

  • “/code2media”

Requirements

  • Node.js

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  1. 选起点:优先修改 templates/ 里的现成模板(见下方清单);没有合适的再从零写。语法规则必须遵守 @references/syntax-guide.md,最重要的三条
  2. 写出 HTML 片段文件(不需要完整 HTML 文档),数据直接填进模板。
  3. 运行渲染脚本
  4. 校验并交付:确认脚本输出 OK 与文件存在,把输出路径告诉用户。渲染是毫秒级的,改模板重渲染的成本几乎为零——效果不满意就直接改了再跑。

What it can do on your machine

Read from SKILL.md and the folder at commit d9915d7. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 2 files in scripts/ (JavaScript), which the agent can run.

    Shell commands in SKILL.md call:

    • node
    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Code2media loads about 956 tokens when it runs, and up to ~2k if it reads all its reference files. Until then it costs about 94 tokens; SKILL.md has 136 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~94
When it runs · the whole SKILL.md, loaded when a task matches
~956
With references · SKILL.md plus every file in references/, read only if the agent opens them
~2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from tsingliuwin/autoclaw at commit d9915d7, republished under its MIT licence (© tsingliuwin). 136 words, ~956 tokens.

Download SKILL.mdSave it as .claude/skills/code2media/SKILL.md (or your agent's skills folder). This skill also uses 8 other files; get the full folder from GitHub.
name
code2media
description
Universal media renderer with no fixed template — any custom layout, size or style becomes pixel-perfect images (PNG/JPEG/WebP), vector SVG, paged PDFs or animations (WebP/GIF). Use when no dedicated scenario skill fits: 自定义图形/任意尺寸图片/数据图表卡片/一次性版式/长文转PDF/出动图/GIF动画/内容可视化. Do not use for posters or covers (poster-maker) or invoices/quotes/receipts (invoice-maker).
display_name
代码转多媒体
display_name_en
Code to Media
description_zh
通用多媒体渲染:不限模板、尺寸与风格,把内容渲染成精确的图片、矢量 SVG、分页 PDF 和动图。离线渲染,无需浏览器,毫秒级出图,文字排版 100% 精确。
description_en
The universal media renderer — no fixed templates, any layout, size or style, rendered as precise images, vector SVG, paged PDFs and animations. Offline, no…
category
image
version
1.2.2
author
AutoClaw

代码转多媒体

把任意 HTML 变成可直接交付的多媒体:图片、矢量 SVG、分页 PDF、动图。底层是 Takumi 渲染引擎(纯计算,无浏览器、无 AI、无网络依赖),你写什么 HTML,输出就是什么像素——文字、排版、颜色 100% 精确,相同输入永远得到相同输出。

这是通用渲染技能:处理任意自定义图形与文档需求。海报、发票、证书等高频场景有各自独立优化的专属技能,任务精确匹配场景时优先用专属技能;没有匹配场景、或需要完全自定义的产物时,用本技能。

何时使用

  • 用户要自定义/长尾的图形与文档:上面场景技能没覆盖的尺寸、结构、风格,数据驱动的图表卡片,一次性版式
  • 用户要动图:加载动画、动态徽章、社媒动图
  • 任务明确命中高频场景时优先用专属技能(它们有独立的排版规范与质量清单):海报/封面/分享卡 → poster-maker;发票/报价单/收据/采购单 → invoice-maker
  • 不适用:艺术创作、照片类图像(用平台的 AI 生图能力);截图现实网页(用浏览器/截图工具)

工作流程

  1. 选起点:优先修改 templates/ 里的现成模板(见下方清单);没有合适的再从零写。语法规则必须遵守 @references/syntax-guide.md,最重要的三条:
    • Tailwind 工具类写在 tw 属性里(class 属性不编译 Tailwind,只匹配普通 CSS 选择器)
    • 用 Tailwind v4 规范名(渐变是 bg-linear-to-br,不是 v3 的 bg-gradient-to-br)
    • 根元素撑满画布:tw="w-full h-full ..."
  2. 写出 HTML 片段文件(不需要完整 HTML 文档),数据直接填进模板。
  3. 运行渲染脚本:
    bash
    node "<技能目录>/scripts/render.mjs" --html card.html -o card.png --width 1200 --height 630
    首次运行会自动安装 takumi-js / takumi-pdf(一次性,需网络);之后完全离线。
  4. 校验并交付:确认脚本输出 OK 与文件存在,把输出路径告诉用户。渲染是毫秒级的,改模板重渲染的成本几乎为零——效果不满意就直接改了再跑。

命令速查

bash
# 静态图片(png/jpeg/webp),尺寸自定
node scripts/render.mjs --html card.html -o card.png --width 1200 --height 630
# 矢量 SVG
node scripts/render.mjs --html badge.html -o badge.svg --width 560 --height 160
# 分页 PDF(a3/a4/a5/b4/b5/letter/legal/ledger,自动分页,可加页脚/标题/书签)
node scripts/render.mjs --html invoice.html --pdf -o invoice.pdf --size a4 --title "采购订单" \
  --footer '<div style="width:100%;text-align:center;font-size:10px;color:#94a3b8">第 <span class="pageNumber"></span> 页 / 共 <span class="totalPages"></span> 页</div>'
# 动图(CSS @keyframes 按时间采样,输出 webp/gif/apng)
node scripts/render.mjs --html anim.html --animation webp -o anim.webp --width 480 --height 480 --fps 30 --duration 1200
# 附加样式表 / 指定字体 / 跳过字体
node scripts/render.mjs --html card.html -o card.png --css extra.css
node scripts/render.mjs --html card.html -o card.png --font /path/MyFont.ttf
node scripts/render.mjs --html card.html -o card.png --no-fonts   # 纯拉丁文字时更快

JPEG/WebP 可加 --quality 80。PDF 表格加 style="break-inside:avoid" 防止行被劈开,<thead> 会跨页自动重复。

模板清单(templates/)

通用示例模板,展示引擎能力面。海报/封面/OG 图在 poster-maker 技能,发票/报价单在 invoice-maker 技能。

文件用途建议参数
metrics-card.htmlKPI 数据指标卡(1600x900)图片
certificate.html结业证书/奖状(1414x1000,金色边框)图片
weekly-report.html单页 A4 运营周报(KPI + 纯 div 柱状图)--pdf
badge.htmlSVG 徽章/发布标签(560x160)图片(输出 .svg)
animation.html品牌 Logo 脉冲动画(480x480)--animation webp

批量场景

要批量生成(如 200 份证书、按订单出发票)时:写一个循环脚本,读数据(CSV/JSON),把每条数据填进同一份模板后循环调用 render.mjs。单张渲染约几十毫秒,200 份几秒完成;输出确定性意味着同一份数据永远得到同样的文件。

环境要求与故障排查

  • Node.js >= 20.19。
  • 首次运行自动 npm install(安装进 scripts/ 目录),之后离线可用;若目标环境完全断网,需在有网环境预装后再拷贝,或提前执行一次安装。
  • 中文/Emoji 显示为方块(豆腐块):容器缺字体。安装 font-noto-cjk(Alpine)或 fonts-noto-cjk(Debian)后重跑;或用 --font 指定字体文件。详见 @references/syntax-guide.md。
  • Emoji 默认经 Twemoji CDN 在线获取;完全离线的环境让模板保持纯文本。
  • 渲染报错信息以 Error 开头输出在 stderr,按提示修正模板后重试。

© tsingliuwin, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 8 other files (scripts, references) in skills/code2media of tsingliuwin/autoclaw.

  • SKILL.md
  • references/syntax-guide.md
  • scripts/package.json
  • scripts/render.mjs
  • templates/animation.html
  • templates/badge.html
  • templates/certificate.html
  • templates/metrics-card.html
  • templates/weekly-report.html

Open the folder on GitHubat commit d9915d7

Compare with similar skills

Code2media next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Code2media compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Code2media this skilltsingliuwin/autoclaw280—~956Automated safety check: PassMIT
Reportlabjimmc414/Kosmos5941 repos~4.2kAutomated safety check: PassNone
PDF ReadingWide-Moat/open-computer-use1261 repos~2.7kAutomated safety check: PassProprietary
PDF Processing Toolkittelagod/code-abyss244—~532Automated safety check: NotesMIT
Document Converter Suitedkyazzentwatwa/chatgpt-skills112—~386Automated safety check: PassNone
Create PDFtheexperiencecompany/gaia308—~1.4kAutomated safety check: PassCustom licence

Similar skills

  • Reportlab

    jimmc414/Kosmos

    PDF generation toolkit. An agent skill from jimmc414/Kosmos.

    594 GitHub starsUsed in 1 repo~4.2k tokens
    Documents & OfficeAuto-check passed
  • PDF Reading

    Wide-Moat/open-computer-use

    A skill your agent uses when you need to read, inspect, or extract content from PDF files — especially when file content is NOT in your context and you need to read it from disk.

    126 GitHub starsUsed in 1 repo~2.7k tokens
    Documents & OfficeAuto-check passed
  • PDF Processing Toolkit

    telagod/code-abyss

    Picks the right Python library or CLI tool for a PDF task, text and table extraction, merging, splitting, OCR, watermarking or form filling, and points to a matching recipe.

    244 GitHub stars~532 tokensUpdated 2 mo ago
    Documents & OfficeAuto-check: notes
  • Document Converter Suite

    dkyazzentwatwa/chatgpt-skills

    Convert PDFs, Office docs, markdown, HTML, and tables between editable formats.

    112 GitHub stars~386 tokensUpdated 6 mo ago
    Documents & OfficeAuto-check passed
  • Create PDF

    theexperiencecompany/gaia

    Generate a polished, printable PDF — reports, letters, invoices, resumes, one-pagers.

    308 GitHub stars~1.4k tokensUpdated today
    Documents & OfficeAuto-check passed
  • PDF

    davila7/claude-code-templates

    PDF manipulation toolkit. An agent skill from davila7/claude-code-templates.

    32k GitHub starsUsed in 7 repos~2.1k tokens
    Documents & OfficeAuto-check passed

More from tsingliuwin/autoclaw

  • Invoice Maker

    tsingliuwin/autoclaw

    开发票/生成发票/报价单/收据/采购单/对账单/账单/付款通知 — formal business documents as paged PDFs with proper tables, right-aligned amounts, tax lines, repeating headers and page-number footers.

    280 GitHub stars~612 tokensUpdated 1 mo ago
    Auto-check passed
  • Poster Maker

    tsingliuwin/autoclaw

    生成海报/做海报/公众号封面/小红书配图/朋友圈配图/OG图/分享卡/头图/横幅/banner — social-ready posters, covers and share cards with big-type layouts, brand gradients and platform size specs.

    280 GitHub stars~768 tokensUpdated 1 mo ago
    Auto-check passed

Works with

Questions about Code2media

What does Code2media do?

Universal media renderer with no fixed template — any custom layout, size or style becomes pixel-perfect images (PNG/JPEG/WebP), vector SVG, paged PDFs or animations (WebP/GIF). Code2media is an agent skill from tsingliuwin/autoclaw. Universal media renderer with no fixed template — any custom layout, size or style becomes pixel-perfect images (PNG/JPEG/WebP), vector SVG, paged PDFs or animations (WebP/GIF).

When should I use Code2media?

Code2media fits situations like: no dedicated scenario skill fits: 自定义图形/任意尺寸图片/数据图表卡片/一次性版式/长文转PDF/出动图/GIF动画/内容可视化; covers (poster-maker); invoices/quotes/receipts (invoice-maker).

How do I install Code2media in Claude Code?

Run `npx skills add tsingliuwin/autoclaw --skill code2media -a claude-code`. Or copy the skill folder (skills/code2media in tsingliuwin/autoclaw) into .claude/skills/code2media in your project. Claude Code loads it when a task matches its description.

How do I install Code2media in Codex?

Run `npx skills add tsingliuwin/autoclaw --skill code2media -a codex`. Or copy the skill folder (skills/code2media in tsingliuwin/autoclaw) into .agents/skills/code2media in your project. Codex loads it when a task matches its description.

Can I use Code2media in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add tsingliuwin/autoclaw --skill code2media -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/code2media, .gemini/skills/code2media, .github/skills/code2media and .opencode/skills/code2media in your project.

What does Code2media need to run?

Going by SKILL.md and its folder, Code2media needs JavaScript for the scripts in its folder and the command-line tools its instructions call (node and npm). Our summary lists: Node.js.

Does Code2media access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Code2media safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Code2media use?

Code2media is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Code2media use?

About 956 tokens (SKILL.md is roughly 3.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.1k tokens, read only when the agent opens those files.

What are the alternatives to Code2media?

Skills that share tags, products or a category with Code2media: Reportlab (jimmc414/Kosmos, 594 stars), PDF Reading (Wide-Moat/open-computer-use, 126 stars), PDF Processing Toolkit (telagod/code-abyss, 244 stars) and Document Converter Suite (dkyazzentwatwa/chatgpt-skills, 112 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Code2media?

tsingliuwin (a GitHub user) maintains it in tsingliuwin/autoclaw, which has 280 GitHub stars. The repository holds 3 skills in this directory. The repository was last updated on September 6, 2026.

Source: tsingliuwin/autoclaw on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.