菜单
Generate a polished HTML slide deck from a topic, outline, or data. Outputs a self-contained .html file with keyboard/touch navigation, responsive typography, and the ALPA (Alpaca Labs) design system — Helvetica, editorial layout, clean white backgrounds.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Look up ACRIS property transaction records for any NYC property — deeds, mortgages, satisfactions, liens, and ownership history. Use when the user asks who owns a building, when it last sold or for how much, or whether there are mortgages or liens against it. NYC only; for permits or violations use the DOB skills.
Look up Board of Standards and Appeals (BSA) variances and special permits for any NYC property. Use when checking whether a lot carries zoning relief — variances, special permits, appeals — that modifies its as-of-right envelope. NYC only; for base zoning controls use /zoning-analysis-nyc.
Look up DOB permit and job filing history for any NYC building — new-building, alteration, and demolition filings with status and dates. Use when the user asks what work was filed or permitted at an address, or to gauge renovation history during due diligence. NYC only; for open violations use /nyc-dob-violations.
Look up open and resolved DOB and ECB violations for any NYC building, with class, status, and penalty detail. Use when the user asks whether a building has violations, stop-work orders, or outstanding ECB penalties. NYC only; for housing-code violations use /nyc-hpd.
Look up HPD violations, complaints, and building registration for residential buildings.
Check if a NYC building is landmarked or in a historic district using LPC data.
| name | slide-deck-generator |
| description | Generate a polished HTML slide deck from a topic, outline, or data. Outputs a self-contained .html file with keyboard/touch navigation, responsive typography, and the ALPA (Alpaca Labs) design system — Helvetica, editorial layout, clean white backgrounds. |
| allowed-tools | ["Read","Write","Edit","Bash","Glob"] |
You generate self-contained HTML slide presentations using the ALPA (Alpaca Labs) design system — editorial layout with Helvetica, left-aligned typography, generous whitespace, and a clean monochrome palette. The user provides a topic, outline, data, or document — you produce a complete .html file they can open in any browser.
This skill keeps its bulk material in reference files in this directory. Load them on demand:
<div>s inside <body> change./resize-images): base64 embedding workflow, placeholder convention, file-size warnings.When invoked, list the available page types for the user before proceeding:
| # | Type | Layout | Background |
|---|---|---|---|
| 1 | Title (Image + Title) | Full bleed image, text overlay bottom-left | Image |
| 2 | Title (Text Only) | Left-aligned h1 + subtitle + credit | White |
| 3 | Heading + Body | Eyebrow + h2 + paragraph | White |
| 4 | Heading + List | Eyebrow + h2 + bullet list | White / Grey |
| 5 | Heading + Stats | Eyebrow + h2 + vertical stat lines | White |
| 6 | Stat Row | Large centered numbers in columns | White / Grey |
| 7 | Stat Comparison | Before/after with arrows | White / Grey |
| 8 | Heading + Stat Row | Eyebrow + h2 + stat columns (centered) | White / Grey |
| 9 | Statement (white) | Bold centered text | White |
| 10 | Statement (dark) | Bold centered text | Dark |
| 11 | Data Table | Eyebrow + h2 + table | Grey |
| 12 | Insight List | Eyebrow + h2 + numbered items | White |
| 13 | Bar Chart | Eyebrow + h2 + horizontal bars | White |
| 14 | Timeline | Eyebrow + h2 + phased dots (centered) | White |
| 15 | Two Column | Eyebrow + h2 + side-by-side text | White / Grey |
| 16 | Comparison | Eyebrow + h2 + before/after boxes (centered) | White |
| 17 | Image — Full Bleed | Single image, edge to edge | Image |
| 18 | Image — Full Bleed + Title | Full image with gradient + overlaid text | Image |
| 19 | Image — Split 2 | Two images side by side | White border |
| 20 | Image — Split 3 | Three images in a row | White border |
| 21 | Image — Split 4 | 2×2 grid | White border |
| 22 | Image — Split 6 | 3×2 grid | White border |
Any slide can include a Callout (footnote annotation) appended below the main content.
A sample deck demonstrating every type is at sample.html in this skill's directory.
Understand the input. The user may provide:
Plan the deck. Before writing HTML, decide:
Embed local images. If the user provides local image paths, encode them as base64 before writing the HTML (see image-handling.md). This keeps the deck self-contained and portable.
Write the HTML file. Use the template in html-template.md as the foundation, with component markup from slide-types.md. Customize only the slide content inside <body>.
Save the file. Write to the path the user specifies, or default to ./presentation.html. Tell the user the path so they can open it.
.slide div)| Class | Background | Text | Use for |
|---|---|---|---|
| (none) | White (#ffffff) | Dark | Title, content, lists, tables — the default |
grey | Light grey (#f5f5f3) | Dark | Tables, stat comparisons, alternating rhythm |
dark | Dark (#1a1a1a) | White | Statement slides — bold centered declarations |
The exact HTML markup for every component (eyebrow, heading + body/list/stats, stat row, stat comparison, statement, data table, insight list, bar chart, timeline, two column, comparison, callout, and all image slides) is in slide-types.md. Read it before composing slides and copy the structures verbatim.
eyebrow top-left.image-title-slide — h1 + subtitle over gradient overlay. Falls back to white text-only title if no image is available.eyebrow + .content with heading + body/list/statsdark for dramatic ones<span class="emphasis"> for bold inline text.slide.centered (class on the slide div) for slides with a heading + grid, timeline, stat-row, or comparison below. These read better centered. Left-align is for heading + body text, lists, tables, and insight lists.The default accent is --accent: #E8B517 (warm yellow — used only on the progress bar). The design is primarily monochrome — black, white, and greys. Change indicators use --negative: #D92B2B (red) and --positive: #2563EB (blue) for data.
If the presentation is for a different brand or context, change --accent. Common alternatives:
#2563EB#0D7377#6B21A8#C2410CAsk the user if they want a specific accent color. If the topic suggests a brand, try to match.
active — use .image-title-slide with a relevant cover image, h1 + subtitle over gradient. If no image is available, fall back to white text-only title (h1 + .subtitle + credit).<div class="slide centered"> to center the stat-row on the page. No eyebrow needed..statement div. No eyebrow. Use dark bg sparingly (1-2 per deck).Write the complete HTML file using the Write tool, built on the exact CSS/JS in html-template.md. The first slide must have class active. Every slide must be a direct child <div class="slide ..."> inside body, before the <nav>. Add <div class="brand-mark">ALPA</div> to every slide.