Skills

A skill is a set of instructions that teaches an AI client how to carry out a complete Abyssale workflow using the MCP server's tools — it doesn't connect anything itself. Connect the MCP server first; a skill only works once the client already has the tools it describes.

Claude Code CLI and Claude.ai, for now

Skills are a Claude-specific feature: Claude Code CLI and Claude.ai discover and use one automatically once it's installed. Cursor and ChatGPT/Codex have no equivalent mechanism yet — a skill's SKILL.md still works with them as plain reference material, but you point the agent at it yourself rather than relying on automatic discovery.

All skills are published and maintained in getabyssale/abyssale-mcp-skills on GitHub.

Available skills

Skill	What it does
html-to-abyssale	Recreate an HTML/CSS banner (HTML5 ad, email banner, design-tool export) as a native, editable Abyssale design, animation included on a best-effort basis.
figma-to-abyssale	Recreate a Figma design file or FigJam board as a native, multi-layer, fully-editable Abyssale design.
abyssale-import	Import a design into Abyssale from a JSON payload, including uploading local image assets.
abyssale-variations	Generate multiple format/size/language variations, or a video, from one existing design.
abyssale-personalize	Bulk-generate personalized creatives from a dataset — one visual per row.
abyssale-print-catalog	Generate a print-ready multi-page PDF catalog, brochure, or lookbook.

Install a skill

Each skill lives in its own folder — install just the one you want, not the whole repository.

Claude Code CLI

Download the skill's SKILL.md straight into your skills directory. Use .claude/skills/ at your project root to scope it to one project, or ~/.claude/skills/ to make it available everywhere.

html-to-abyssale

mkdir -p ~/.claude/skills/html-to-abyssale
curl -o ~/.claude/skills/html-to-abyssale/SKILL.md \
  https://raw.githubusercontent.com/getabyssale/abyssale-mcp-skills/main/html-to-abyssale/skills/html-to-abyssale/SKILL.md

figma-to-abyssale

mkdir -p ~/.claude/skills/figma-to-abyssale
curl -o ~/.claude/skills/figma-to-abyssale/SKILL.md \
  https://raw.githubusercontent.com/getabyssale/abyssale-mcp-skills/main/figma-to-abyssale/skills/figma-to-abyssale/SKILL.md

Swap the skill name in both the path and the URL for any other skill from the table above.

Claude.ai

Claude.ai installs a skill from a .zip file whose root contains SKILL.md directly.

1. Clone the repository and re-zip just the skill folder you want:

html-to-abyssale

git clone --depth 1 https://github.com/getabyssale/abyssale-mcp-skills.git
cd abyssale-mcp-skills/html-to-abyssale/skills/html-to-abyssale
zip -r html-to-abyssale.zip .

figma-to-abyssale

git clone --depth 1 https://github.com/getabyssale/abyssale-mcp-skills.git
cd abyssale-mcp-skills/figma-to-abyssale/skills/figma-to-abyssale
zip -r figma-to-abyssale.zip .

2. In Claude.ai, go to Customize → Skills → Add, and upload the .zip file.

Requires a paid plan and code execution enabled

Skills need a Pro, Max, Team, or Enterprise plan, with code execution enabled — Free plan accounts can't create or upload one.

Examples

html-to-abyssale

Give it the HTML/CSS of a banner and ask for it back as an Abyssale design:

I have this HTML5 ad banner — rebuild it as an Abyssale design I can edit and resize.

The skill reads the markup, maps each element to a native layer (text, button, shape, image), and calls import_design_from_json to create it — carrying over CSS or GSAP animation where Abyssale has a matching tween, on a best-effort basis.

figma-to-abyssale

Give it a Figma file or FigJam board URL:

Rebuild this Figma design as a real Abyssale template.

The skill walks the Figma file's layer tree and recreates it element by element in Abyssale, rather than importing a single flattened image.

Where to go next

• Overview — connect the MCP server your client needs before a skill can do anything.
• Tools reference — every tool a skill can call, and what it returns.