moda

Moda Skills

Create editable, brand-aligned slides and designs.

Moda is an AI design agent that creates brand-aligned slides, one-pagers, ads, graphics, and more on a fully editable canvas. This repo ships two installable agent skills that teach any AI agent to drive Moda like a power user:

• moda-mcp — the Moda MCP server. Kick off designs from a conversation in Claude / Cursor / VS Code / Gemini. Generate a deck from a prompt, spin up variations in bulk, customize a template for a prospect, pull an existing canvas into chat to revise, or turn a Moda canvas into production code.
• moda-api — the Moda REST API. Scheduled jobs, CI pipelines, webhook receivers, and backend integrations authenticated with an API key.

Install once and your agent knows the canonical design-creation flow, the prompt-gathering ritual before start_design_task, the brand-kit default, the 2–10 minute async task lifecycle, the format_category disambiguation table (including carousel), the prefixed-ID rule, the typed error envelope, and the webhook verification pattern — without re-deriving them from the docs every time.

📖 Full docs and install walkthroughs: docs.moda.app/mcp/agent-skill

Which install should I pick?

Situation	Install path
You already have the Moda MCP connected, or only want the REST-API skill	Vercel skills CLI — npx skills add moda-design/skills (skills only, no MCP touch)
You're new to Moda and want one-shot skills + MCP setup	Editor-native plugin — pick your editor below
You're on Claude Desktop, claude.ai, or Claude Mobile	OAuth Custom Connector — pair with npx skills add on a machine where you code
You write raw system prompts or use the Claude Agent SDK	Manual include — @include skills/moda-mcp/SKILL.md

Every install path ultimately surfaces the same Markdown files under skills/. The per-editor manifests (.claude-plugin/, .cursor-plugin/, gemini-extension.json, .mcp.json) just bundle them with the right install ritual for each host.

Install

Claude Code — plugin (bundles skills + MCP)

claude /plugin marketplace add moda-design/skills
claude /plugin install moda

Claude Code registers both skills and adds the moda MCP server from .mcp.json. The first time a tool fires, you'll sign in via OAuth in your browser. If you already have a moda server configured, disable the plugin's bundled MCP in plugin settings or use the skills-only path instead.

Claude Code — skills only (no MCP change)

npx skills add moda-design/skills -a claude-code

Installs both skills under .claude/skills/. Use this if you already connected the Moda MCP (or prefer to connect it manually — see the Moda MCP setup docs).

If you only want one skill:

npx skills add moda-design/skills --skill moda-mcp -a claude-code
npx skills add moda-design/skills --skill moda-api -a claude-code

Cursor — plugin

/add-plugin moda-design/skills

Cursor reads .cursor-plugin/plugin.json and auto-registers the skills plus the MCP server. The OAuth flow runs on first tool call. Skills-only fallback:

npx skills add moda-design/skills -a cursor

Manual MCP setup lives in .cursor/mcp.json — same streamable-http config:

{
  "mcpServers": {
    "moda": {
      "type": "streamable-http",
      "url": "https://mcp.moda.app/mcp"
    }
  }
}

Claude Desktop / claude.ai (browser) / Claude Mobile

First add the Moda Custom Connector:

1. Open Customize in the sidebar → + → Add custom connector.
2. Name: Moda. URL: https://mcp.moda.app/mcp. Click Add, then Connect and sign in.

Then add the skill. Two options:

• Upload the skill zip (no terminal needed): download moda-mcp.zip from the latest release, then in claude.ai go to Settings → Capabilities → Skills → Upload skill and select the file. (Use the per-skill moda-mcp.zip, not the bundled skills.zip — claude.ai's uploader requires a single skill per zip.)
• npx skills add: on a machine where you also code, run npx skills add moda-design/skills.

Team/Enterprise claude.ai users: an admin must first add the Moda connector in Admin Settings > Connectors.

Mobile picks up connectors you've added on claude.ai automatically.

VS Code

Add to your user or workspace settings.json:

{
  "mcp": {
    "servers": {
      "moda": {
        "type": "streamable-http",
        "url": "https://mcp.moda.app/mcp"
      }
    }
  }
}

Then install the skills:

npx skills add moda-design/skills -a vscode

Gemini CLI