Agent skills for @react-pdf-kit/viewer. Install with
npx skills add react-pdf-kit/agent-skillsand let your AI coding agent integrate the React PDF Kit library correctly on the first attempt.
This repository is a curated catalog of agent skills that teach AI coding agents (Claude Code, Cursor, OpenCode, Codex, and anything else that follows the same convention) how to set up, customize, and troubleshoot the React PDF Kit viewer across the React, Next.js, and Vite ecosystems. Skills are installed via the open-source vercel-labs/skills CLI.
- Developers using AI coding agents to build with React PDF Kit, who want first-attempt-correct integration code without spending time debugging peer-dependency and bundler interop issues.
- AI coding agents themselves: every skill here is authored to the
agentskills.io specification and is
retrievable by both
npx skills findand direct GitHub shorthand.
npx skills find "react pdf kit"You'll get a ranked list of skills with each skill's name,
description, and supported version range.
Install one skill (recommended):
npx skills add react-pdf-kit/agent-skills#react-pdf-kit-nextjs-app-routerInstall the whole catalog:
npx skills add react-pdf-kit/agent-skillsBy default skills are installed into your project's agent-specific
directory (e.g., .claude/skills/ for Claude Code, .agents/skills/ for
Cursor / OpenCode / Codex). Add -g for global installation.
With the skill installed, your agent activates it automatically when you
ask about React PDF Kit. Example prompt: "Add a PDF viewer for
report.pdf to my Next.js project."
| Tool | Invocation |
|---|---|
| npm | npx skills add … |
| pnpm | pnpm dlx skills add … |
| yarn (1.x) | yarn dlx skills add … |
| bun | bunx skills add … |
The catalog is populated as skills are merged. Each row links to the
skill's SKILL.md. Per-skill compatibility (React PDF Kit and
pdfjs-dist version ranges) lives in each skill's YAML frontmatter
under metadata.react_pdf_kit_version and
metadata.pdfjs_dist_version.
| Skill | Description |
|---|---|
react-pdf-kit-setup |
Set up @react-pdf-kit/viewer in a generic React app using the canonical provider chain. |
react-pdf-kit-nextjs-app-router |
Integrate @react-pdf-kit/viewer into a Next.js App Router project with a client boundary and dynamic import. |
react-pdf-kit-nextjs-pages-router |
Integrate @react-pdf-kit/viewer into a Next.js Pages Router project with SSR-safe dynamic import. |
react-pdf-kit-vite |
Integrate @react-pdf-kit/viewer into a Vite project (works out of the box, no special config). |
react-pdf-kit-worker-config |
Override the pdfjs-dist version and configure the worker via the RPConfig workerUrl prop (Vite, Turbopack, webpack). |
react-pdf-kit-toolbar-customization |
Add, remove, or replace individual toolbar tools while preserving Radix-based accessibility. |
react-pdf-kit-custom-layout |
Build a headless / custom layout for the viewer using only the documented hooks. |
react-pdf-kit-nextjs14-pdfjs-override |
Next.js 14 compatibility: v2 is unsupported there — upgrade to Next.js 15 (Turbopack) or use the legacy package. |
@react-pdf-kit/viewer v2 does not support Next.js 14 (its webpack
ESM interop breaks pdfjs-dist@5). The supported paths are to upgrade
to Next.js 15 (with Turbopack), or to stay on Next.js 14 with the
legacy @pdf-viewer/react
package. Install the compatibility skill for the full breakdown:
npx skills add react-pdf-kit/agent-skills#react-pdf-kit-nextjs14-pdfjs-overrideThese behaviors are governed by the upstream vercel-labs/skills CLI; reading them here helps you interpret errors quickly.
no matching skillafternpx skills add <name>: the name is wrong or the skill has been renamed. Symptom: CLI exits non-zero with a "no matching skill" line. Response: runnpx skills find <keyword>and pick the exactnamefrom the result list.- Network failure during
add: the CLI fails fast with the underlying transport error and does not leave a partial install. Response: retry once the network is restored. There is no recovery step needed. - Re-install of an already-installed skill: the CLI prompts before
overwriting (or refuses if
--yesis not set). Response: either confirm overwrite (you lose local edits to the installed copy) or decline and uninstall the existing copy first withnpx skills remove <name>.
For issues with the content of a skill (incorrect code, missing gotchas, stale version range), open an issue in this repository.
The transcript below is a representative session showing the
discover, install, ask flow. It is the same flow the spec's SC-001
trial protocol exercises (see
specs/001-react-pdf-kit-skills/tasks.md T041). Replace this example
with an anonymized real session captured during T041 once that runs.
$ pnpm create next-app@latest my-pdf-app -- --ts --eslint --app --no-tailwind --no-src-dir --turbo
... (Next.js scaffold completes)
$ cd my-pdf-app
$ npx skills find "react pdf kit next.js"
react-pdf-kit-nextjs-app-router Integrate @react-pdf-kit/viewer (>=2.0.0 <3.0.0) into a Next.js...
react-pdf-kit-nextjs14-pdfjs-override Next.js 14 compatibility: v2 is unsupported there — upgrade to 15...
react-pdf-kit-nextjs-pages-router Integrate @react-pdf-kit/viewer (>=2.0.0 <3.0.0) into a Next.js Pages...
react-pdf-kit-worker-config Override the pdfjs-dist version and configure the worker URL...
$ npx skills add react-pdf-kit/agent-skills#react-pdf-kit-nextjs-app-router
Installed react-pdf-kit-nextjs-app-router into .claude/skills/
$ # Open Claude Code (or your agent of choice) and ask:
> Add a PDF viewer to /document/[id] that loads /api/documents/[id].pdf.
# Agent activates the skill, installs @react-pdf-kit/viewer (pdfjs-dist
# comes along as a peer dep), generates the client-only provider chain
# (RPConfig handles the worker) and a page using the dynamic-import +
# ssr:false pattern, then runs `pnpm install` then
# `pnpm build`. Build is green; navigating to /document/test renders
# the first PDF page.
The same shape works under Cursor, OpenCode, and Codex. The CLI routes the install into the right per-agent directory automatically.
This catalog is not currently accepting external contributions. The maintainers are still validating the v1 catalog end to end and the contribution workflow has not been opened up yet.
If you'd like to request a new skill, report an incorrect recipe, or flag a stale version range, please open an issue. We'll triage it and either author the skill in-house or revisit the contribution surface once the v1 verification protocol is settled.
See MAINTENANCE.md for the release runbook, versioning policy, deprecation flow, and skills.sh submission tracker.
- react-pdf-kit/viewer: the React PDF Kit library this catalog teaches.
- agentskills.io: the agent-skills standard.
- vercel-labs/skills: the
open-source
npx skillsCLI implementing the standard.