Skip to main content
The plugin includes 14 skills — the knowledge layer that commands and subagents rely on. Skills also activate directly from natural-language prompts.

​
How skills load

LevelWhen loadedWhat it contains
MetadataAlways (at startup)Skill name and description
InstructionsWhen triggered by your promptFull SKILL.md content
ResourcesAs needed by instructionsBundled reference files, code examples
The agent only loads what’s relevant. Multiple skills load in parallel when a task spans topics.

​
Framework integration skills

SkillFrameworkIntegration pattern
userplane-reactReact (Vite)Provider component in useEffect
userplane-nextjsNext.js (App Router)'use client' provider component
userplane-vueVue 3 (Vite)Vue plugin
userplane-angularAngular 17+APP_INITIALIZER
userplane-nuxtNuxt 3.client.ts browser-only plugin
userplane-astroAstroClient-side <script> blocks
userplane-sveltekitSvelteKitonMount in root +layout.svelte
userplane-tanstack-startTanStack StartSearch-param schema + provider
userplane-static-htmlStatic HTMLCDN 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

SkillCovers
userplane-web-sdkinitialize(), open(), unmount(), recording state, session IDs
userplane-metadata-sdkset(), metadata(), clearMetadata(), URL parameter metadata
userplane-cdnScript placement, CSP directives, redirect handling
userplane-sensitive-datadata-userplane-blur, meta tag blur, third-party compatibility
userplane-best-practicesCross-cutting install, SDK, metadata, and privacy guidance

​
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.
DependencySkill loaded
nextuserplane-nextjs
nuxtuserplane-nuxt
@angular/coreuserplane-angular
vue (without nuxt)userplane-vue
@sveltejs/kituserplane-sveltekit
astrouserplane-astro
@tanstack/react-startuserplane-tanstack-start
react (with vite, no metaframework)userplane-react
Top-level index.html, no bundleruserplane-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.
Commands and subagents are Claude Code plugin features. In other agents, skills activate through natural-language prompts.
  • Commands — the slash commands that use these skills.
  • Subagents — how each subagent loads skills.
  • Agent Skills — install skills via the Skills CLI for other agents.
  • Framework Guides — human-readable integration guides.