skills
一个利用React-PDF生成PDF文档的Claude Code技能
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：skills。 它的用途是：一个利用React-PDF生成PDF文档的Claude Code技能 完整的 Skill 内容见：https://321skill.com/skills/skills-molefrog/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“用react-pdf技能生成一份产品发布说明PDF，包含两栏布局的对比表格、一个SVG折线图展示用户增长，并使用Google Fonts的‘Roboto’字体。”，AI会生成完整的React-PDF组件代码，你只需运行即可得到排版专业的PDF文档。
介绍
这个Skill解决了AI在代码生成场景中难以创建高质量、布局复杂的PDF文档的问题。它通过将React-PDF（@react-pdf/renderer）封装为Claude Code技能，让AI能够以声明式、组件化的方式生成PDF，避免了传统PDF库需要手动计算坐标和布局的繁琐。
使用方式非常便捷，用户只需在Claude Code环境中通过npx命令或插件市场安装该技能，即可在对话中直接指示AI生成包含复杂布局、图表、自定义字体和emoji的PDF代码。AI会利用该技能提供的组件库和布局引擎来构建文档。
它非常适合前端开发者、需要自动化生成报告或文档的技术人员，以及任何希望利用AI快速产出具有精美排版和可复用组件PDF的Claude Code用户。相比于编写底层PDF生成代码，它极大地提升了开发效率和文档质量。
与Python的ReportLab、WeasyPrint等库相比，它的核心区别在于采用了基于Flexbox和Grid的现代布局引擎（Yoga），以及React风格的组件化开发模式。这使得AI生成的PDF代码更接近Web开发体验，能轻松实现居中、多列、自适应网格等复杂布局，而无需进行复杂的绝对坐标计算。
核心特点
核心区别在于采用React组件化范式与Yoga布局引擎，让AI能像构建Web UI一样声明式地编排PDF，轻松实现Flexbox/Grid布局、SVG图表和内嵌emoji，而同类Python库通常需要命令式地计算坐标。
注意事项
不适合需要极精细控制PDF底层结构（如特定打印标准）或完全脱离Node.js/React生态的纯后端生成场景。
常见问题
这个技能和直接用Python写PDF有什么区别？
它用React组件和Flexbox布局，像写网页一样做PDF，比Python库命令式画坐标更简单直观，尤其适合复杂排版。
需要懂React才能用吗？
不需要，你只需描述想要的PDF内容，AI会生成对应的React-PDF代码；但懂React有助于理解和调整。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/skills-molefrog/raw/index.md 读取 skills 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/skills-molefrog/raw/index.md（查看排版版本）