Stats
Actions
Tags
From pdf-forge
This skill should be used when the user asks to "create a PDF", "make a presentation", "generate a pitch deck", "build a report", "design slides", "create a proposal", "make a document look professional", "generate a sales deck", "create a whitepaper", "build a financial report", "make a deck", "create an investor update", "format a document for printing", "export as PDF", "create a one-pager", or mentions PDF generation, slide design, or document formatting. Also triggers when the user complains about AI-generated PDFs looking generic, ugly, or "AI-sloppy", or wants high-quality visual output for print or screen. Use this skill even for simple PDF requests — it ensures professional quality by default. Also triggers for Instagram content: "create an Instagram post", "make a carousel", "generate a story cover", "design social media creatives", "Instagram carrossel", "reels cover", or mentions of posting to Instagram, aspect ratios (1:1, 4:5, 9:16), or "creatives from references" (Reference Mode — feed images, extract visual grammar).
How this skill is triggered — by the user, by Claude, or both
Slash command
/pdf-forge:pdf-forgeThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generate professional, visually striking PDFs using pure HTML + Tailwind CSS. The output aesthetic follows the Vercel/Stripe design philosophy: dark zinc backgrounds, deliberate whitespace, typographic contrast, and restrained color accents. No component libraries, no React, no build step — just raw divs with Tailwind classes rendered via Playwright.
Generate professional, visually striking PDFs using pure HTML + Tailwind CSS. The output aesthetic follows the Vercel/Stripe design philosophy: dark zinc backgrounds, deliberate whitespace, typographic contrast, and restrained color accents. No component libraries, no React, no build step — just raw divs with Tailwind classes rendered via Playwright.
Determine the output format from the user's request:
1920x1080px210mm x 297mmIf ambiguous, ask. The format determines the type scale, spacing, and rendering method.
Check for .claude/pdf-forge.local.md in the project root. If present, extract brand colors and font preferences from the YAML frontmatter. If absent, use defaults: dark theme, Inter font, purple/orange accent.
Read references/color-palettes.md for the full color system and brand substitution rules.
Brand presets ship under assets/themes/ (e.g. yorus-dark.yaml). Each preset defines a palette, fonts, and accent gradient that you should honor when composing HTML. Presets with a brand: block apply to slides and documents (not only social). When a project's .claude/pdf-forge.local.md references a preset, treat that palette as authoritative.
Yorus interop: when working on a Yorus project (path matches yorus, alfama, etc., or preset: yorus-dark is set), the yorus-visual-direction skill is the source of truth for visual judgment — palette is #010101 / #ef700b / #8933e2, voice is active and concrete, anti-AI-slop is non-negotiable. The yorus-dark.yaml preset encodes the implementation baseline; the sibling skill handles direction.
Select layouts from the template catalog. Read the appropriate reference:
references/slide-layouts.md — 8 layouts with composition patternsreferences/doc-layouts.md — 7 layouts with composition patternsTypical sequences:
For each page, create a standalone HTML file. Templates live in assets/templates/slides/ and assets/templates/documents/. Either:
<!-- REPLACE: ... --> commentsreferences/design-system.mdName files sequentially: 01-cover.html, 02-stats.html, 03-modules.html, etc.
Every HTML file must be self-contained with the boilerplate shell defined in references/tailwind-print.md (section "HTML Template Structure"). The shell includes Tailwind CDN, Inter font loading, and the base CSS reset.
Before rendering, review each page against references/anti-patterns.md. Common traps:
Run the rendering pipeline:
# First time only: install dependencies
bun run $PDF_FORGE_HOME/scripts/setup.ts
# Render HTML pages to images/PDFs
bun run $PDF_FORGE_HOME/scripts/render-pdf.ts ./pages/ --output ./rendered/
# Merge into final PDF
bun run $PDF_FORGE_HOME/scripts/merge-pages.ts ./rendered/ --output ./output.pdf
The render script auto-detects the format (slides vs docs) from the HTML content.
The renderer enforces an overflow guard on slides and social formats: if rendered content is taller than the viewport (1080px for slides), the render aborts with the offending filename. Pass allowOverflow: true (programmatic) or accept the failure as a layout signal — usually the slide needs splitting, tighter spacing, or shorter copy. Docs are exempt (page.pdf paginates natively).
When the deliverable is a .pptx (boardroom decks, client proposals, anything that goes through PowerPoint/Keynote), convert the rendered PNGs into a full-bleed PPTX:
# Requires `uv` on PATH (https://docs.astral.sh/uv/)
bun run $PDF_FORGE_HOME/scripts/png-to-pptx.ts ./rendered/ --output ./deck.pptx
Defaults to 16:9 widescreen (13.333 × 7.5 in). Each PNG becomes one full-bleed slide via python-pptx (the only mature library for this). Override aspect with --aspect 4:3|16:10|a4-landscape|a4-portrait or pass --width <in> --height <in> for custom.
Pixel-perfect: the PNGs were rendered from your authored HTML, so the PPTX reproduces the design exactly — no template fighting, no font substitution surprises.
For decks that need original imagery (abstract hero cards, conceptual illustrations), use the parameterized generator. It dispatches codex jobs in parallel through the imagegen skill, sharing a common style brief across all slugs:
bun run $PDF_FORGE_HOME/scripts/gen-images.ts /path/to/project ./image-manifest.yaml --concurrency 4
The manifest is YAML (see scripts/image-manifest.example.yaml) with common_style, common_palette, and an images[] list of {slug, concept, aspect?, dimensions?}. Idempotent — slugs whose PNG already exists are skipped, so reruns are safe.
For Yorus decks, the example manifest already encodes the official palette (#010101 / #ef700b / #8933e2) and the dark premium systems-interface brief — copy and edit the images[] list per project.
When the user requests Instagram content, pick the sub-format:
post-1-1 (1080×1080): classic feed, single postpost-4-5 (1080×1350): feed portrait — default for modern editorialcarousel-1-1 / carousel-4-5: multiple slides, same ratiostory (1080×1920): Story or Reels coverIf ambiguous, ask. Feed post default is post-4-5.
The social: block in .claude/pdf-forge.local.md is a composition contract you read when writing HTML — the renderer pipeline never parses it. Every value below must be honored by the HTML Claude emits (palettes, fonts, gradient, footer); the renderer only cares about data-social-format on <body> for viewport selection.
Key fields:
preset: name of bundled theme from assets/themes/ (e.g. dark-editorial, warm-minimal) — Claude reads the YAML and mirrors its palette / fonts / accent_gradient into the HTML.accent_gradient: override the preset's gradient (from-X to-Y Tailwind classes).custom_palette: override the preset's six palette tokens.fonts_override: override the preset's fonts.display / fonts.mono.brand_handle / default_footer: branding automation — Claude inserts these into the generated HTML footer when present.allow_photos: gates the photo-overlay archetype.If no social: block, defaults to dark-editorial preset.
Read assets/themes/README.md for the full preset list.
For carousels, pick 3-10 slides following a narrative:
01-cover → archetype: cover (hook)
02-setup → archetype: definition or steps
03-content → archetype: stat/steps/quote
...
0N-cta → archetype: cta (final)
For single posts, pick one archetype matching the content goal.
Archetype catalog: assets/templates/social/<archetype>/<format>.html.
Copy the matching format variant of each archetype and replace <!-- REPLACE: ... --> slots with content.
Every file must include data-social-format="<sub-format>" on <body> — the renderer relies on it for viewport selection.
For custom compositions (escape hatch, no matching archetype), write HTML from scratch using _shared/boilerplate.html, respecting type scales (_shared/type-scales.md) and safe zones (_shared/safe-zones.md).
bun run $PDF_FORGE_HOME/scripts/render-pdf.ts ./pages/ --format social --output ./rendered/
One PNG per HTML, named from the source filename. Renderer aborts on overflow (body taller than viewport) and on carousel format mismatch.
bun run $PDF_FORGE_HOME/scripts/generate-manifest.ts ./rendered/ --format carousel-4-5 --theme dark-editorial --archetype cover,cover,cover,cover,cover
Writes manifest.yaml with slide metadata ready for publish tooling or archival. Use one archetype name per PNG — currently only cover ships; remaining archetypes land in the archetype-library follow-up plan. The CLI rejects the command if the archetype count doesn't match the PNG count.
bun run $PDF_FORGE_HOME/scripts/generate-preview.ts ./rendered/
Opens in browser — shows all slides as a grid, with captions and hashtags if present in the manifest.
When the user attaches images of other creatives as inspiration, follow this workflow:
For every reference image, describe in text what you see:
Pause for user correction before generating — if you read the palette or mood wrong, the output compounds the mistake.
Ask the user if ambiguous. Default to style transfer.
These are non-negotiable. They separate professional output from AI-sloppy:
Every template defines four tracking tokens via tailwind.config, calibrated from Figma, Stripe, Vercel, Framer, and Linear:
tracking-display (-0.1em): hero headings, mega numberstracking-heading (-0.06em): standard headingstracking-body (-0.025em): body text, descriptionstracking-label (-0.01em): section labels, tagsNever use Tailwind's generic tracking-wide/wider/widest. Positive letter-spacing is the top marker of AI-generated PDFs.
90% of the design is zinc shades. Background: zinc-950. Text hierarchy through shade: white → zinc-100 → zinc-300 → zinc-400 → zinc-500. The zinc scale provides structure that works with any accent color.
The gradient from-purple-400 to-orange-400 (or brand equivalent) appears ONLY on the highest-impact element per page — the ROI number, the key stat, the hero metric. Everything else stays zinc. Restraint creates sophistication.
Spacing follows a geometric progression: 4, 8, 12, 16, 24, 32, 48, 64, 80, 96, 128, 160px. Micro values (4-12px) for internal element gaps, medium (24-48px) for cards and grids, large (64-96px) for page padding and sections. No arbitrary values outside this scale.
Slides: 60% content, 40% whitespace. Documents: 70% content, 30% whitespace. When in doubt, remove content rather than reduce spacing.
No React components, no Shadcn, no Radix UI. Only raw <div> elements with Tailwind classes. Component libraries inject spans, aria-attributes, and nested DOM that break Playwright rendering. Keep the DOM flat and predictable.
references/ paths are relative to this skill directory (where this SKILL.md lives)assets/ and scripts/ paths are relative to $PDF_FORGE_HOME (the project root)$PDF_FORGE_HOME is set during installation via install.sh — it points to the pdf-forge project rootRead these as needed — do not load everything upfront:
| File | Read when... |
|---|---|
references/design-system.md | Creating layouts from scratch (not from templates) |
references/anti-patterns.md | Self-checking quality before rendering |
references/slide-layouts.md | Building a slide presentation |
references/doc-layouts.md | Building an A4 document |
references/color-palettes.md | User specified brand colors, or switching to light theme |
references/tailwind-print.md | Debugging rendering issues, or needing CSS technique reference |
Ready-to-use HTML templates in assets/templates/:
assets/templates/slides/)| Template | Use for |
|---|---|
cover.html | Opening slide |
impact-stats.html | Problem/opportunity data with big numbers |
bento-grid.html | Features, modules, services in asymmetric grid |
split-screen.html | Cost vs return, before vs after |
timeline.html | Roadmap, phases, milestones |
comparison.html | Us vs them, plan comparison |
quote.html | Testimonials, founder vision |
cta.html | Call to action, contact info |
assets/templates/documents/)| Template | Use for |
|---|---|
doc-cover.html | Report/proposal cover page |
executive-summary.html | Key metrics and summary after cover |
content-page.html | Narrative text with heading hierarchy |
data-table.html | Financial data, metrics tables |
two-column.html | Parallel information, specs |
visual-full.html | Charts, diagrams, full-width visuals |
appendix.html | Dense supplementary data |
assets/templates/social/)Each archetype has five format variants: post-1-1.html, post-4-5.html, carousel-1-1.html, carousel-4-5.html, story.html. See the archetype's NOTES.md for variants and slot conventions.
| Archetype | Purpose |
|---|---|
cover/ | Opening slide — carousel hook or bold single-post headline |
Only cover/ ships today. For other needs (mega stats, steps, quotes, before/after, definitions, checklists, CTAs, photo overlays, bento grids), compose custom HTML from _shared/boilerplate.html using the type-scales and safe-zones references. The planned-but-unshipped archetype list lives in references/social-archetypes-planned.md.
Shared resources: _shared/boilerplate.html, _shared/type-scales.md, _shared/safe-zones.md.
text-xl font-mono uppercase tracking-labeltext-7xl font-semibold tracking-heading leading-tighttext-2xl text-zinc-400 font-light tracking-body leading-relaxedtext-8xl font-bold tracking-displaytext-[120px] font-bold leading-none tracking-displaytext-xs font-mono uppercase tracking-labeltext-4xl font-semibold tracking-headingtext-base text-zinc-400 tracking-body leading-relaxedtext-5xl font-bold tracking-displayFull scales in references/design-system.md.
Full tables in assets/templates/social/_shared/type-scales.md. Key highlights:
post-4-5 hero heading: text-6xl font-semibold tracking-heading leading-tightpost-4-5 mega number: text-[200px] font-bold leading-none tracking-displaystory hero heading: text-7xl font-semibold tracking-heading leading-tightpt-[250px] pb-[280px] on wrapping divCreates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub syx-labs/pdf-forge --plugin pdf-forge