skills.rest
mattwoodco
mattwoodcoCOMMUNITY
Explore all skills by this author →
Website𝕏@mattwoodcoGitHub

pdf-viewer

Render PDF documents with page navigation, zoom, and highlight overlays.

3|Updated Feb 14, 2026
Search Tags:#pdf#react#rendering#next.js#viewer#highlighting
One-click install
npx skills add https://github.com/mattwoodco/skills --skill pdf-viewer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pdf-viewer
Source: https://github.com/mattwoodco/skills/tree/main/v1-skills/pdf-viewer
Command: npx skills add https://github.com/mattwoodco/skills --skill pdf-viewer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires add-shadcn, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides a robust solution for rendering PDF documents within a web application, enabling interactive features like page navigation, zoom control, and programmatic highlighting of specific text regions.

Core Features & Use Cases

  • PDF Rendering: Displays PDF documents with accurate page rendering.
  • Interactive Controls: Allows users to navigate between pages and adjust zoom levels.
  • Highlighting: Supports programmatic highlighting of text regions with customizable colors and automatic scrolling to active highlights.
  • Use Case: Integrate this skill into a research platform to allow users to view cited PDF documents, with specific citations automatically highlighted and scrolled into view.

Quick Start

Use the pdf-viewer skill to display the document located at '/path/to/document.pdf' with the highlight 'citation-123' active.

Frequently Asked Questions about pdf-viewer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render a PDF in Next.js with interactive page navigation and zoom?▼

To render a PDF in Next.js with page navigation and zoom, use react-pdf and pdfjs-dist to display documents and apply interactive controls. This enables accurate page rendering and zoom level adjustments within a web application.

Can I programmatically highlight text in a PDF viewer using React?▼

Yes, you can programmatically highlight text in a PDF viewer using React by positioning percentage-based overlays on specific regions. This supports customizable highlight colors and an imperative ref API for automatic scrolling.

Does interactive PDF highlighting work with the Next.js App Router?▼

Interactive PDF highlighting works with the Next.js App Router by utilizing react-pdf, pdfjs-dist, and shadcn/ui components. It requires this specific App Router environment to properly position overlays and manage scrolling.

What is the best way to scroll to a specific citation inside a rendered PDF?▼

The best way to scroll to a specific citation inside a rendered PDF is using an imperative ref API to scroll to highlights by ID. This automatically brings active citation overlays into view.

Do I need shadcn/ui to display PDF documents with highlight overlays?▼

Yes, you need shadcn/ui components to display PDF documents with highlight overlays. The viewer depends on shadcn/ui alongside react-pdf and pdfjs-dist to facilitate the citation UX and interactive controls.

Related Skills

Explore More Software Engineering Skills→
trusted-americantrusted-american

pdf-tools

Create, edit, and render PDFs client-side with pdf-lib and pdfjs-dist.

Official
Advanced
FuZhiyuFuZhiyu
8

zotero-paper-reader

Retrieve and analyze academic papers from a Zotero library with citations and BibTeX export.

Community
Advanced
googlegoogle
455

uiblocks

Design interactive 3D user interfaces for XR Blocks with Three.js and uikit.

Official
Advanced
hhhh124hhhhhhhh124hhhh
8

canvas-design

Create and export HTML5 Canvas designs as PNG or PDF.

Community
Basic