Skills

18 Userplane skills that give AI agents built-in knowledge for framework integration, SDK usage, privacy, and workflows

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-*.

Related articles

• 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.