Community코딩 & 개발github.com

vercel-labs/react-pdf

JSON 스펙에서 PDF 문서를 생성하고, @json-render/react-pdf와 함께 작업하거나, PDF 버퍼/스트림/파일로 스펙을 렌더링할 때 사용하는 React PDF 렌더러입니다.

react-pdf란 무엇인가요?

이 스킬은 vercel-labs/react-pdf 라이브러리를 기반으로 하여, JSON 기반 스펙을 입력받아 React 컴포넌트로 PDF 문서를 생성하고, 그 결과물을 버퍼, 스트림, 또는 파일 형태로 출력할 수 있습니다. @json-render/react-pdf와의 원활한 통합을 지원하며, 구조화된 데이터를 시각적으로 표현해야 하는 PDF 생성 작업에 최적화되어 있습니다. 개발자는 복잡한 레이아웃과 스타일을 코드로 제어할 수 있어, 동적 보고서, 청구서, 증명서 등 다양한 PDF 문서를 효율적으로 제작할 수 있습니다. Cursor, Claude Code, Codex 등 주요 AI 코딩 어시스턴트 환경에서 사용할 수 있으며, 사용자는 JSON 스펙 정의와 함께 적절한 React 컴포넌트 구조를 활용하여 원하는 출력 결과를 얻을 수 있습니다.

지원 대상~Claude Code~Codex CLI~Cursor
Part ofReact
npx skills add https://github.com/vercel-labs/json-render/tree/main/skills/react-pdf

Installed? Explore more 코딩 & 개발 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

react-pdf은(는) 무엇을 하나요?

React PDF 렌더러 for json-render. JSON 스펙에서 PDF 문서를 생성할 때, @json-render/react-pdf와 함께 작업하거나, 스펙을 PDF 버퍼/스트림/파일로 렌더링할 때 사용합니다.

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

vercel-labs/core

Core package for defining schemas, catalogs, and AI prompt generation for json-render. Use when working with @json-render/core, defining schemas, creating catalogs, or building JSON specs for UI/video generation.

vercel-labs/react

React renderer for json-render that turns JSON specs into React components. Use when working with @json-render/react, building React UIs from JSON, creating component catalogs, or rendering AI-generated specs.

vercel-labs/react-native

React Native renderer for json-render that turns JSON specs into native mobile UIs. Use when working with @json-render/react-native, building React Native UIs from JSON, creating mobile component catalogs, or rendering AI-generated specs on mobile.

vercel-labs/react-three-fiber

React Three Fiber 3D renderer for json-render. Use when working with @json-render/react-three-fiber, building 3D scenes from JSON specs, rendering meshes/lights/models/environments, or integrating Three.js with json-render catalogs.

vercel-labs/remotion

Remotion renderer for json-render that turns JSON timeline specs into videos. Use when working with @json-render/remotion, building video compositions from JSON, creating video catalogs, or rendering AI-generated video timelines.

vercel-labs/shadcn

Pre-built shadcn/ui components for json-render. Use when working with @json-render/shadcn, adding standard UI components to a catalog, or building web UIs with Radix UI + Tailwind CSS components.

vercel-labs/zustand

Zustand adapter for json-render's StateStore interface. Use when integrating json-render with Zustand for state management via @json-render/zustand.

관련 스킬