AI Agent Skills for React PDF Kit

AI Agent Skills

React PDF Kit publishes a list of AI Agent Skills at react-pdf-kit/agent-skills. These are small, focused SKILL.md files that teach AI coding assistants (Claude Code, Cursor, OpenCode, Codex, and any tool that follows the agentskills.io specification) how to integrate @react-pdf-kit/viewer correctly the first time.

Skills are installed into your project with the open-source vercel-labs/skills CLI, typically via a single npx skills add command. Your AI assistant then produces the right component nesting, the right peer-dependency setup, the right bundler-specific worker config, and the right Next.js 14 override without further prompting.

What’s in the Skills List

Skill	What it covers
`react-pdf-kit-setup`	Install, peer deps, the canonical `RPConfig`, `RPProvider`, `RPLayout`, `RPPages` chain, worker config for a generic React app
`react-pdf-kit-nextjs-app-router`	Next.js 13+ App Router: `'use client'` boundary, dynamic import, worker URL via `new URL(..., import.meta.url)`
`react-pdf-kit-nextjs-pages-router`	Next.js Pages Router: SSR-safe `next/dynamic` import with `ssr: false`, `_app.tsx` notes
`react-pdf-kit-vite`	Vite 5 + worker integration, ESM import order, `optimizeDeps` tweak
`react-pdf-kit-worker-config`	PDF.js worker URL across every supported bundler (Vite, Turbopack, webpack), CDN-hosted and self-hosted recipes, CSP `worker-src` notes
`react-pdf-kit-toolbar-customization`	Add, remove, or replace individual toolbar tools while preserving Radix-based accessibility
`react-pdf-kit-custom-layout`	Headless usage: replace `RPLayout` entirely while keeping `RPProvider` and `RPPages`, using only the documented hooks
`react-pdf-kit-nextjs14-pdfjs-override`	Override `pdfjs-dist` to v4 to work around the Next.js 14 webpack ESM bug

Each skill is a self-contained markdown file with YAML frontmatter (name, description, supported react_pdf_kit_version / pdfjs_dist_version semver ranges) and concise procedure. The format follows the agentskills.io specification, so any AI assistant can read them.

Quickstart

Discover the available skills from the project that uses @react-pdf-kit/viewer:
- bun
- npm
- pnpm
- yarn
Terminal window
bunx skills find "react pdf kit"
Terminal window
npx skills find "react pdf kit"
Terminal window
pnpm dlx skills find "react pdf kit"
Terminal window
yarn dlx skills find "react pdf kit"
You’ll get a ranked list of skills with their name, description, and supported library version range.

Install one skill (recommended, since this only pulls what you need):

bunx skills add react-pdf-kit/agent-skills#react-pdf-kit-nextjs-app-router

npx skills add react-pdf-kit/agent-skills#react-pdf-kit-nextjs-app-router

pnpm dlx skills add react-pdf-kit/agent-skills#react-pdf-kit-nextjs-app-router

yarn dlx skills add react-pdf-kit/agent-skills#react-pdf-kit-nextjs-app-router

Or install every skill in the list:

bunx skills add react-pdf-kit/agent-skills

npx skills add react-pdf-kit/agent-skills

pnpm dlx skills add react-pdf-kit/agent-skills

yarn dlx skills add react-pdf-kit/agent-skills

Ask your assistant. With the skill installed, your AI activates it automatically when you ask about React PDF Kit. Try a prompt like:

Add a PDF viewer for report.pdf to my Next.js project.

The generated code should compile and render the first PDF page on the first attempt.

Per-Agent Destination Paths

The CLI handles per-agent routing. You don’t need to know these paths to use the skills list. They’re listed here for reference if you want to inspect what was installed.

Agent	Project install path	Global install path
Claude Code	`.claude/skills/`	`~/.claude/skills/`
Cursor	`.agents/skills/`	`~/.cursor/skills/`
OpenCode	`.agents/skills/`	`~/.config/opencode/skills/`
Codex	`.agents/skills/`	`~/.codex/skills/`

Cross-agent compatibility is achieved because every skill is authored to the shared agentskills.io specification. There are no per-agent forks.

How a Skill Activates

Once installed, your assistant loads the skill whose description matches your intent. Examples:

“Add a PDF viewer to my Next.js 14 app” → react-pdf-kit-nextjs14-pdfjs-override runs first, then react-pdf-kit-nextjs-app-router (or react-pdf-kit-nextjs-pages-router if you’re on the Pages Router).
“Build a custom toolbar with only zoom and print” → react-pdf-kit-toolbar-customization loads.
“I want to replace the default layout entirely” → react-pdf-kit-custom-layout loads.
“Where does my PDF.js worker need to live for Vite?” → react-pdf-kit-worker-config loads.

You don’t have to memorize skill names. The descriptions are written to match natural phrasing.

Verifying the Install

Ask your assistant to set up @react-pdf-kit/viewer in your project. The generated code should:

Use the canonical provider chain RPConfig, RPProvider, RPLayout, RPPages in that order. RPTheme is optional and slots in between RPProvider and RPLayout when explicit theming control is needed.
Install both @react-pdf-kit/viewer and the pdfjs-dist peer dependency at the right major version.
Configure the PDF.js worker via new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString() (or the framework-specific equivalent for Next.js).
Wrap the viewer in a container with an explicit height (otherwise virtualization can’t measure).
Not invent APIs, hooks, props, or CSS variables that don’t exist in the library at the declared version range.

If any of those are wrong, run npx skills list to confirm the skill actually installed.

Updating

To pull the latest version of any installed skill:

npx skills update

The skills list is versioned with git tags (vMAJOR.MINOR.PATCH); update resolves to the latest tagged release.

Removing

To uninstall a skill from your project:

npx skills remove react-pdf-kit-nextjs-app-router

This operates on your local install.