How Skills Work

This page explains the technical architecture behind Unlayer Skills — how they're structured, how AI tools discover them, and how the routing system works.

Skill Structure

Each skill is a self-contained Markdown file (SKILL.md) inside its own folder:

unlayer-skills/
├── unlayer/                  # Router skill
│   └── SKILL.md
├── unlayer-integration/      # Framework setup
│   └── SKILL.md
├── unlayer-image-editor/     # Standalone Image Editor
│   ├── agents/
│   │   └── openai.yaml
│   ├── SKILL.md
│   └── references/
│       ├── configuration.md
│       ├── javascript.md
│       └── react.md
├── unlayer-elements/         # Code-first content creation
│   ├── SKILL.md
│   └── references/
│       ├── component-reference.md
│       └── patterns.md
├── unlayer-custom-tools/     # Custom tool building
│   └── SKILL.md
├── unlayer-export/           # Export and design management
│   ├── SKILL.md
│   └── references/
│       └── design-json.md   # TypeScript types for design JSON
└── unlayer-config/           # Editor configuration
    ├── SKILL.md
    └── references/
        ├── feature-flags.md
        ├── file-storage.md
        └── security.md

Each SKILL.md file contains:

• Frontmatter with the skill name and description
• Overview of what the skill covers
• Complete code examples that AI can use as templates
• Reference tables for API options, widgets, and configuration
• Common mistakes and troubleshooting guides
• Links to official Unlayer documentation

How Routing Works

The unlayer skill acts as a router. When you ask a question, your AI assistant reads the router skill first, which contains a mapping table:

User Question	Routed To
"Add Unlayer to my React app"	unlayer-integration
"Embed the standalone Image Editor"	unlayer-image-editor
"Build an email with React components"	unlayer-elements
"Create a custom drag-and-drop tool"	unlayer-custom-tools
"Export HTML" / "Save the design"	unlayer-export
"Set up merge tags" / "Configure HMAC"	unlayer-config

The AI assistant then reads the appropriate sub-skill for detailed guidance. For complex tasks that span multiple skills, the router recommends a sequence:

1. unlayer-integration — add the editor
2. unlayer-config — customize behavior
3. unlayer-export — save and export
4. unlayer-custom-tools — build custom blocks

How AI Tools Discover Skills

When you run npx skills add unlayer/unlayer-skills, the CLI places skill files where your AI tool expects them:

Tool	Location
Cursor	.agents/skills/
Claude Code	.claude/skills/
GitHub Copilot	.agents/skills/
Windsurf	.windsurf/skills/
Codex	.agents/skills/

Your AI tool automatically reads files from its expected location before generating responses. No additional configuration is needed.

Keeping Skills Current

Skills include a version check mechanism. The router skill's SKILL.md reads its own file modification time and prompts the AI to suggest an update if the file is more than 30 days old:

npx skills update

This pulls the latest skill files from the GitHub repository, ensuring your AI assistant always has current API information.

Example Prompts

Here are some prompts you can try after installing the skills:

Integration:

• "How do I add Unlayer to my React app?"
• "Set up the Unlayer editor in my Angular project"

Image Editor:

• "Embed the standalone Image Editor in my React app"
• "Configure the Image Editor tools and enable the AI Assistant"

Elements:

• "Build a welcome email with Unlayer Elements"
• "Render an Unlayer Elements template to HTML"

Custom Tools:

• "Create a custom product card tool with an image, title, price, and buy button"
• "How do I create a custom property editor with a range slider?"

Export:

• "Export my design as HTML and save the design JSON"
• "Set up auto-save that triggers when the design changes"

Configuration:

• "Set up merge tags for my email templates"
• "Configure HMAC security for user identification"