
syncfusion-angular-pdf-viewer
Implements the Syncfusion Angular PDF Viewer (PdfViewerComponent) for embedding, configuring, and loading PDF documents. Use this when rendering PDFs in an Angular application, embedding viewer controls, or generating TS/CSS code for PDF display and interaction.
- Installs
- 68
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/syncfusion/pdf-viewer-sdk-skills --skill syncfusion-angular-pdf-viewer- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads syncfusion-angular-pdf-viewer automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Syncfusion Angular PDF Viewer UI Sample Generator
Target package: @syncfusion/ej2-angular-pdfviewer
Mandatory 3-Step workflow (Strict Enforcement)
EVERY query MUST follow these steps sequentially:
STEP 1: Workspace Detection ? STEP 2: Read Reference File ? STEP 3: Generate Code
Blocking Rules
- NO code generation until Steps 1 & 2 are complete
- NO assumptions - Always verify workspace AND read reference files first
- NO undocumented APIs - Use ONLY APIs from reference files
Violation = STOP and restart with proper protocol
Mandatory Workflow
STEP 1: Workspace Detection (REQUIRED - DO THIS FIRST)
Execute these tools:
1. file_search: **/{package.json,angular.json,tsconfig.json}
2. list_dir: src/app/
3. read_file: package.json (if exists)
Report to user:
?? STEP 1 COMPLETE:
- Workspace: [Empty / Angular X.X project detected]
- Files found: [list]
- Decision: [Create new / Use existing]
STEP 2: Read Reference File (REQUIRED - DO THIS SECOND)
Execute these steps:
1. Match user query to Reference File Routing Guide below
2. Use read_file on: references\[filename].md
3. Extract ALL steps/APIs from reference file
Report to user:
?? STEP 2 COMPLETE:
- Reference file: [filename.md]
- Steps found: [list sequential steps]
- APIs validated: [list properties/methods used]
STEP 3: Generate Code (EXECUTE ONLY AFTER STEPS 1 & 2)
Validation checklist:
- Every API cross-referenced against reference file
- No invented/assumed properties used
- Angular patterns followed (component bindings, lifecycle hooks)
- If API not in reference file ? DELETE it
If feature not in reference file:
? FEATURE NOT SUPPORTED
The requested [feature/API] is not documented.
Available alternatives: [list from reference files]
Reference File Routing Guide
Core Setup
| User Query Keywords | Reference File | Purpose |
|---|---|---|
| "basic", "create sample", "getting started", "load PDF" | getting-started.md | Minimal PDFViewer setup |
| "configuration", "server settings", "locale" | general-properties.md | Core viewer properties |
| "disable", "hide features", "enable/disable", "read-only" | enable-properties.md | Feature toggles |
Navigation
| User Query Keywords | Reference File | Purpose |
|---|---|---|
| "page navigation", "next/previous page", "go to page" | page-navigation.md | Page controls |
| "bookmarks", "table of contents", "TOC", "outline" | bookmark-navigation.md | Bookmark navigation (use ViewChild) |
| "hyperlinks", "external links", "URL navigation" | hyperlink-navigation.md | Link handling |
| "thumbnails", "preview pages", "thumbnail panel" | thumbnail-navigation.md | Thumbnail panel |
Viewing & Interaction
| User Query Keywords | Reference File | Purpose |
|---|---|---|
| "zoom", "magnification", "fit to page", "scale" | magnification.md | Zoom controls |
| "text selection", "panning", "scroll mode" | interaction-mode.md | Interaction modes |
| "select text", "copy text" | text-selection.md | Text selection |
| "search", "find in PDF", "highlight search" | text-search.md | Search functionality |
Toolbar & Context Menu
| User Query Keywords | Reference File | Purpose |
|---|---|---|
| "customize toolbar", "hide toolbar items", "remove buttons" | toolbar-settings.md | Toolbar configuration |
| "show/hide toolbar dynamically", "toggle toolbar" | toolbar-methods.md | Programmatic toolbar control |
| "right-click menu", "context menu", "custom menu" | contextmenu.md | Context menu |
Annotations
| User Query Keywords | Reference File | Purpose |
|---|---|---|
| "annotation colors", "annotation styles", "customize annotations" | annotation-settings.md | Annotation appearance |
| "annotation events", "when annotation added", "annotation callbacks" | annotation-events.md | Annotation lifecycle |
| "annotation labels", "shape labels", "measurement labels" | shape-label-settings.md | Label customization |
| "ink annotation", "freehand drawing", "signature", "sketch", "handwritten notes" | ink-annotation.md | Ink annotations |
| "redaction", "redact content", "black out text" | redaction-annotation.md | Redaction annotations |
Forms
| User Query Keywords | Reference File | Purpose |
|---|---|---|
| "form field defaults", "form field styles" | form-field-settings.md | Form field config |
| "form field events", "field changes", "validation" | form-field-events.md | Form field events |
Document Actions
| User Query Keywords | Reference File | Purpose |
|---|---|---|
| "download PDF", "save PDF", "export" | download.md | Download functionality |
| "print PDF", "print document" | print.md | Print functionality |
| "reorder pages", "rotate pages", "add/remove pages" | organize-pages.md | Page manipulation |
Advanced
| User Query Keywords | Reference File | Purpose |
|---|---|---|
| "load programmatically", "API methods", "extract text" | api-methods.md | Programmatic control |
| "event list", "all events", "event reference" | events.md | Complete event list |
Toolbar Item Name Validation (CRITICAL)
When generating toolbar configurations:
- ALWAYS read
toolbar-settings.mdfirst - Use ONLY names from these sections:
- "Available Primary Toolbar Items"
- "Available Annotation Toolbar Items"
- "Available Form Designer Items"
- Character-by-character validation required - No typos allowed
Common mistakes to prevent:
- ?
AnotatetionEditTool? ?AnnotationEditTool - ?
CalibrationOption? ?CalibrateTool - ?
ShapeAnnotationOption? ?ShapeTool
Quick Start Example
Add the Angular PDF Viewer by using <ejs-pdfviewer> selector in the template section of the src/app/app.ts file to render the PDF Viewer component.
import { Component, OnInit } from '@angular/core';
import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
MagnificationService, ThumbnailViewService, ToolbarService,
NavigationService, TextSearchService, TextSelectionService,
PrintService, FormDesignerService, FormFieldsService,
AnnotationService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';
@Component({
selector: 'app-root',
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer id="pdfViewer"
[documentPath]='document'
[resourceUrl]='resource'
style="height:640px;display:block">
</ejs-pdfviewer>
</div>`,
imports: [ PdfViewerModule ],
providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
ThumbnailViewService, ToolbarService, NavigationService,
TextSearchService, TextSelectionService, PrintService,
AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
})
export class AppComponent implements OnInit {
public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
public resource: string = window.location.origin + "/assets/ej2-pdfviewer-lib";
ngOnInit(): void {
}
}
Settings Configurations
Rule 1: Simple Settings (1-3 properties) ? Inline
public annotationSelection = {
selectionBorderColor: 'blue',
resizerSize: 8
};
Rule 2: Complex Settings (4+ properties or enums) ? Import enums
import { AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-angular-pdfviewer';
public annotationSelection = {
selectionBorderColor: '#0000ff',
resizerSize: 8,
resizerLocation: AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
resizerCursorType: CursorType.grab
};
Protocol Violation Handling
| Violation | Fix |
|---|---|
| Skipped Step 1 | Re-run: Use file_search and list_dir first |
| Skipped Step 2 | Re-run: Use read_file on reference file |
| Used undocumented API | Delete it, check reference for alternatives |
| Didn't report findings | Report: "I checked X, found Y, now doing Z" |
If user calls out violation: IMMEDIATELY acknowledge, apologize, and restart with proper protocol.
Enforcement Checklist
Before generating code, verify:
- Step 1 executed (workspace detection) and reported
- Step 2 executed (reference file read) and reported
- Every API validated against reference file
- No undocumented APIs used
- Angular patterns followed
Reference files are SOURCE OF TRUTH - everything must trace back to them.
FAQ
What does the syncfusion-angular-pdf-viewer skill do?
Implements the Syncfusion Angular PDF Viewer (PdfViewerComponent) for embedding, configuring, and loading PDF documents. Use this when rendering PDFs in an Angular application, embedding viewer controls, or generating TS/CSS code for PDF display and interaction.
How do I install syncfusion-angular-pdf-viewer?
Run npx skills add https://github.com/syncfusion/pdf-viewer-sdk-skills --skill syncfusion-angular-pdf-viewer in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/syncfusion-angular-pdf-viewer/ (personal) or .claude/skills/syncfusion-angular-pdf-viewer/ (project).
Which AI agents can use syncfusion-angular-pdf-viewer?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is syncfusion-angular-pdf-viewer safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains syncfusion-angular-pdf-viewer?
It is published by syncfusion in syncfusion/pdf-viewer-sdk-skills. It has 68 recorded installs.
More from syncfusion/pdf-viewer-sdk-skills
syncfusion-react-pdf-viewer
syncfusion/pdf-viewer-sdk-skills
Implements the Syncfusion React PDF Viewer (PdfViewerComponent) for embedding, configuring, and loading PDF documents. Use this when rendering PDFs in a React application, embedding viewer controls, or generating TSX/HTML code for PDF display and interaction.
syncfusion-maui-pdf-viewer
syncfusion/pdf-viewer-sdk-skills
Open the skill to read its SKILL.md instructions.
syncfusion-blazor-pdf-viewer
syncfusion/pdf-viewer-sdk-skills
Open the skill to read its SKILL.md instructions.
syncfusion-flutter-pdf-viewer
syncfusion/pdf-viewer-sdk-skills
Open the skill to read its SKILL.md instructions.
syncfusion-aspnetcore-pdf-viewer
syncfusion/pdf-viewer-sdk-skills
Open the skill to read its SKILL.md instructions.
syncfusion-wpf-pdf-viewer
syncfusion/pdf-viewer-sdk-skills
Open the skill to read its SKILL.md instructions.
Popular docs & writing skills
grill-with-docs
mattpocock/skills
A relentless interview to sharpen a plan or design, which also creates docs (ADR's and glossary) as we go.
lark-markdown
open.feishu.cn
飞书 Markdown:查看、创建、上传、编辑和比较飞书中的原生 Markdown 文件。当用户要操作飞书 Markdown 文件,或比较其远端版本及本地草稿时使用。纯本地 Markdown 文件操作不触发本 skill。不负责将 Markdown 导入为飞书在线文档,也不负责文件搜索、权限、评论、移动、删除等云空间管理操作。
writing-beats
mattpocock/skills
Writing, exploit; assemble raw material into a journey of beats, grounding each term before a beat leans on it.
writing-shape
mattpocock/skills
Writing, exploit: shape raw material into an article, paragraph by paragraph.
writing-fragments
mattpocock/skills
Writing, explore: mine raw fragments, no structure yet.
writing-for-agents
mattpocock/skills
Writing documents for agents. Use when creating or editing skills, or modifying AGENTS.md or CLAUDE.md.