> ## Documentation Index
> Fetch the complete documentation index at: https://docs.userplane.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](/integrations/claude-code-commands), [subagents](/integrations/claude-code-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

<CodeGroup>
  ```text theme={null}
  Add Userplane to this SvelteKit app. Use the npm package, not the CDN.
  ```
</CodeGroup>

<CodeGroup>
  ```text theme={null}
  What arguments does initialize() accept? I want to pass a custom session ID and disable auto-open.
  ```
</CodeGroup>

<CodeGroup>
  ```text theme={null}
  We use Stripe Elements for payment and Auth0 for login. What CSP headers do I need for Userplane to work alongside them?
  ```
</CodeGroup>

<CodeGroup>
  ```text theme={null}
  How do I attach the logged-in user's ID to recordings without exposing their email address?
  ```
</CodeGroup>

<CodeGroup>
  ```text theme={null}
  The Userplane iframe is blank in production but works in dev. What's likely wrong?
  ```
</CodeGroup>

## 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](https://agentskills.io) standard. They work with Claude Code (via plugin), Cursor, Windsurf, and any agent that supports the standard.

<Note>
  Claude Code users usually start with [slash commands](/integrations/claude-code-commands). Cursor
  users can use [Cursor workflow commands](/integrations/cursor-workflows). Codex users can invoke
  the workflow skills directly with `$userplane-*`.
</Note>

## Related articles

* [Commands](/integrations/claude-code-commands) — the slash commands that use these skills.
* [Subagents](/integrations/claude-code-subagents) — how each subagent loads skills.
* [Codex Workflows](/integrations/codex-workflows) — direct workflow skill usage in Codex.
* [Cursor Workflows](/integrations/cursor-workflows) — slash commands that use the same workflows in Cursor.
* [Agent Skills](/developer/agent-skills) — install skills via the Skills CLI for other agents.
* [Framework Guides](/frameworks/react) — human-readable integration guides.