Skip to main content

Using with Claude Code

Claude Code is Anthropic's agentic coding tool that runs in your terminal. It reads skill files from its own .claude/skills/ directory, which you can symlink to the standard .agents/skills/ location.

Install​

npx skills add unlayer/unlayer-skills --agent claude-code

Skills are installed to .agents/skills/ in your project directory. Claude Code reads skills from .claude/skills/, so create a symlink to make the skills available:

ln -s ../.agents/skills .claude/skills

Verify​

Check that the skills are available:

ls .claude/skills/unlayer*

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:

PromptWhat 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