MCPInstall

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
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads syncfusion-angular-pdf-viewer automatically when relevant.

  3. 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

  1. NO code generation until Steps 1 & 2 are complete
  2. NO assumptions - Always verify workspace AND read reference files first
  3. 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 KeywordsReference FilePurpose
"basic", "create sample", "getting started", "load PDF"getting-started.mdMinimal PDFViewer setup
"configuration", "server settings", "locale"general-properties.mdCore viewer properties
"disable", "hide features", "enable/disable", "read-only"enable-properties.mdFeature toggles

Navigation

User Query KeywordsReference FilePurpose
"page navigation", "next/previous page", "go to page"page-navigation.mdPage controls
"bookmarks", "table of contents", "TOC", "outline"bookmark-navigation.mdBookmark navigation (use ViewChild)
"hyperlinks", "external links", "URL navigation"hyperlink-navigation.mdLink handling
"thumbnails", "preview pages", "thumbnail panel"thumbnail-navigation.mdThumbnail panel

Viewing & Interaction

User Query KeywordsReference FilePurpose
"zoom", "magnification", "fit to page", "scale"magnification.mdZoom controls
"text selection", "panning", "scroll mode"interaction-mode.mdInteraction modes
"select text", "copy text"text-selection.mdText selection
"search", "find in PDF", "highlight search"text-search.mdSearch functionality

Toolbar & Context Menu

User Query KeywordsReference FilePurpose
"customize toolbar", "hide toolbar items", "remove buttons"toolbar-settings.mdToolbar configuration
"show/hide toolbar dynamically", "toggle toolbar"toolbar-methods.mdProgrammatic toolbar control
"right-click menu", "context menu", "custom menu"contextmenu.mdContext menu

Annotations

User Query KeywordsReference FilePurpose
"annotation colors", "annotation styles", "customize annotations"annotation-settings.mdAnnotation appearance
"annotation events", "when annotation added", "annotation callbacks"annotation-events.mdAnnotation lifecycle
"annotation labels", "shape labels", "measurement labels"shape-label-settings.mdLabel customization
"ink annotation", "freehand drawing", "signature", "sketch", "handwritten notes"ink-annotation.mdInk annotations
"redaction", "redact content", "black out text"redaction-annotation.mdRedaction annotations

Forms

User Query KeywordsReference FilePurpose
"form field defaults", "form field styles"form-field-settings.mdForm field config
"form field events", "field changes", "validation"form-field-events.mdForm field events

Document Actions

User Query KeywordsReference FilePurpose
"download PDF", "save PDF", "export"download.mdDownload functionality
"print PDF", "print document"print.mdPrint functionality
"reorder pages", "rotate pages", "add/remove pages"organize-pages.mdPage manipulation

Advanced

User Query KeywordsReference FilePurpose
"load programmatically", "API methods", "extract text"api-methods.mdProgrammatic control
"event list", "all events", "event reference"events.mdComplete event list

Toolbar Item Name Validation (CRITICAL)

When generating toolbar configurations:

  1. ALWAYS read toolbar-settings.md first
  2. Use ONLY names from these sections:
    • "Available Primary Toolbar Items"
    • "Available Annotation Toolbar Items"
    • "Available Form Designer Items"
  3. 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

ViolationFix
Skipped Step 1Re-run: Use file_search and list_dir first
Skipped Step 2Re-run: Use read_file on reference file
Used undocumented APIDelete it, check reference for alternatives
Didn't report findingsReport: "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

View all →

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.

Docs & Writing122 installs

syncfusion-maui-pdf-viewer

syncfusion/pdf-viewer-sdk-skills

Open the skill to read its SKILL.md instructions.

Docs & Writing82 installs

syncfusion-blazor-pdf-viewer

syncfusion/pdf-viewer-sdk-skills

Open the skill to read its SKILL.md instructions.

Docs & Writing65 installs

syncfusion-flutter-pdf-viewer

syncfusion/pdf-viewer-sdk-skills

Open the skill to read its SKILL.md instructions.

Docs & Writing60 installs

syncfusion-aspnetcore-pdf-viewer

syncfusion/pdf-viewer-sdk-skills

Open the skill to read its SKILL.md instructions.

Docs & Writing57 installs

syncfusion-wpf-pdf-viewer

syncfusion/pdf-viewer-sdk-skills

Open the skill to read its SKILL.md instructions.

Docs & Writing56 installs

Popular docs & writing skills

View category →

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.

Docs & Writing1.2M installs

lark-markdown

open.feishu.cn

飞书 Markdown:查看、创建、上传、编辑和比较飞书中的原生 Markdown 文件。当用户要操作飞书 Markdown 文件,或比较其远端版本及本地草稿时使用。纯本地 Markdown 文件操作不触发本 skill。不负责将 Markdown 导入为飞书在线文档,也不负责文件搜索、权限、评论、移动、删除等云空间管理操作。

Docs & Writing778.7K installs

writing-beats

mattpocock/skills

Writing, exploit; assemble raw material into a journey of beats, grounding each term before a beat leans on it.

Docs & Writing490.7K installs

writing-shape

mattpocock/skills

Writing, exploit: shape raw material into an article, paragraph by paragraph.

Docs & Writing490.2K installs

writing-fragments

mattpocock/skills

Writing, explore: mine raw fragments, no structure yet.

Docs & Writing489.6K installs

writing-for-agents

mattpocock/skills

Writing documents for agents. Use when creating or editing skills, or modifying AGENTS.md or CLAUDE.md.

Docs & Writing479.3K installs