pptx-official
starsforks
How to install pptx-official?
sabahattink/antigravity-fullstack-hq/pptx-official
$npx -y skills add sabahattink/antigravity-fullstack-hq --skill pptx-officialGenerating PowerPoint presentations with pptxgenjs in Node.js. Use when creating automated presentations, slide decks, pitch decks, or reports in .pptx format from data.
SKILL.md
| 1 | # PowerPoint Generation with pptxgenjs |
| 2 | |
| 3 | ## Installation |
| 4 | |
| 5 | ```bash |
| 6 | npm install pptxgenjs |
| 7 | npm install -D @types/node |
| 8 | ``` |
| 9 | |
| 10 | ## Basic Presentation |
| 11 | |
| 12 | ```typescript |
| 13 | import PptxGenJS from 'pptxgenjs' |
| 14 | |
| 15 | async function generatePresentation(data: PresentationData): Promise<Buffer> { |
| 16 | const pptx = new PptxGenJS() |
| 17 | |
| 18 | // Global settings |
| 19 | pptx.author = 'Antigravity HQ' |
| 20 | pptx.company = 'Antigravity' |
| 21 | pptx.title = data.title |
| 22 | pptx.subject = data.subject |
| 23 | pptx.layout = 'LAYOUT_WIDE' // 16:9 |
| 24 | |
| 25 | // ─── Title Slide ───────────────────────────────────────── |
| 26 | const titleSlide = pptx.addSlide() |
| 27 | titleSlide.background = { color: '1E3A5F' } |
| 28 | |
| 29 | titleSlide.addText(data.title, { |
| 30 | x: '10%', |
| 31 | y: '35%', |
| 32 | w: '80%', |
| 33 | h: '20%', |
| 34 | fontSize: 40, |
| 35 | bold: true, |
| 36 | color: 'FFFFFF', |
| 37 | align: 'center', |
| 38 | fontFace: 'Calibri', |
| 39 | }) |
| 40 | |
| 41 | titleSlide.addText(data.subtitle, { |
| 42 | x: '15%', |
| 43 | y: '60%', |
| 44 | w: '70%', |
| 45 | h: '10%', |
| 46 | fontSize: 20, |
| 47 | color: 'B0C4DE', |
| 48 | align: 'center', |
| 49 | }) |
| 50 | |
| 51 | titleSlide.addText(new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long' }), { |
| 52 | x: '0%', |
| 53 | y: '88%', |
| 54 | w: '100%', |
| 55 | h: '8%', |
| 56 | fontSize: 12, |
| 57 | color: '7094B5', |
| 58 | align: 'center', |
| 59 | }) |
| 60 | |
| 61 | // ─── Content Slides ─────────────────────────────────────── |
| 62 | for (const section of data.sections) { |
| 63 | addContentSlide(pptx, section) |
| 64 | } |
| 65 | |
| 66 | // ─── Chart Slide ────────────────────────────────────────── |
| 67 | if (data.chartData) { |
| 68 | addChartSlide(pptx, data.chartData) |
| 69 | } |
| 70 | |
| 71 | // ─── Summary Slide ──────────────────────────────────────── |
| 72 | addSummarySlide(pptx, data.keyPoints) |
| 73 | |
| 74 | // Return as buffer |
| 75 | const buffer = await pptx.write({ outputType: 'nodebuffer' }) as Buffer |
| 76 | return buffer |
| 77 | } |
| 78 | ``` |
| 79 | |
| 80 | ## Content Slide with Bullets |
| 81 | |
| 82 | ```typescript |
| 83 | function addContentSlide(pptx: PptxGenJS, section: Section) { |
| 84 | const slide = pptx.addSlide() |
| 85 | |
| 86 | // Slide header bar |
| 87 | slide.addShape(pptx.ShapeType.rect, { |
| 88 | x: 0, y: 0, w: '100%', h: 0.8, |
| 89 | fill: { color: '2563EB' }, |
| 90 | line: { color: '2563EB' }, |
| 91 | }) |
| 92 | |
| 93 | // Title |
| 94 | slide.addText(section.title, { |
| 95 | x: 0.3, |
| 96 | y: 0.1, |
| 97 | w: '90%', |
| 98 | h: 0.6, |
| 99 | fontSize: 22, |
| 100 | bold: true, |
| 101 | color: 'FFFFFF', |
| 102 | fontFace: 'Calibri', |
| 103 | }) |
| 104 | |
| 105 | // Bullet points |
| 106 | slide.addText( |
| 107 | section.bullets.map(bullet => ({ |
| 108 | text: bullet, |
| 109 | options: { |
| 110 | bullet: { type: 'bullet', characterCode: '25CF' }, // filled circle |
| 111 | paraSpaceAfter: 8, |
| 112 | }, |
| 113 | })), |
| 114 | { |
| 115 | x: 0.5, |
| 116 | y: 1.1, |
| 117 | w: '90%', |
| 118 | h: '75%', |
| 119 | fontSize: 16, |
| 120 | color: '374151', |
| 121 | fontFace: 'Calibri', |
| 122 | valign: 'top', |
| 123 | } |
| 124 | ) |
| 125 | |
| 126 | // Slide number |
| 127 | slide.addText(`${section.slideNumber}`, { |
| 128 | x: '93%', |
| 129 | y: '92%', |
| 130 | w: '5%', |
| 131 | h: '6%', |
| 132 | fontSize: 10, |
| 133 | color: '9CA3AF', |
| 134 | align: 'right', |
| 135 | }) |
| 136 | } |
| 137 | ``` |
| 138 | |
| 139 | ## Chart Slide |
| 140 | |
| 141 | ```typescript |
| 142 | function addChartSlide(pptx: PptxGenJS, chartData: ChartData) { |
| 143 | const slide = pptx.addSlide() |
| 144 | |
| 145 | // Header |
| 146 | slide.addShape(pptx.ShapeType.rect, { |
| 147 | x: 0, y: 0, w: '100%', h: 0.8, |
| 148 | fill: { color: '2563EB' }, |
| 149 | line: { color: '2563EB' }, |
| 150 | }) |
| 151 | slide.addText(chartData.title, { |
| 152 | x: 0.3, y: 0.1, w: '90%', h: 0.6, |
| 153 | fontSize: 22, bold: true, color: 'FFFFFF', |
| 154 | }) |
| 155 | |
| 156 | // Bar chart |
| 157 | slide.addChart(pptx.ChartType.bar, [ |
| 158 | { |
| 159 | name: chartData.seriesName, |
| 160 | labels: chartData.labels, |
| 161 | values: chartData.values, |
| 162 | }, |
| 163 | ], { |
| 164 | x: 0.5, |
| 165 | y: 1.0, |
| 166 | w: 9.0, |
| 167 | h: 5.0, |
| 168 | chartColors: ['2563EB', '10B981', 'F59E0B', 'EF4444'], |
| 169 | showValue: true, |
| 170 | showLegend: true, |
| 171 | legendPos: 'b', |
| 172 | dataLabelFontSize: 10, |
| 173 | catAxisLabelFontSize: 11, |
| 174 | valAxisLabelFontSize: 11, |
| 175 | title: chartData.title, |
| 176 | showTitle: false, |
| 177 | }) |
| 178 | } |
| 179 | |
| 180 | // Line chart for trends |
| 181 | slide.addChart(pptx.ChartType.line, [ |
| 182 | { name: 'Revenue', labels: months, values: revenueData }, |
| 183 | { name: 'Costs', labels: months, values: costData }, |
| 184 | ], { |
| 185 | x: 0.5, y: 1.0, w: 9.0, h: 5.0, |
| 186 | lineSize: 2, |
| 187 | showLegend: true, |
| 188 | showMarker: true, |
| 189 | chartColors: ['2563EB', 'EF4444'], |
| 190 | }) |
| 191 | ``` |
| 192 | |
| 193 | ## Table Slide |
| 194 | |
| 195 | ```typescript |
| 196 | function addTableSlide(pptx: PptxGenJS, tableData: TableData) { |
| 197 | const slide = pptx.addSlide() |
| 198 | |
| 199 | const rows: PptxGenJS.TableRow[] = [ |
| 200 | // Header row |
| 201 | tableData.headers.map(h => ({ |
| 202 | text: h, |
| 203 | options: { |
| 204 | bold: true, |
| 205 | color: 'FFFFFF', |
| 206 | fill: { color: '2563EB' }, |
| 207 | fontSize: 12, |
| 208 | align: 'center' as const, |
| 209 | }, |
| 210 | })), |
| 211 | // Data rows |
| 212 | ...tableData.rows.map((row, i) => |
| 213 | row.map(cell => ({ |
| 214 | text: cell, |
| 215 | options: { |
People who liked this also viewed
6 picksType
- ai-video-generationinference.sh Agent skills for using our API to give your agents access to hundreds of apps and other agentsSkillsJul 2026
- imagegen-frontend-webElite frontend image-direction skill for generating premium, conversion-aware website design references. CRITICAL OUTPUT RULE — generate ONE separate horizontal image FOR EVERY section. A landing pageSkillsJul 2026
- hyperframes-mediaWrite HTML. Render video. Built for agents.SkillsJul 2026
- media-useAgent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + leSkillsJul 2026
- general-videoAuthor or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, staticSkillsJul 2026
- product-launch-videoTurn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market,SkillsJul 2026
