Using PinePaper with Claude (Skills)

6 min read

PinePaper ships an official Claude Skill that teaches Claude when and how to drive PinePaper. Pair it with the PinePaper MCP server and you can ask Claude — in plain language — to build animated titles, status badges, animated logos, diagrams, generative backgrounds, and more, and export them as MP4, GIF, WebM, animated SVG, PDF, or an embeddable HTML widget.

Skill vs. MCP server — two halves of one whole. The MCP server provides the actual tools (pinepaper_agent_start_job, pinepaper_agent_batch_execute, pinepaper_agent_export, …) that run on the canvas. The Skill is the instruction layer — it tells Claude the correct workflow, the exact item / animation / effect vocabulary, and how to avoid common mistakes. You want both: the MCP for the hands, the Skill for the know-how.

Prerequisites

  1. The PinePaper MCP server, connected to Claude. Install it from npm / GitHub and follow MCP Server → Installation. Without the MCP server connected, the Skill can still write pasteable window.PinePaper console code, but it can’t run the canvas or produce exports directly.
  2. A Claude surface that supports Skills: Claude Code (CLI) or Cowork (Claude desktop app). In Cowork, make sure Code execution & file creation is enabled under Settings → Capabilities.

What the Skill does

Once installed, the Skill triggers automatically when you ask Claude for animated or vector visual work — even if you don’t say “PinePaper.” For example:

  • “Make an animated LIVE badge with a pulsing green dot for my stream overlay.”
  • “Animate my logo SVG so it spins in once then gently pulses, and give me an animated SVG.”
  • “Turn ‘Ship Faster’ into kinetic typography for an Instagram post and export an MP4.”
  • “Build a flowchart of our onboarding and export a PDF.”

It knows the canonical workflow (start_job → batch_execute → end_job → export), the exact vocabulary of item types, loop animations, effects, generators, relations, masks, and platform presets, and the export format that matches your intent.

Install in Claude Code

Skills in Claude Code are just folders on disk. You have two options.

A plugin bundles the Skill and the MCP server config together, with versioned updates.

# Add the PinePaper marketplace (owner/repo, git URL, or local path)
/plugin marketplace add pinepaper/claude-plugins

# Install the plugin
/plugin install pinepaper@pinepaper-marketplace

# Activate without restarting
/reload-plugins

After install, skills are namespaced under the plugin, e.g. /pinepaper:pinepaper-studio. Claude will also invoke the Skill automatically when your request matches.

Option B — Bare Skill folder

Drop the skill folder into your personal skills directory (available across all your projects):

~/.claude/skills/pinepaper-studio/
├── SKILL.md
└── references/
    ├── mcp-tools.md
    ├── console-api.md
    └── capabilities.md

Get it via either:

# One-liner using the bare ZIP we ship
curl -fsSL https://pinepaper.studio/assets/skills/pinepaper-studio.zip -o /tmp/pp-skill.zip
unzip -o /tmp/pp-skill.zip -d ~/.claude/skills/

Or download pinepaper-studio.zip and extract it manually.

Project-only install: put the same folder under .claude/skills/ inside your repo and commit it. New skills are picked up within the session; a brand-new top-level skills directory may need a restart.

In Claude Code, there is no .skill/ZIP step — Claude reads the SKILL.md folder directly.

Install in Cowork (Claude desktop app)

  1. Open the Cowork tab, then Customize → Plugins.
  2. Click “+” → Add marketplace → Add from a repository, and point it at the PinePaper marketplace repo (GitHub repo or git URL).
  3. Find PinePaper in the list and click Install.

Plugins you add are saved locally to your computer. Skills from the plugin then appear in the “/” menu and trigger automatically.

Option B — Upload the Skill ZIP

  1. Go to Customize → Skills (open the Cowork tab first).
  2. Click “+” → “+ Create skill” → “Upload a skill.”
  3. Select pinepaper-studio.zip (the ZIP contains the skill folder at its root).
  4. Toggle the skill on. Uploaded skills are private to your account.

If you receive the skill as a .skill file, that’s simply a renamed ZIP — rename it to .zip before uploading via Customize → Skills.

⚠️ Cowork networking caveat (important for the MCP)

Claude Code runs on your machine, so a locally-run PinePaper MCP server works directly.

Cowork runs in Anthropic’s cloud. Connectors/MCP servers are reached over the public internet from Anthropic’s IP ranges — not your local network. So in Cowork the PinePaper MCP server must be reachable as a remote/public connector; a server bound only to localhost behind your firewall won’t be reachable. If you’re on Cowork and the MCP tools don’t respond, this is the most likely reason — expose the MCP server publicly (or use the human-in-the-loop console path below).

How it triggers

  • Automatic: describe the task naturally; Claude loads the Skill when your request matches its description.
  • Manual: type “/” (Cowork) or /<skill-name> (Claude Code) to invoke it directly — e.g. /pinepaper:pinepaper-studio.

If the MCP server isn’t connected, the Skill falls back to giving you complete, pasteable window.PinePaper console code to run in the editor’s Code Console.

Troubleshooting

Symptom Likely cause / fix
Claude returns an HTML/CSS animation instead of using PinePaper A “frontend-design”-style plugin is steering it to HTML. Make sure the PinePaper Skill is enabled; if it persists, disable the conflicting plugin.
MCP tools don’t respond in Cowork The MCP server isn’t publicly reachable from Anthropic’s cloud. Expose it remotely (see the caveat above) or use the console paste path.
createItem is undefined (or similar) Use the correct form: console app.create('circle', {…}), MCP batch op { "type": "create", "itemType": "circle", … }, or the pinepaper_create_item tool. There’s no createItem.
Items doubled on the canvas batch_execute was called more than once — every call is live. Run exactly one start_job → batch_execute → end_job; fix with modify/delete or a new job with clearCanvas: true.
An effect/animation/preset name is rejected Names are a fixed vocabulary validated by the server. Check the Skill’s reference files or ask the server live via pinepaper_tool_guide.
The Skill never triggers Confirm it’s enabled (Customize → Skills / Plugins), and that Code execution is on in Cowork. Invoke manually with “/”.

Security note

A Skill is instructions that can direct Claude to call tools. Only install Skills and plugins from sources you trust (the official PinePaper marketplace), and review the contents if you’re unsure.

Downloads

See also