Presentation Slides
Presentation Slides creates 16:9 images from HTML pages. Each page is a 1920×1080 HTML document styled with the chosen theme, then rendered by a headless browser to a 3840×2160 PNG for insertion into project proposals, reports, and documentation.
CRITICAL — Before creating any page, you MUST read the following specifications using the Read tool:
kirklin-slides-copy.md: Typography rules, applicable to all styleskirklin-slides-layouts.md: Content and layout rules for 27 layout typeskirklin-slides-components.md: Page structure and component class names- The chosen style's specification: colors, font sizes, and dimensions for each layout. File locations are listed in the style table.
- Before creating, rendering, checking, renumbering, exporting, previewing a style, or capturing a post, you MUST read
kirklin-slides-workflow.md. - Before adding a new style, you MUST read
kirklin-slides-new-style.md.
Hereinafter, <skill directory> refers to the directory containing this file.
Styles
Styles determine the colors, fonts, font sizes, and decorations of the slides. All styles share the same set of example pages, component class names, and typography rules. Currently available styles are listed in the table below:
| Style | English Name | Use Case | Spec |
|---|---|---|---|
| Dark Launch Style | launch-dark | Project proposals, pitch presentations, on-screen presentations | kirklin-slides-style-launch-dark.md |
Example pages are located in assets/pages/. The stylesheets for each style are located in assets/styles/<EnglishName>/style.css. Run node <skill directory>/scripts/preview-style.ts <EnglishName> summary.png to generate a summary image of all examples for a style.
Use Cases
- Create images for project proposals, reports, and other documents
- Modify or supplement existing images
- Create single pages like covers, timelines, team introductions
- Export all images in document order and generate a summary image
- Capture social media posts and embed them into images
- Add new styles (e.g., a light theme) based on user-provided images
Quick Decisions
- When a project already has a
slides/style.css, use that style. The first line of the file contains the English name of the style; read the corresponding style spec. Place new pages in the samepages/directory. - When the user specifies a style, use the specified style.
- When the project has no
style.cssand the user does not specify a style: if only one style exists, use it directly; if multiple styles exist, recommend one based on content and context, then confirm with the user after viewing the summary image. - When the user provides a new set of images and requests future creations in that style, add the new style following
kirklin-slides-new-style.mdwithout modifying existing styles. - Determine each page's title first, then choose the layout based on the page's main content. The table below maps common content types to layouts; see
kirklin-slides-layouts.mdfor full details.
| Content | Layout |
|---|---|
| A single key number | Big Number |
| Multiple numbers | Number Blocks |
| Multiple parallel conclusions | Key Points |
| Multiple features or capabilities | Icon List |
| Trade-off between two approaches | Comparison |
| Items grouped by two dimensions | Four Quadrants |
| Multiple items compared across several aspects | Table |
| Comparison of magnitudes | Horizontal Bars |
| Values aggregated by time periods | Column Chart |
| Metric trends over time | Line Chart |
| Composition of a total | Donut Chart |
| Progressive stages decreasing | Funnel |
| Milestones | Timeline |
| Phased plans | Roadmap |
| Weekly tasks | Gantt Chart |
| Two simultaneous activities | Dual Track |
| Sequential steps | Flowchart |
| A direct quote | Quote |
| An image with description | Image+Text |
| External posts | Screenshot |
| Team members and roles | Team |
| Partners | Logo Wall |
| A code snippet | Code |
Core Constraints
- All styles have a canvas size of 1920×1080, rendered as 3840×2160 PNGs.
- Text stays within the style-defined safe area, determined by four margin variables in
style.css. - Pages contain only structure, content, and percentages computed from data; colors, font sizes, and other styles are governed by the chosen style. The meaning of colors is defined by the style spec.
- Each page expresses exactly one topic; split content across multiple pages when it is extensive.
- Numbers, names, and dates come from the user's source materials or are directly computed from them (e.g., totals, start/end dates, maximums). Computed numbers are annotated with the calculation method in the footer. Numbers not present or computable from the materials are not included or estimated.
- Placeholder text in example pages is entirely replaced with user content; remove any sections the user does not provide.
- Comparable charts use the same scale, noted in the footer.
- Titles are complete sentences ending with a period. Add spaces between Chinese characters and English/numeric characters; use "to" for value ranges.
- The numbering of images in a document matches their appearance order; renumber after inserting a new page.
- Scripts are written in TypeScript; helper scripts in the project also use TypeScript.
Examples
# BAD: Title is a topic, no space between Chinese and numbers, range uses tilde
Process approval overview
Each module needs 2~3 people
# GOOD: Title is a conclusion with a period, spaces inserted
New process reduces approval wait by two days.
Each module is handled by 2 to 3 people
# BAD: Two horizontal bar charts use different scales, and the selected scheme uses a color that indicates severity
# GOOD: Two horizontal bar charts share the same scale with a note in the footer, and the selected scheme uses the style's "selected" color
Checklist
- After each page is modified, it has been re-rendered and the PNG has been inspected with the Read tool.
- The check script reports no issues, and no placeholder text from example pages remains.
- All numbers, names, and dates are found in the user's source materials or can be computed from them.
- Image captions in the document match the titles, and numbering matches the order of appearance.
- When the user requests export, the export script runs without errors, and the summary image has been reviewed.
- After modifying this skill's scripts, example pages, or styles,
pnpm --dir <skill directory> testpasses all tests.
Out of Scope
- .pptx files and online slide decks
- Posters, social media cards, and web design
- Writing document body text
References
| File | Description |
|---|---|
kirklin-slides-copy.md | Typography rules |
kirklin-slides-layouts.md | Layout catalog |
kirklin-slides-components.md | Page structure and components |
kirklin-slides-workflow.md | Creation workflow and script usage |
kirklin-slides-new-style.md | Adding a new style |
kirklin-slides-style-launch-dark.md | Dark launch style spec |
assets/pages/ | Shared example pages for 27 layouts |
assets/styles/ | Stylesheets for each style |
scripts/use-style.ts | Set style for a project |
scripts/add-page.ts | Copy an example page by layout |
scripts/render.ts | Render pages |
scripts/check-pages.ts | Check text and layout |
scripts/export-slides.ts | Export all images and summary for a document |
scripts/preview-style.ts | Generate a summary image for a style |
scripts/post-shot.ts | Capture a social media post |