Skill1.2k estrellas del repoactualizado yesterday

html-to-image

This Claude Code skill converts HTML files or content into PNG images by rendering them through agent-browser and taking screenshots. Use it to generate infographics, social media graphics, data visualization screenshots, and other publishable image content from HTML that Claude produces, with configurable viewport dimensions and full-page capture options.

Ver fuente Repositorio: AWorld

Instalar en Claude Code

Copiar

git clone --depth 1 https://github.com/inclusionAI/AWorld /tmp/html-to-image && cp -r /tmp/html-to-image/examples/skill_agent/skills/html-to-image ~/.claude/skills/html-to-image

Después abre una sesión nueva de Claude Code; el skill carga automáticamente.

Definición

SKILL.md

# HTML 转图片 (html-to-image)

## 概述

将 HTML 文件或内容通过 agent-browser 渲染为图片。典型用法：Claude 生成精美 HTML → 本 skill 截图 → 得到可直接发布的图片。

## 工具路径

- 脚本：`.claude/skills/html-to-image/html_to_image.sh`
- 依赖：`agent-browser`（CDP 已连接）、`python3`

## 用法

```bash
./html_to_image.sh -o <output> [-f <html_file> | -c <html_content>] [-w <width>] [-p <cdp_port>] [--full]
```

### 参数

| 参数 | 说明 | 必填 | 默认 |
|------|------|------|------|
| `-o` | 输出图片路径（.png） | 是 | - |
| `-f` | HTML 文件路径（与 `-c` 二选一） | 二选一 | - |
| `-c` | HTML 内容字符串（与 `-f` 二选一） | 二选一 | - |
| `-w` | 视口宽度 | 否 | 1080 |
| `-e` | 视口高度（不指定则全页截图） | 否 | - |
| `-p` | CDP 端口 | 否 | 9222 |
| `--full` | 全页截图（忽略视口高度限制） | 否 | 默认开启 |

### 示例

```bash
# 从 HTML 文件截图
./html_to_image.sh \
  -f card.html -o card.png

# 直接传入 HTML 内容
./html_to_image.sh \
  -c '<html><body><h1>Hello</h1></body></html>' \
  -o hello.png

# 指定宽度（适配手机尺寸）
./html_to_image.sh \
  -f infographic.html -o output.png -w 750

# 固定视口截图（非全页）
./html_to_image.sh \
  -f page.html -o output.png -w 1080 -e 1920 --no-full
```

### 典型工作流

1. Claude 根据内容生成精美 HTML（信息图、卡片等）
2. 使用本 skill 截图为 PNG
3. 将截图传给 `xhs-publisher` 发布到小红书

```bash
# 生成图片
./html_to_image.sh -f card.html -o card.png

# 发布到小红书
./.claude/skills/xhs-publisher/publish_xhs.sh -t "标题" -c "正文" -i card.png
```

Del mismo repositorio

ad_image_createSkill

Create ad-ready product images (single or collage) by back-solving sub-image sizes from target output ratio, grounding scene design with media_comprehension, generating images via image_generator with strict request params and actor-count control, and pairing each deliverable with a short social tagline for 小红书/抖音.

ad_video_createSkill

Create ad-ready product video from product images, with or without character/subject images. The workflow leverages AI-powered image composition, scene understanding, and video generation. Video prompts should follow commercial shot language—visual hooks, product presence, hero shots, detail showcase, function expression, and dynamic visuals.

agent-browserSkill

Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.

app_evaluatorSkill

A professional skill for App Evaluation (evaluating app's performance with score) and App Improvement (giving professional suggestions for improving the app's performance).

embedded-video-pip-smooth-playbackSkill

last_7_days_newsSkill

Search and summarize the latest 7 days of AI news and X discussions using public sources plus browser-based X collection. Use for recent AI news, trends, X discussions, industry briefs, and summaries organized into hot topics, viewpoints, and opportunity areas.

media_comprehensionSkill

An intelligent assistant specialized in handling media files (images/audio/video). **Only for media file analysis**, does not handle document types.\n\n✅ Media files that can be processed:\n- Images: .jpg, .jpeg, .png, .gif, .bmp, .webp, .svg\n- Audio: .mp3, .wav, .m4a, .flac, .aac, .ogg\n- Video: .mp4, .avi, .mov, .mkv, .webm, .flv\n\n❌ Files that cannot be processed (please do not trigger this skill):\n- Documents: .pdf, .doc, .docx, .txt, .md, .rtf\n- Spreadsheets: .xlsx, .xls, .csv, .tsv\n- Presentations: .pptx, .ppt, .key\n- Code: .py, .js, .ts, .java, .cpp, .go, .rs\n- Archives: .zip, .tar, .gz, .rar, .7z\n- Executables: .exe, .bin, .app, .dmg\n- Databases: .db, .sqlite, .sql\n- Configuration files: .json, .xml, .yaml, .yml, .toml, .ini\n- Web pages: .html, .htm, .css\n\n**Trigger conditions**: When the user explicitly requests to analyze image/audio/video content, or when the file extension belongs to the aforementioned media types.".

optimizerSkill

Analyzes and automatically optimizes existing agents by improving system prompts and tool configuration.