skills.rest
OpenAEC-Foundation
OpenAEC-FoundationOFFICIAL
Explore all skills by this author →
GitHub

pdflib-syntax-drawing

Draw vector shapes and paths on PDF pages with pdf-lib 1.x color and option semantics.

1|Updated Mar 19, 2026
Search Tags:#typescript#pdf#drawing#svg#colors#shapes#pdf-lib
One-click install
npx skills add https://github.com/OpenAEC-Foundation/pdf-lib-Claude-Skill-Package --skill pdflib-syntax-drawing
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pdflib-syntax-drawing
Source: https://github.com/OpenAEC-Foundation/pdf-lib-Claude-Skill-Package/tree/main/skills/source/pdflib-syntax/pdflib-syntax-drawing
Command: npx skills add https://github.com/OpenAEC-Foundation/pdf-lib-Claude-Skill-Package --skill pdflib-syntax-drawing

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Many developers produce visually incorrect PDFs because of subtle pdf-lib API differences: color values in the wrong range, mismatched option names for lines versus shapes, incorrect ellipse sizing, and coordinate-origin confusion for top-aligned placement. This Skill captures the precise semantics and best practices for drawing shapes, lines, and SVG paths so generated pdf-lib code is correct and predictable.

Core Features & Use Cases

  • Explicit guidance on color constructors and the required 0.0–1.0 numeric range to avoid silent color errors.
  • Clear property mappings and method rules for drawRectangle, drawSquare, drawCircle, drawEllipse, drawLine, and drawSvgPath, including stroke/fill, dash, cap, and blend options.
  • Practical examples for building diagrams, header bars, separators, annotations, and complex SVG path compositions in PDF documents.

Quick Start

Render a rotated dashed rectangle and a semi-transparent overlapping circle at the top of an A4 page using pdf-lib 1.x while ensuring rgb/cmyk/grayscale values are in the 0.0–1.0 range and positions are computed from page.getSize().

Frequently Asked Questions about pdflib-syntax-drawing

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

FAQPage Schema
How do I draw shapes and lines in pdf-lib without getting the colors wrong?▼

To draw shapes with correct colors in pdf-lib, you must ensure color constructors use numeric values in the 0.0–1.0 range, preventing silent color rendering errors on your PDF pages.

Why does my drawLine code fail in pdf-lib while drawRectangle works?▼

The drawLine method in pdf-lib uses distinct property names and line options compared to shape methods like drawRectangle, requiring specific mappings for stroke, dash, and cap configurations to render correctly.

How do I position a circle at the top of a PDF page using pdf-lib?▼

To position a circle at the top of a PDF page in pdf-lib, you should compute coordinates using page.getSize() to handle top-based placement accurately, as the default coordinate origin differs from top-aligned layouts.

What is the difference between drawCircle and drawEllipse sizing in pdf-lib?▼

In pdf-lib, drawCircle uses a single size parameter, whereas drawEllipse requires separate x and y radii to define its dimensions, ensuring correct vector shape rendering on the document.

Can I render SVG paths in a generated PDF using pdf-lib?▼

Yes, you can use the drawSvgPath method in pdf-lib to render complex SVG path compositions, applying correct stroke, fill, and blend options for diagrams and annotations within your generated PDF documents.

Does pdf-lib support TypeScript workflows for generating vector graphics?▼

Yes, pdf-lib 1.x supports TypeScript and JavaScript workflows for generating and modifying PDFs, providing typed method rules for drawing rectangles, squares, circles, ellipses, lines, and SVG paths.

Related Skills

Explore More Software Engineering Skills→
OpenAEC-FoundationOpenAEC-Foundation
1

pdflib-syntax-pages

Manage PDF pages with pdf-lib's PageSizes enum and PDFDocument APIs.

Official
Intermediate
tneztnez
3

markdown-to-pdf

Convert Markdown documents to PDF using Pandoc and LaTeX.

Community
Advanced
luan-thnhluan-thnh

mermaidjs-v11

Render Mermaid.js v11 diagrams from plain text to SVG, PNG, or PDF.

Community
Advanced
ChenYCLChenYCL

canvas-design

Generate posters, flyers, and infographics in PNG and PDF formats using Python graphics libraries.

Community
Intermediate