Pendo Guide Agent

A Claude Code skill for creating and editing Pendo in-app guides using browser automation.

What It Does

This skill allows Claude Code to automate Pendo guide creation and editing through the Chrome browser. It launches the Pendo Visual Design Studio directly on your application using the pendo.designerV2.launchInAppDesigner() console command.

Capabilities:

• Create new overlay guides (lightbox, tooltip, banner)
• Edit existing guides
• Add building blocks (text, buttons, images, videos, polls)
• Configure button actions and activation methods
• Consults a knowledge base when unsure how to proceed

Prerequisites

1. Claude Code installed and configured
2. Claude in Chrome MCP extension installed in Chrome
3. Pendo installed on your application
4. Logged into Pendo (visit app.pendo.io if needed)

Installation

1. Copy the skill to your Claude skills directory

mkdir -p ~/.claude/skills/pendo-guide
cp SKILL.md ~/.claude/skills/pendo-guide/

2. Copy the knowledge base

The knowledge_base/ folder contains Pendo documentation that the skill references when it needs help. Copy it to any project directory where you'll run Claude Code:

cp -r knowledge_base/ /path/to/your/project/

The skill looks for knowledge_base/INDEX.md relative to your current working directory.

3. Restart Claude Code

The skill will be available after restarting.

Usage

1. Navigate to your application

Open Chrome and go to the page in your application where you want to create a guide.

2. Invoke the skill

/pendo-guide

3. The skill will:

1. Check your browser context
2. Launch the Visual Design Studio via pendo.designerV2.launchInAppDesigner()
3. Help you create or edit guides using browser automation

Example prompts

Create a new guide:

/pendo-guide Create a welcome lightbox for new users that introduces the dashboard

Edit an existing guide:

/pendo-guide Edit the onboarding tour to add a step pointing to the settings menu

Create a feedback poll:

/pendo-guide Create a banner poll asking users to rate the new feature

How It Works

1. Checks browser context - Verifies you have a tab open on your application
2. Launches designer - Executes pendo.designerV2.launchInAppDesigner() via console
3. Automates the Visual Design Studio - Creates/edits guides via browser automation
4. Consults knowledge base - Reads documentation when unsure how to proceed

Key Command

The skill launches the Pendo designer with this JavaScript command:

pendo.designerV2.launchInAppDesigner()

This opens the Visual Design Studio directly on your application - no need to navigate to app.pendo.io.

Knowledge Base Structure

knowledge_base/
├── INDEX.md                 # Quick reference - skill checks here first
├── guides-overview.md       # Guide types and best practices
├── create-overlay-guide.md  # Step-by-step creation workflow
├── building-blocks.md       # Text, buttons, images, videos, polls
├── add-edit-content.md      # Layout management
├── button-actions.md        # Button behaviors
└── markdown-syntax.md       # Text formatting

Extending the Knowledge Base

To add more Pendo documentation:

1. Create a new .md file in knowledge_base/ with the documentation content
2. Give it a short, descriptive filename (e.g., segments.md)
3. Update INDEX.md with a reference to the new file in both the quick reference table and detailed guide map

Troubleshooting

Skill not appearing?

• Ensure SKILL.md is at ~/.claude/skills/pendo-guide/SKILL.md
• Restart Claude Code

pendo.designerV2 not found?

• Pendo may not be installed on this site
• You may need to login at app.pendo.io first

Browser automation failing?

• Check that Claude in Chrome extension is installed and connected
• Ensure Chrome is open with your application loaded

Skill getting confused?

• The skill automatically reads knowledge_base/INDEX.md when stuck
• Ensure the knowledge base files are accessible in your project

License

MIT