How do I troubleshoot layout alignment issues?

The skill includes instructions for enabling debug mode by adding `debug={true}` to components, allowing you to visualize flexbox constraints and bounding boxes.

What fonts are supported by this skill?

It includes pre-configured registrations for the Lato and Open Sans families, along with built-in PDF supports like Helvetica, Courier, and Times-Roman.

Can I use standard CSS classes with this skill?

No, @react-pdf/renderer uses a specific StyleSheet API. This skill provides design tokens and patterns tailored to that API for maximum compatibility.

Does this support multi-column layouts?

Yes, it provides specific layout patterns for two-column resumes, including width constraints for sidebars and flexible main content areas.

React-PDF Template Generator

Name: React-PDF Template Generator
Author: carlopezzuto

bycarlopezzuto

0•

디자인 도구

Builds professional PDF documents and resumes using @react-pdf/renderer with standardized design tokens and typography.

This Claude Code Skill provides a comprehensive framework for generating high-quality PDF documents using @react-pdf/renderer. It streamlines the creation of resumes and professional templates by enforcing a centralized design system, pre-configured font families, and type-safe data structures. By leveraging standardized design tokens and optimized StyleSheet patterns, it ensures consistent styling, better performance, and a maintainable component architecture for complex document layouts.

주요 기능

01Built-in debugging workflows and performance optimization using StyleSheet.create

02Advanced flexbox layout patterns for complex multi-column PDF structures

03Standardized design tokens for colors, spacing, and typography based on Tailwind patterns

04Pre-configured font registration system for Lato and Open Sans families

05Type-safe document generation using standardized ResumeSchema interfaces

060 GitHub stars

사용 사례

01Generating automated, professional resumes and cover letters from YAML or JSON data

02Debugging alignment and page-break issues in React-PDF components using visual debug modes

03Creating dynamic PDF reports with consistent branding and complex multi-column layouts

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add carlopezzuto/agents react-pdf-templates

For use in Claude.ai and ChatGPT

Download Skill