Templatical

AI Agent Skill ​

Templatical ships one Agent Skill — free, open-source, and running entirely in your own AI coding agent: templatical. Ask it for an email and it writes, edits, imports, validates or previews a template; ask it about the SDK and it installs, mounts, scaffolds or troubleshoots an @templatical/editor integration. One skill, and it decides for itself which job a request needs.

There is no backend and no API key: your agent is the inference. Nothing is sent to Templatical.

Install ​

bash
npx skills add templatical/sdk

To update:

bash
npx skills update templatical

If your agent doesn't pick the skill up afterwards, check that it is enabled in the agent's own skill list.

What it can do ​

  • Build a template from a brief — "make a product-launch email", "design a welcome email".
  • Edit an existing template as a scoped change, not a rewrite.
  • Import a template from almost anywhere — dedicated converters for Unlayer, BeeFree, Stripo, Topol, Chamaileon, Easy Email Pro, MJML and HTML, and for anything else it maps the source onto the block schema by hand.
  • Validate a template's JSON against the block schema and get back precise, per-block errors.
  • Export a template as sendable MJML or HTML.
  • Preview it live in the real Templatical editor in your browser, kept in sync as you keep prompting — your own hand-edits included.
  • Integrate the editor into an application — detect the stack, propose the change, and wait before writing anything.
  • Scaffold a proposed integration into your repository, installed with your own package manager and checked against your running dev server.
  • Diagnose an integration that misbehaves, against a table of verified traps.
  • Answer a question about the SDK by fetching this documentation site directly.

The mechanical steps — validate, render, import, live preview — are @templatical/template-tools. The skill drives that CLI; you can run the same commands from a shell with no agent.

Prefer a hosted experience?

An in-editor AI chat, tuned prompts, and a hosted MCP server are part of the Templatical Cloud tier. This skill is the open, self-hosted path — bring your own agent, keep full control.

Examples ​

Build, validate, and export an email — no integration needed ​

Describe the email you want. For example:

Give me a product-launch email for an outdoors brand — a hero image, a short intro, and a "Shop now" button, using forest green and a warm neutral background.

The agent will:

  1. Read the block schema and worked examples bundled with the skill.
  2. Generate a complete template as { blocks, settings } JSON.
  3. Run the validator itself and fix any structural or accessibility issues it reports — repeating until the template passes.
  4. Hand you the finished email: export MJML/HTML to send, or load the JSON into your own editor integration with editor.setContent(json).

That's a complete email, start to finish, with no integration to build. You can also preview it live before exporting — see the next example.

Preview and hand-edit it live ​

Ask to show it live (or "preview it live", "build this in live mode") and the skill:

  1. Opens a live preview in your browser, showing your current template in the real editor.
  2. Updates it live each time you prompt a change — no refresh.
  3. Lets you hand-edit in the browser too; the agent notices when you've diverged and asks whether to build on your version or replace it before overwriting.

Build in plain JSON first and switch to a live preview mid-session — it picks up right where you are. Live mode is local and single-user — not the Cloud realtime path — and needs nothing beyond a coding agent running on your own machine.

Import an existing template ​

Already have a template somewhere else? The skill converts Unlayer, BeeFree, Stripo, Topol, Chamaileon, Easy Email Pro, MJML, and HTML emails into Templatical JSON — point it at the file and it writes a working template plus a short report of what converted cleanly and what fell back to raw HTML (import is lossy by nature). Then preview it live and refine the rough edges into native blocks.

No converter for your source? It still works. The skill knows the block schema, so it can read an unfamiliar template and map it across by hand — a WordPress block template, a Mailchimp or Klaviyo export, a hand-written HTML email, even a screenshot or PDF of one. It reads the source, plans the mapping, builds the blocks, then validates the result like any other template. Slower and less exact than a converter, and worth asking for by name.

The converter list grows, so the skill asks the CLI what is available rather than assuming — you never need to check first.

To run the converters directly in your own code instead, see the migration guides: Unlayer, BeeFree, Stripo, Topol, Chamaileon, Easy Email Pro, MJML, HTML.

Integrate the editor — or diagnose an existing integration ​

Ask it to scaffold a brand-new integration, add a save/load provider to an existing one, or explain why an editor mounted inside a modal renders its dialogs in the wrong place. For a new integration, it:

  1. Detects your stack — package manager, framework, bundler, TypeScript, and whether @templatical/editor is already installed, and at what version.
  2. Proposes the change and waits — the packages to add, the files to create or edit, the mount point — before touching anything.
  3. Writes it, installing with your own package manager.
  4. Verifies by running your dev server and reading its console and network output — not by asking you to check yourself.
  5. Reports what changed, what was left alone, and what's still needed — a provider, an optional peer, a Cloud auth endpoint.

Diagnosing an existing integration runs the same steps backwards: it reads your init()/initCloud() call, bundler config and CSS setup, and checks each against a table of verified traps — duplicate Vue reactivity, a missing style.css import, a trapped position: fixed ancestor, and more.

Good to know ​

Bring your own branding ​

Layer your own context on top and the agent uses it instead of generic defaults — brand colors and fonts, tone of voice, a house system prompt, a mandatory footer or unsubscribe block. Worth doing once if you plan to generate more than one email.

Custom blocks are never generated from a prompt ​

Custom blocks are consumer-registered runtime extensions — the skill has no way to know what one does, so it never invents one from a prompt. See Custom Blocks for how to register your own.

Never emit countdown ​

countdown needs Cloud's server-side animated GIF; the OSS renderer cannot produce it. If asked for a countdown, say so and offer a static stand-in — a title or paragraph with the date, or an "X days to go" line.

Prefer native blocks ​

Reach for html only as a last resort — raw HTML is not visually editable afterward.

Match settings.locale to the copy ​

settings.locale becomes <html lang>. Set it to the language of the generated copy; do not default German copy to "en". For ar/he/fa/ur/… also set direction: "rtl" (or omit it and those locales resolve as RTL).