Puck Skills

Agent Skills that teach AI coding assistants (Claude Code, Cursor, Codex, and others) how to work with Puck — the visual editor for React.

Skills

Skill	Description
puck	Integrate Puck into an application, new or existing, author a config from the app's own components, wire up editor and render routes, debug an integration, and add Puck AI.

Installation

skills CLI

npx skills add puckeditor/skills --skill "puck"

Add -g to install globally rather than into the current project.

Claude Code plugin

/plugin marketplace add puckeditor/skills
/plugin install puck

Manual symlink

git clone https://github.com/puckeditor/skills.git /path/to/puck-skills
ln -s /path/to/puck-skills/skills/puck /path/to/skills-directory/puck

Usage

Once installed, the agent picks the skill up when relevant — for example:

• "Add a page builder to this app"
• "Start a new Puck project with React Router"
• "Make our marketing components editable in Puck"
• "Puck components render unstyled in the editor"
• "Set up Puck AI"
• "Move this config off DropZone"

Prerequisites

Only @puckeditor/core and a React 18+ application. The skill installs it if it isn't present.

Puck AI additionally needs a Puck Cloud account with credit and a PUCK_API_KEY.

New projects are in scope too — the skill scaffolds from a create-puck-app recipe and then replaces the shortcuts the recipes ship with.

Contributing

Authoring conventions are in AGENTS.md; they're also the review criteria. Bugs and use-case requests: issues.

License

MIT