Produktly agent skill
The Produktly agent skill teaches a coding agent — Claude Code, Cursor, GitHub Copilot, or any tool that supports skills — how to set Produktly up in your codebase and build onboarding with it.
Where the MCP server gives an agent the tools, the skill gives it the playbook: which snippet to add for your framework, where to call identifyUser, how to pick CSS selectors that survive a redesign, and when to leave something as a draft for you to review.
Why use it
An agent working inside your repository can do things no dashboard can:
- Install Produktly correctly the first time — it can see whether you're on Next.js app router or a plain HTML page, and place the snippet accordingly.
- Wire user identification where your auth actually lives — not a generic snippet you adapt by hand.
- Add stable selectors instead of guessing at them. This is the big one. Rather than targeting a fragile class name, the agent adds a
data-produktly="new-project-button"attribute to your component and targets that. Your tours then survive redesigns, because the anchor is part of your code.
Install
The skill is a small folder of markdown files: download produktly-skill.zip.
You can also read the files individually: SKILL.md, install.md, identify.md, selectors.md, widgets.md.
Claude Code
Unzip it into your skills directory:
mkdir -p .claude/skills
curl -sL https://produktly.com/docs/agent-skill/produktly-skill.zip -o produktly-skill.zip
unzip produktly-skill.zip -d .claude/skills/
rm produktly-skill.zipPut it at .claude/skills/produktly/ to share it with your team through version control, or at ~/.claude/skills/produktly/ to have it available in every project.
Other agents
Most skill-aware agents read a similar folder convention — check your tool's documentation for where skills live. The content is plain markdown with no tool-specific syntax, so it works anywhere an agent can read files.
Without a skill-aware agent
Everything the skill teaches is also available through the MCP server itself, via the get_setup_guide tool:
get_setup_guide(topic: "install" | "identify" | "selectors" | "widgets")Ask your assistant to "read the Produktly setup guide for install" and it will fetch the same content. This is the path for chat assistants and any client without skill support.
What's in it
| File | Covers |
|---|---|
SKILL.md | The end-to-end workflow and when to use it |
references/install.md | The script snippet, per-framework placement, CSP hosts, verification |
references/identify.md | identifyUser signature, when to call it, server-side sync |
references/selectors.md | Choosing selectors that survive redesigns |
references/widgets.md | Tours vs checklists, targeting, the draft → publish flow |
The workflow it follows
- Connect — register the MCP server if it isn't already, using an API key from Settings → API keys.
- Install — detect whether Produktly is already installed; if not, add the snippet for your stack.
- Identify — wire
identifyUserinto your auth flow with the attributes you want to target on. - Author — add stable
data-produktlyattributes where needed, then create widgets as drafts: tours, checklists, smart tips, announcements, micro surveys, NPS widgets, feedback widgets or changelog posts. - Review — hand you the
dashboardUrlfrom each response so you can see the result in the builder before it goes live. - Publish — only when you ask.
Drafts by default
Widgets the agent creates are drafts unless it is explicitly told to publish, and drafts never render on your site. The skill tells the agent to hand you the dashboardUrl from each response so you can review the result in the builder, and to publish only when you ask. In practice that means you can let it work freely and keep the final say on what your users see.
Example prompts
Once the skill and MCP server are in place:
- "Set up Produktly in this project and identify logged-in users with their plan and signup date."
- "Build a welcome tour for the dashboard. Add data-produktly attributes to the components you target."
- "Create an onboarding checklist that mirrors our activation steps: create a project, invite a teammate, connect a data source."
- "The tour step pointing at the old Settings button is broken after the redesign — find the new element and fix the selector."