Syncfusion PDF Viewer Skills are specialized instruction sets that teach AI assistants how to generate code for PDF viewing applications across multiple platforms. These skills follow the Agent Skills open standard and are designed to work seamlessly across AI agents like GitHub Copilot and Code Studio.
This repository contains AI-ready skills that empower AI agents to generate production-ready code for embedding Syncfusion PDF Viewer components into your applications. Each skill provides platform-specific code generation capabilities, enabling your AI to create code snippets for viewing, annotating, searching, and managing PDF documents across web, mobile, and desktop platforms.
- Blazor PDF Viewer - Interactive PDF viewing in Blazor Server and WebAssembly with full annotation support, form filling, text search, redaction, custom toolbar configuration, and event handling
- React PDF Viewer - Modern PDF viewer for React applications with TypeScript support, comprehensive annotation tools, form designer, text search/selection, bookmark navigation, thumbnail view, and print/download capabilities
- ASP.NET Core PDF Viewer - PDF viewing for ASP.NET Core applications with local PDF hosting, toolbar customization, text search, annotations, form filling, and event hooks.
- ASP.NET MVC PDF Viewer - PDF viewing for ASP.NET MVC applications with local PDF hosting, toolbar customization, text search, annotations, form filling, and event hooks.
- Angular PDF Viewer – Enterprise-grade PDF viewer for Angular applications with toolbar customization, annotations, form fields, text search/selection, bookmarks, thumbnails, redaction, page organization, print/download, and full API access
- Vue PDF Viewer – PDF viewer for Vue applications with annotations, form filling and form designer, text search/selection, toolbar customization, page organizer, magnification, navigations, redaction.
- JavaScript PDF Viewer – PDF viewer for JavaScript (ES6) applications with annotations, form filling and form designer, text search/selection, toolbar customization, page organizer, magnification, navigations, redaction.
- Blazor Smart PDF Viewer - Intelligent PDF viewer powered by AI with document summarizer, smart form filling, smart redaction with Blazor PDF Viewer.
- Flutter PDF Viewer - Native PDF viewing for iOS and Android with text search, annotations (text markup, sticky notes), form filling, signature pad integration, bookmark navigation, password-protected PDF support, and localization
- .NET MAUI PDF Viewer - Cross-platform PDF viewer for Android, iOS, Windows, and macOS with ink annotations, shapes, stamps, text markups, form validation, electronic signatures, redaction, and custom toolbar support
- UWP PDF Viewer - Native Universal Windows Platform PDF viewer (
SfPdfViewerControl) with full annotation support (text markup, shapes, ink, free text, stamp), form field interaction, text search/selection, bookmark/hyperlink navigation, printing, custom toolbar layouts for desktop and mobile, localization, page image export, and PDFium renderer support - WPF PDF Viewer - Feature-rich PDF viewer for Windows desktop applications with annotation tools, magnification, text selection, search, bookmark/hyperlink navigation, printing, theming, and localization support
- Windows Forms PDF Viewer - Traditional Windows Forms PDF viewer with essential operations including loading, saving, printing, text extraction, search, bookmark navigation, zoom controls, and theming
Step 1: Checkout and copy the required skills
Clone or download the PDF-Viewer-SDK-Skills repository and copy the platform-specific skills you need (e.g., syncfusion-blazor-pdf-viewer, syncfusion-react-pdf-viewer, syncfusion-maui-pdf-viewer) from the skills/ directory.
Step 2: Install the skills
Place the copied skill folders in your workspace following this structure:
your-workspace/
├── .github/skills/ # or .claude/skills/ or .codestudio/skills/
│ ├── syncfusion-blazor-pdf-viewer/
│ │ └── SKILL.md
│ ├── syncfusion-react-pdf-viewer/
│ │ └── SKILL.md
│ ├── syncfusion-aspnetcore-pdf-viewer/
│ │ └── SKILL.md
│ ├── syncfusion-aspnetmvc-pdf-viewer/
│ │ └── SKILL.md
│ ├── syncfusion-angular-pdf-viewer/
│ │ └── SKILL.md
| ├── syncfusion-vue-pdf-viewer/
│ │ └── SKILL.md
| ├── syncfusion-javascript-pdf-viewer/
│ │ └── SKILL.md
│ ├── syncfusion-flutter-pdf-viewer/
│ │ └── SKILL.md
│ ├── syncfusion-maui-pdf-viewer/
│ │ └── SKILL.md
│ ├── syncfusion-uwp-pdf-viewer/
│ │ └── SKILL.md
│ ├── syncfusion-wpf-pdf-viewer/
│ │ └── SKILL.md
│ ├── syncfusion-winforms-pdf-viewer/
│ | └── SKILL.md
│ └── syncfusion-blazor-smart-pdf-viewer/
│ └── SKILL.md
├── your-project-files...
└── App.tsx / Program.cs / MainPage.xaml / etc.
Each skill directory must contain a SKILL.md file that defines the skill's behavior and capabilities.
Step 3: Verify and manage your skills
Type /skills in the GitHub Copilot or Code Studio chat to quickly access the Configure Skills menu and manage your installed skills.
Step 4: Use skills
There are two ways to use skills:
-
Automatic loading - Simply describe your task naturally, and your AI Agent automatically loads the relevant skill:
Add a PDF viewer to my Blazor app with toolbar customization Show me how to implement text search in React PDF viewer Create a MAUI PDF viewer with annotation support -
Slash commands - Type
/in the GitHub Copilot chat to mention available skills. For example:/syncfusion-blazor-pdf-viewer Add PDF viewer with custom toolbar /syncfusion-react-pdf-viewer Implement form filling features /syncfusion-maui-pdf-viewer Add signature support to PDF viewer /syncfusion-uwp-pdf-viewer Load a PDF from StorageFile with annotation support
When a skill is loaded, the AI Agent gains specialized knowledge of the platform-specific PDF Viewer component and can help you generate accurate, production-ready code.
For .NET Platforms (Blazor, MAUI, WPF, WinForms):
# .NET SDK 8+
dotnet --versionFor React:
# Node.js 14.0.0+
node --version
# NPM or Yarn
npm --versionFor Flutter:
# Flutter 3.x+
flutter --versionPlace your license key in SyncfusionLicense.txt at the workspace root, or set the environment variable:
# Windows
set SYNCFUSION_LICENSE_KEY=your_key_here
# macOS/Linux
export SYNCFUSION_LICENSE_KEY=your_key_hereGet a free license: Syncfusion Community License
Blazor PDF Viewer:
dotnet add package Syncfusion.Blazor.SfPdfViewerReact PDF Viewer:
npm install @syncfusion/ej2-react-pdfviewer --saveASP.NET Core PDF Viewer:
dotnet add package Syncfusion.EJ2.PdfViewer.AspNet.CoreASP.NET MVC PDF Viewer:
dotnet add package Syncfusion.EJ2.MVC5Angular PDF Viewer:
npm install @syncfusion/ej2-angular-pdfviewer --saveVue PDF Viewer:
npm install @syncfusion/ej2-vue-pdfviewer --saveJavaScript (ES6) PDF Viewer:
npm installFlutter PDF Viewer:
# Add to pubspec.yaml
dependencies:
syncfusion_flutter_pdfviewer: ^latest_version.NET MAUI PDF Viewer:
dotnet add package Syncfusion.Maui.PdfViewerWPF PDF Viewer:
dotnet add package Syncfusion.PdfViewer.WPFUWP PDF Viewer:
Syncfusion.SfPdfViewer.UWP (via NuGet or manual assembly reference)
WinForms PDF Viewer:
dotnet add package Syncfusion.PdfViewer.WindowsBlazor Smart PDF Viewer:
dotnet add package Syncfusion.Blazor.SfSmartPdfViewerAll PDF Viewer skills generate production-ready code that you integrate directly into your application. The AI assistant produces platform-specific code snippets (C#, TypeScript/JSX, Dart, XAML) based on your requirements and inserts them into your project files.
This mode is ideal when you want to:
- Learn how to implement specific PDF viewer features
- Integrate PDF viewing capabilities into your existing application
- Customize the PDF viewer for your specific use case
- Understand the API and component structure
Trigger keywords: "code", "snippet", "how to", "show me", "sample", "example", "integrate", "add", "implement"
# Basic Setup
Show me how to add a Blazor PDF viewer to my Home.razor page
Add a basic PDF viewer component with document loading
# Features
How do I implement text search with custom highlight colors in Blazor PDF viewer?
Add annotation toolbar with circle and highlight tools to the PDF viewer
Show me how to implement form filling and validation in the PDF viewer
Create a custom toolbar with only download and print buttons
# Basic Setup
Add a React PDF viewer component to App.tsx
Show me how to load a PDF from URL in React
# Features
Implement bookmark navigation in React PDF viewer
Add form designer functionality with text and checkbox fields
Show me how to implement text selection and copy in React PDF viewer
Create custom context menu for the PDF viewer
# Basic Setup
Add a PDF viewer to my ASP.NET Core application
Show me how to add a PDF Viewer component to Index.cshtml
# Features
How do I implement text search with custom highlight colors in ASP.NET Core PDF viewer?
Create a custom toolbar with only navigation and magnification options
Show me how to implement form filling and validation in the PDF viewer
Disable bookmark navigation and thumbnails in the PDF viewer
# Basic Setup
Add a PDF viewer to my ASP.NET MVC application
Add a basic PDF Viewer component with document loading event to Index.cshtml
# Features
Show me how to add annotations programmatically in MVC PDF Viewer.
Create a customized search functionalities with MVC PDF Viewer APIs.
Disable the annotation and form designer modules from MVC PDF Viewer.
How to add open and download options only in toolbar for PDF Viewer.
# Basic Setup
Add Angular PDF viewer component to app.ts
Provide code to set up the Syncfusion Angular PDF Viewer
# Features
How do I load a PDF from a remote URL using documentPath ?
Provide code to download/save the PDF programmatically.
How do I trigger print programmatically and disable the toolbar print button ?
Provide code to add a highlight annotation programmatically
# Basic Setup
Add Vue PDF viewer component to my vue sample
Provide code to set up the Syncfusion Vue PDF Viewer in the sample
# Features
How to add the print option externally in the Vuew PDF Viewer.
Show me how to add form fields programmatically in PDF Viewer.
Provide code for annotation add and delete events triggered in PDF Viewer.
How to show shape and calibrate annotations only in annotation toolbar in PDF Viewer.
# Basic Setup
Add Javscript PDF viewer component to my Javascript sample
Provide code to set up the Syncfusion JavaScript PDF Viewer in the sample
# Features
Show me how to add islock as true for all the annotation in Javascript PDF Viewer.
Provide code for add free text annotation programmtically in PDF Viewer.
How to add customized option for zoom in and zoom out in toolbar.
Implement the document loaded event with document name in PDF Viewer.
# Basic Setup
Add SfPdfViewer widget to my Flutter app
Show me how to load a PDF from assets in Flutter
# Features
Implement text search with next/previous navigation in Flutter PDF viewer
Add signature pad for form field signing
Show me how to handle password-protected PDFs in Flutter
Implement text markup annotations (highlight, underline, strikethrough)
# Basic Setup
Add SfPdfViewer to MainPage.xaml
Show me how to load PDF from file picker in MAUI
# Features
Implement ink annotation with custom colors in MAUI PDF viewer
Add electronic signature functionality to the PDF viewer
Show me how to implement form field validation and export
Create custom toolbar for mobile and desktop platforms
# Basic Setup
Add PdfViewerControl to MainWindow.xaml
Show me how to load a PDF document in WPF
# Features
Implement magnification and zoom controls in WPF PDF viewer
Add text selection and extraction functionality
Show me how to implement bookmark and hyperlink navigation
Create custom annotation tools (circle, arrow, highlight)
# Basic Setup
Add SfPdfViewerControl to UWP MainPage
Show me how to load a PDF from a StorageFile in UWP
# Features
Implement text search with next/previous navigation in UWP PDF viewer
Add annotation toolbar with highlight and ink tools
Create a custom toolbar with print and download commands
How do I export PDF pages as images in UWP?
Implement bookmark navigation in UWP PDF viewer
# Basic Setup
Add PdfViewerControl to Form1
Show me how to load and display a PDF in WinForms
# Features
Implement text search with highlight in WinForms PDF viewer
Add print functionality with custom page settings
Show me how to extract text with line and word bounds
Switch between selection and pan interaction modes
# Basic Setup
Add Smart PDF Viewer Component to my Home.razor page
Provide code to set up the Syncfusion Smart PDF Viewer in the sample
# Features
How to enable the smart redaction option in smart PDF Viewer.
Provide code to redact the name in the document in smart PDF Viewer.
Implement the code for summarizer option in smart PDF Viewer.
Show to how to enable the smart fill option in smart PDF Viewer.
| Issue | Solution |
|---|---|
| License Watermark | Add key to SyncfusionLicense.txt or use env var SYNCFUSION_LICENSE_KEY |
| Missing NuGet package | Run the appropriate package installation command for your platform |
| Component not rendering | Ensure package is installed and namespace is correctly imported |
| PDF not loading | Check file path, URL accessibility, or stream validity |
| CORS error (web) | Configure server to allow cross-origin requests for PDF documents |
| Feature not working | Verify the feature is supported on your target platform |
- Blazor PDF Viewer Documentation
- React PDF Viewer Documentation
- ASP.NET Core PDF Viewer Documentation
- ASP.NET MVC PDF Viewer Documentation
- Angular PDF Viewer Documentation
- Vue PDF Viewer Documentation
- JavaScript (ES6) PDF Viewer Documentation
- Flutter PDF Viewer Documentation
- .NET MAUI PDF Viewer Documentation
- WPF PDF Viewer Documentation
- UWP PDF Viewer Documentation
- WinForms PDF Viewer Documentation
- Blazor Smart PDF Viewer Documentation
Syncfusion PDF Viewer components require a commercial license for production use. A free Community License is also available for individual developers and small businesses.
