Skip to main content

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-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 QuestionRouted To
"Add Unlayer to my React app"unlayer-integration
"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:

ToolLocation
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"

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"