Using with Claude Code
Claude Code is Anthropic's agentic coding tool that runs in your terminal. It reads skill files from .claude/skills/, and the skills CLI installs there directly when it detects Claude Code — no extra setup needed.
Install
npx skills add unlayer/unlayer-skills --agent claude-code
Skills are installed to .claude/skills/ in your project directory.
Verify
Check that the skills are available:
ls .claude/skills/unlayer*
You should see folders: unlayer/, unlayer-integration/, unlayer-custom-tools/, unlayer-export/, and unlayer-config/.
How It Works in Claude Code
Claude Code reads skill files as additional context before responding to your prompts. The skills provide Claude with:
- Accurate API signatures for
unlayer.init(),exportHtml(),loadDesign(), and all other methods - Working code examples for React, Vue, Angular, and plain JavaScript
- Email-safe HTML patterns for custom tool exporters
- Correct configuration options for merge tags, HMAC security, file storage, and more
Example Prompts
Try these in your Claude Code session:
| Prompt | What You'll Get |
|---|---|
| "Add the Unlayer email editor to my React app" | Complete component with save/load pattern |
| "Build a custom testimonial block for the editor" | registerTool with renderer, email exporter, and property editors |
| "Export the design as HTML and save to my API" | exportHtml with proper design JSON handling |
| "Set up custom image uploads to S3" | registerCallback with FormData upload pattern |
| "Configure display conditions for VIP users" | setDisplayConditions with template engine syntax |
Update
npx skills update