Skills

The plugin includes 18 skills — 14 framework and reference skills plus 4 workflow skills. They form the knowledge layer that commands, subagents, Codex workflows, and Cursor workflows rely on.

How skills load

Level	When loaded	What it contains
Metadata	Always (at startup)	Skill name and description
Instructions	When triggered by your prompt	Full SKILL.md content
Resources	As needed by instructions	Bundled reference files, code examples

The agent only loads what’s relevant. Multiple skills load in parallel when a task spans topics.

Framework integration skills

Skill	Framework	Integration pattern
`userplane-react`	React (Vite)	Provider component in `useEffect`
`userplane-nextjs`	Next.js (App Router)	`'use client'` provider component
`userplane-vue`	Vue 3 (Vite)	Vue plugin
`userplane-angular`	Angular 17+	`APP_INITIALIZER`
`userplane-nuxt`	Nuxt 3	`.client.ts` browser-only plugin
`userplane-astro`	Astro	Client-side `<script>` blocks
`userplane-sveltekit`	SvelteKit	`onMount` in root `+layout.svelte`
`userplane-tanstack-start`	TanStack Start	Search-param schema + provider
`userplane-static-html`	Static HTML	CDN script tags, no build step

Each skill covers the full integration: CDN quick start, npm SDK, URL parameter preservation, sensitive data, metadata, SSR safety, environment variables, and troubleshooting.

SDK and reference skills

Skill	Covers
`userplane-web-sdk`	`initialize()`, `open()`, `unmount()`, recording state, session IDs
`userplane-metadata-sdk`	`set()`, `metadata()`, `clearMetadata()`, URL parameter metadata
`userplane-cdn`	Script placement, CSP directives, redirect handling
`userplane-sensitive-data`	`data-userplane-blur`, meta tag blur, third-party compatibility
`userplane-best-practices`	Cross-cutting install, SDK, metadata, and privacy guidance

Workflow skills

Skill	Covers
`userplane-integrate`	Detect framework and install Userplane as concrete edits
`userplane-audit`	Read-only PASS/FAIL integration audit with suggested diffs
`userplane-debug`	Recording root-cause analysis through the workspace MCP
`userplane-privacy`	Read-only PII, blur, metadata, and CSP privacy audit

Example prompts

Add Userplane to this SvelteKit app. Use the npm package, not the CDN.

What arguments does initialize() accept? I want to pass a custom session ID and disable auto-open.

We use Stripe Elements for payment and Auth0 for login. What CSP headers do I need for Userplane to work alongside them?

How do I attach the logged-in user's ID to recordings without exposing their email address?

The Userplane iframe is blank in production but works in dev. What's likely wrong?

Framework detection

The /userplane:integrate and /userplane:audit commands auto-detect the framework by reading package.json.

Dependency	Skill loaded
`next`	`userplane-nextjs`
`nuxt`	`userplane-nuxt`
`@angular/core`	`userplane-angular`
`vue` (without nuxt)	`userplane-vue`
`@sveltejs/kit`	`userplane-sveltekit`
`astro`	`userplane-astro`
`@tanstack/react-start`	`userplane-tanstack-start`
`react` (with vite, no metaframework)	`userplane-react`
Top-level `index.html`, no bundler	`userplane-static-html`

Compatibility

Skills follow the open Agent Skills standard. They work with Claude Code (via plugin), Cursor, Windsurf, and any agent that supports the standard.

Claude Code users usually start with slash commands. Cursor users can use Cursor workflow commands. Codex users can invoke the workflow skills directly with $userplane-*.

Commands — the slash commands that use these skills.
Subagents — how each subagent loads skills.
Codex Workflows — direct workflow skill usage in Codex.
Cursor Workflows — slash commands that use the same workflows in Cursor.
Agent Skills — install skills via the Skills CLI for other agents.
Framework Guides — human-readable integration guides.

Help Desk

Extensions & Plugins

Model Context Protocol

How skills load

Framework integration skills

SDK and reference skills

Workflow skills

Example prompts

Framework detection

Compatibility

​How skills load

​Framework integration skills

​SDK and reference skills

​Workflow skills

​Example prompts

​Framework detection

​Compatibility

​Related articles

How skills load

Framework integration skills

SDK and reference skills

Workflow skills

Example prompts

Framework detection

Compatibility

Related articles