Guizang Social Cards
op7418/guizang-social-card-skill
Produces social card sets for Xiaohongshu and WeChat: carousels, Live Photo motion cards and puzzle layouts, and WeChat cover pairs, rendered from single-file HTML.
Turn an image of a poster, flyer, menu, banner or UI screenshot into a single editable HTML file — every text line becomes real editable text, every object (a product with everything on and around…
Install Image To Editable HTML
$ npx skills add fastclaw-ai/fastclaw --skill image-to-editable-html -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install fastclaw-ai/fastclaw image-to-editable-html --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/fastclaw-ai/fastclaw.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/image-to-editable-html .claude/skills/image-to-editable-html && rm -rf skills-srcUse ~/.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/
Install the "image-to-editable-html" agent skill from https://github.com/fastclaw-ai/fastclaw/tree/dev/skills/image-to-editable-html into .claude/skills/image-to-editable-html/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "image-to-editable-html", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/fastclaw-ai/fastclaw/tree/dev/skills/image-to-editable-htmlType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add fastclaw-ai/fastclaw --skill image-to-editable-html -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install fastclaw-ai/fastclaw image-to-editable-html --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/fastclaw-ai/fastclaw.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/image-to-editable-html .agents/skills/image-to-editable-html && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "image-to-editable-html" agent skill from https://github.com/fastclaw-ai/fastclaw/tree/dev/skills/image-to-editable-html into .agents/skills/image-to-editable-html/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "image-to-editable-html", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add fastclaw-ai/fastclaw --skill image-to-editable-html -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install fastclaw-ai/fastclaw image-to-editable-html --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/fastclaw-ai/fastclaw.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/image-to-editable-html .cursor/skills/image-to-editable-html && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "image-to-editable-html" agent skill from https://github.com/fastclaw-ai/fastclaw/tree/dev/skills/image-to-editable-html into .cursor/skills/image-to-editable-html/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "image-to-editable-html", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/fastclaw-ai/fastclaw.git --path skills/image-to-editable-html--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add fastclaw-ai/fastclaw --skill image-to-editable-html -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install fastclaw-ai/fastclaw image-to-editable-html --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/fastclaw-ai/fastclaw.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/image-to-editable-html .gemini/skills/image-to-editable-html && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "image-to-editable-html" agent skill from https://github.com/fastclaw-ai/fastclaw/tree/dev/skills/image-to-editable-html into .gemini/skills/image-to-editable-html/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "image-to-editable-html", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install fastclaw-ai/fastclaw image-to-editable-htmlInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add fastclaw-ai/fastclaw --skill image-to-editable-html -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/fastclaw-ai/fastclaw.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/image-to-editable-html .github/skills/image-to-editable-html && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "image-to-editable-html" agent skill from https://github.com/fastclaw-ai/fastclaw/tree/dev/skills/image-to-editable-html into .github/skills/image-to-editable-html/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "image-to-editable-html", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add fastclaw-ai/fastclaw --skill image-to-editable-html -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install fastclaw-ai/fastclaw image-to-editable-html --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/fastclaw-ai/fastclaw.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/image-to-editable-html .opencode/skills/image-to-editable-html && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "image-to-editable-html" agent skill from https://github.com/fastclaw-ai/fastclaw/tree/dev/skills/image-to-editable-html into .opencode/skills/image-to-editable-html/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "image-to-editable-html", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
image-to-editable-html- GitHub stars
- 1.4k
- Token cost
- ~2.4k tokens
- SKILL.md length
- 1,312 words
- Files
- 13 (incl. scripts)
- Skills in repo
- 11
- Repo updated
- First seen
- Licence
- Custom licence
At a glance
Turn an image of a poster, flyer, menu, banner or UI screenshot into a single editable HTML file — every text line becomes real editable text, every object (a product with everything on and around…
- Works in 7 steps: Find the image file → Name the flat graphics (optional) → Run the pipeline in the background → …
- The user sends an image and asks to make it editable
- SKILL.md covers 1. Find the image file, 2. Name the flat graphics…, 3. Run the pipeline in the… and 4. Review the objects, plus 3 more sections
- Runs Python and Shell scripts from its folder; calls bash
What it does
Image To Editable HTML is an agent skill from fastclaw-ai/fastclaw. Turn an image of a poster, flyer, menu, banner or UI screenshot into a single editable HTML file — every text line becomes real editable text, every object (a product with everything on and around it, an illustration, a logo, an icon) is cut from the background as one movable piece, and the page has a built-in editor (drag, resize, edit text, layers panel, export). Use when the user sends an image and asks to make it editable, split it into layers/components, "convert to HTML", or "拆图层 / 转成可编辑的网页".
Its SKILL.md is about 2.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 13 other files, including scripts (for example `scripts/build_html.py`, `scripts/build_scene.py` and `scripts/edit_check.py`).
It sits in Media & Creative. The repository describes itself as: Multi-Agent Framework.
When your agent uses it
- The user sends an image and asks to make it editable
- Split it into layers/components
- Convert to HTML
Example prompts
- “convert to HTML”
- “拆图层 / 转成可编辑的网页”
- “/image-to-editable-html”
Requirements
- Python 3
- A Bash shell
- A credential in FAL_KEY
Workflow steps
7 steps, taken from the step headings in SKILL.md.
- Find the image file
- Name the flat graphics (optional)
- Run the pipeline in the background
- Review the objects
- Proof-read the text and set the fonts
- Deliver
- Follow-up changes in conversation
What it can do on your machine
Read from SKILL.md and the folder at commit d2ebed1. 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 12 files in scripts/ (Python and Shell), which the agent can run.
Shell commands in SKILL.md call:
bash
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
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
Image To Editable HTML loads about 2.4k tokens when it runs. Until then it costs about 132 tokens; SKILL.md has 1,312 words of instructions outside code blocks.
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
Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 1,312 words (~2,443 tokens).
“Input: one image (poster, menu or UI screenshot). Output: one self-contained .html file that looks like the image, where every element can be selected, moved, resized, edited or hidden, and which exports a clean copy.”
- name
- image-to-editable-html
Files
SKILL.md and 12 other files (scripts) in skills/image-to-editable-html of fastclaw-ai/fastclaw.
- SKILL.md
- scripts/build_html.py
- scripts/build_scene.py
- scripts/edit_check.py
- scripts/erase.py
- scripts/fal.py
- scripts/gen.py
- scripts/ocr.py
- scripts/pipeline.py
- scripts/requirements.txt
- scripts/run.sh
- scripts/scene.py
- scripts/text_masks.py
Open the folder on GitHubat commit d2ebed1
Compare with similar skills
Image To Editable HTML 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Image To Editable HTML this skillfastclaw-ai/fastclaw | 1.4k | — | ~2.4k | Automated safety check: Pass | Custom licence | |
| Guizang Social Cardsop7418/guizang-social-card-skill | 7.4k | 1 repos | ~7.8k | Automated safety check: Pass | AGPL-3.0 | |
| Weekly Changelog Videoheygen-com/hyperframes | 60k | — | ~3.3k | Automated safety check: Pass | Apache-2.0 | |
| Anthropic Brand Stylinganthropics/skills | 180k | 30 repos | ~559 | Automated safety check: Pass | Apache-2.0 | |
| MoneyPrinterTurbo Video Generatorharry0703/MoneyPrinterTurbo | 129k | — | ~2.1k | Automated safety check: Warn | MIT | |
| HyperFrames Media Useheygen-com/hyperframes | 60k | — | ~2.4k | Automated safety check: Pass | Apache-2.0 |
Similar skills
Weekly Changelog Video
heygen-com/hyperframes
Turns a weekly changelog markdown file into a branded HyperFrames video with voiceover, animated mock-UI scenes and captions, using fonts, background and scripts bundled in the skill.
- Official
Anthropic Brand Styling
anthropics/skills
Applies Anthropic's brand colors and fonts to artifacts such as PowerPoint slides, using fixed hex values for text and accents, Poppins headings and Lora body text.
MoneyPrinterTurbo Video Generator
harry0703/MoneyPrinterTurbo
Installs and runs MoneyPrinterTurbo to turn a topic or script into a finished short video with voice-over, subtitles, stock footage and music.
HyperFrames Media Use
heygen-com/hyperframes
Finds, generates and edits media for HyperFrames video projects: music, sound effects, images, icons, logos, voiceovers, captions and color grades.
Holo Card Studio
EverettFish/holo-card-studio
Create collectible holographic foil cards and two-image lenticular flip cards with AI-generated full-color ukiyo-e and colored sumi-e anime artwork, layered Blender scenes, renders, GLB export, and…
More from fastclaw-ai/fastclaw
All 11 skills in this repoAgent Integration
fastclaw-ai/fastclaw
Integrate an application's backend with FastClaw cloud agents over the FastClaw API.
Fastclaw Skill Guide
fastclaw-ai/fastclaw
Create new skills for FastClaw agents. An agent skill from fastclaw-ai/fastclaw.
Local Coding Agents
fastclaw-ai/fastclaw
Hand a task to the Codex CLI or Claude Code CLI installed on this machine and relay the result.
Code Runner
fastclaw-ai/fastclaw
Execute code in multiple programming languages. An agent skill from fastclaw-ai/fastclaw.
Find Skills
fastclaw-ai/fastclaw
Run this BEFORE any package install (pip / npm / apt / brew / cargo / gem / go install) you would otherwise execute via the exec tool — including when the user asks for a deliverable that needs…
Data Analysis
fastclaw-ai/fastclaw
Analyze data, process CSV/JSON files, compute statistics, and create data visualizations.
Related
Categories
Questions about Image To Editable HTML
What does Image To Editable HTML do?
Turn an image of a poster, flyer, menu, banner or UI screenshot into a single editable HTML file — every text line becomes real editable text, every object (a product with everything on and around…. Image To Editable HTML is an agent skill from fastclaw-ai/fastclaw. Turn an image of a poster, flyer, menu, banner or UI screenshot into a single editable HTML file — every text line becomes real editable text, every object (a product with everything on and around it, an illustration, a logo, an icon) is cut from the background as one movable piece, and the page has a built-in editor (drag, resize, edit text, layers panel, export).
When should I use Image To Editable HTML?
Image To Editable HTML fits situations like: the user sends an image and asks to make it editable; split it into layers/components; convert to HTML.
How do I install Image To Editable HTML in Claude Code?
Run `npx skills add fastclaw-ai/fastclaw --skill image-to-editable-html -a claude-code`. Or copy the skill folder (skills/image-to-editable-html in fastclaw-ai/fastclaw) into .claude/skills/image-to-editable-html in your project. Claude Code loads it when a task matches its description.
How do I install Image To Editable HTML in Codex?
Run `npx skills add fastclaw-ai/fastclaw --skill image-to-editable-html -a codex`. Or copy the skill folder (skills/image-to-editable-html in fastclaw-ai/fastclaw) into .agents/skills/image-to-editable-html in your project. Codex loads it when a task matches its description.
Can I use Image To Editable HTML 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 fastclaw-ai/fastclaw --skill image-to-editable-html -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/image-to-editable-html, .gemini/skills/image-to-editable-html, .github/skills/image-to-editable-html and .opencode/skills/image-to-editable-html in your project.
What does Image To Editable HTML need to run?
Going by SKILL.md and its folder, Image To Editable HTML needs Python and a shell for the scripts in its folder and the command-line tools its instructions call (bash). Our summary lists: Python 3; A Bash shell; A credential in FAL_KEY.
Does Image To Editable HTML access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Image To Editable HTML 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 Image To Editable HTML use?
Image To Editable HTML has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.
How many tokens does Image To Editable HTML use?
About 2.4k tokens (SKILL.md is roughly 9.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Image To Editable HTML?
Skills that share tags, products or a category with Image To Editable HTML: Guizang Social Cards (op7418/guizang-social-card-skill, 7.4k stars), Weekly Changelog Video (heygen-com/hyperframes, 60k stars), Anthropic Brand Styling (anthropics/skills, 180k stars) and MoneyPrinterTurbo Video Generator (harry0703/MoneyPrinterTurbo, 129k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Image To Editable HTML?
fastclaw-ai (a GitHub organization) maintains it in fastclaw-ai/fastclaw, which has 1,355 GitHub stars. The repository holds 11 skills in this directory. The repository was last updated on October 9, 2026.
Source: fastclaw-ai/fastclaw on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.