documents
Documents
Generate documents (PDF, DOCX) programmatically.
Status: Early Stage
This skill is a placeholder. Patterns will evolve with use.
Potential Use Cases
- Invoices for clients
- Reports from app data
- Contracts/proposals
- Data exports
Stack Options to Explore
PDF Generation
pnpm add @react-pdf/renderer
import { Document, Page, Text, View } from '@react-pdf/renderer'
const Invoice = () => (
<Document>
<Page>
<View>
<Text>Invoice #001</Text>
</View>
</Page>
</Document>
)
Word Documents
pnpm add docx
import { Document, Paragraph, TextRun } from 'docx'
const doc = new Document({
sections: [{
children: [
new Paragraph({
children: [new TextRun('Hello World')],
}),
],
}],
})
HTML → PDF (via Puppeteer)
pnpm add puppeteer
const browser = await puppeteer.launch()
const page = await browser.newPage()
await page.goto('http://localhost:3000/invoice/123')
await page.pdf({ path: 'invoice.pdf', format: 'A4' })
Reference
- Anthropic's docx skill: https://github.com/anthropics/skills/tree/main/skills/docx
- Anthropic's pdf skill: https://github.com/anthropics/skills/tree/main/skills/pdf
- react-pdf docs: https://react-pdf.org/
TODO
- Pick preferred stack after first real use case
- Add invoice template
- Add report template
- Integrate with tRPC for data fetching
More from cerico/macfair
infographic
Generate infographics from text. Extracts key info, renders SVG, exports PNG. Uses Claude Code (no API costs).
38visx
Build data visualizations with visx (React + D3). Use for charts, graphs, and interactive data exploration.
21creative-design
Create distinctive, memorable UI for landing pages, portfolios, marketing sites, and one-off creative work. Use when the user explicitly wants something "distinctive", "creative", "memorable", or "unique" - NOT for standard app components where consistency matters.
20threejs
Build 3D scenes, animations, and interactive experiences with Three.js. Use for product viewers, backgrounds, data visualization, or creative experiments.
13prototype
Create quick React prototypes that bundle to a single HTML file. Use for demos, interactive experiments, or shareable artifacts - NOT for full apps (use audreygen/Next.js for those).
13test-review
Review existing tests for completeness, quality issues, and common mistakes
12