office-kit-pptx git:20261021.0e2c75cA

Immutable. This exact content never changes and is served at /api/v1/blob/b6a827d257e9672b.

---
name: office-kit-pptx
description: Create and revise editable presentations with typed TSX and a live slide preview. Use for a new slide deck, changes to an existing PPTX or template, or iterative presentation design with office-kit. Handles project setup, preview, checking and PPTX export.
---

# Create slides with office-kit

Turn the user's brief into an editable PPTX. You operate the authoring tools;
the user describes the content and reviews slides in the browser. Make content
and layout changes in TSX. The preview also supports region instructions and direct
text saves. When it provides screenshots after an edit, inspect every image and
correct clipping, overlap, spacing and contrast on affected slides.

## Start or resume a project

For an existing office-kit slide project, read its `CLAUDE.md`, `package.json`
and entry file to locate the requested slides, then use its installed dependencies
and scripts. Read the relevant slide sources and their dependencies as needed;
do not load every slide for a local revision.
Do not initialize over existing work or upgrade packages just to edit a deck.

For a new deck, choose a new child directory in the user's workspace (for example,
`my-slides`). Run the setup yourself; do not hand the user a list of setup commands.
Prerequisites are Node.js 22.18+ and npm. If either is missing, explain the missing
prerequisite instead of attempting system-wide installation.

```sh
npx --yes --registry=https://registry.npmjs.org @office-kit/pptx-dev@latest init my-slides
cd my-slides
npm install --registry=https://registry.npmjs.org
```

Use the published packages. No clone of the office-kit repository, pnpm build,
local tarballs or peer-dependency overrides are needed. If setup fails, report
the actual error and resolve it before proceeding. The initializer refuses an
existing directory; reuse a presentation project or choose a new directory.
Read the generated `CLAUDE.md` before authoring. It is not necessarily loaded
automatically when Claude was started in the parent directory.

## Plan the story and the words

Decide which kind of deck this is before writing any slide text, including outline
drafts shown to the user:

- **Talk** (the default when a speaker presents it: conference talk, lightning talk,
  lecture, all-hands). Read [the talk rules](references/story-talk.md).
- **Document** (read without the author, or used to reach a decision: report, proposal,
  decision memo, board pack, handout). Read [the document rules](references/story-document.md).

If the brief does not make the kind clear, ask. For a Japanese deck, also read
[the Japanese wording rules](references/writing-ja.md). The two modes deliberately
disagree: a talk reveals its answer step by step and mixes headline forms; a document
states the answer first and makes every headline an assertion.

For a new deck, gather the user's real material first and agree a one-line-per-slide
storyline before building. Never invent figures, customers, quotes or anecdotes; ask,
or leave a visible `[要確認: …]`. Give each slide's headline `Text` the prop
`name="Headline"` so the checks can find it. When revising an existing deck, change
wording only where the reader gains something concrete, keep the speaker's voice, and
change structure only when asked.

## Author and revise

Before styling a new deck, read [the visual design rules](references/design.md): type
size floors, cover and closing slides, color, cards, charts and tables.
Read [the TSX reference](references/tsx.md) when first authoring or using unfamiliar
elements; reuse already-read guidance during revisions. It covers
native elements, charts, tables, template selection and the Raw escape hatch.
The default export of `deck.tsx` is a `Presentation`. Use ordinary TypeScript
functions and data to reuse content; do not add React, Vue or a web UI.

- Use the supplied brief, audience and source material. Ask only for information
  needed to proceed; label illustrative data when real figures are unavailable.
- Keep the palette and type scale in `theme.ts` as [the design rules](references/design.md)
  set them. Inspect chart labels, table density, contrast and overflow.
- Keep text, shapes, charts and tables as native objects. Do not rasterize whole
  slides to make a preview look correct.
- Keep assets and imported components under the slide project directory so they
  are watched. Load files relative to their source module with
  `readFile(new URL('./asset.png', import.meta.url))`.
- For an existing PPTX, copy it into the project, inspect it with
  `npx --no-install office-pptx inspect template.pptx`, then use source bytes and
  `mode="edit"`. Preserve unmentioned slides, masters, layouts and unknown parts.
  Use compose mode only when the request calls for a new slide sequence. Keep
  the source file separate from the exported `deck.pptx`.
- Prefer typed elements. When a needed capability is only in the core library,
  use `Raw` with public core APIs and consult [the core reference](references/core-api.md)
  and installed type declarations. Do not invent props or describe Raw support
  as complete declarative coverage.

## Keep revisions small

For new decks, keep slide order in `deck.tsx`, each slide in a descriptively named
`slides/*.tsx` file, and shared design values in `theme.ts`. Keep filenames stable
when reordering slides. Reuse ordinary functions for shared elements. Existing
projects can keep their structure; do not split or migrate them for a small edit.

For a request such as “shorten slide 3's headline”, find the slide through the entry
file (or search for its visible text), read its source and necessary dependencies,
and patch only that text. For mapped slides, locate the corresponding data item.
Do not rewrite the whole file/deck or reformat unrelated code. Inspect the diff
when available to ensure unrelated content and slide order are preserved.

Change shared theme values or components only when the request applies to their
consumers. For a one-slide exception, override that slide's props instead. For a
shared change, inspect the affected consumers. Do not add a second source of truth
or an editing DSL: TSX and ordinary code patches are the editing interface.

## Preview for the user

Run `npm run dev` in the slide project using your terminal tool's background-task
support. Wait for `Preview: ...`, open that exact URL if browser tools are
available, and give it to the user. Keep the server running while iterating and
reuse it on follow-up edits. If the port is busy, use `npm run dev -- --port 0`
and read the assigned URL. Do not stop unrelated processes.

Saving TSX updates the preview. The user selects slides in the vertical thumbnail
strip, uses Fit/zoom, or chooses Present for presentation mode. Review affected slides
with available browser/image tools and fix problems in TSX. Keep this loop to
source edits and the running preview; do not run a separate export or restart
the server for each intermediate change. Without browser tools, render the exported
deck to images (for example `soffice --headless --convert-to pdf deck.pptx` and
`pdftoppm -r 80 -png deck.pdf page`) and inspect every page. If no visual inspection is
possible, state that limitation rather than claiming a visual check.

A failed build leaves the last successful preview visible with an error. Fix the
error before treating the visible slides or Download PPTX as current output.
The viewer does not contain an AI chat; the conversation stays in Claude Code.

## Check and deliver

Run both commands after the final edits:

```sh
npm run check
npm run build
```

`check` type-checks and then measures the slide text (`office-pptx check deck.tsx`; run
that directly in a project whose `check` script is only `tsc`). Neither runs on the
live rebuild. Fix every error (text running out of its shape), judge each warning (a smaller overflow, text under
10pt, a word split across lines, a last line of one or two characters) and review all slides,
including template slides retained in edit mode. Then review the words and the story
with [the review steps](references/review.md): run `scripts/deck-text.mjs` from this
skill's directory on `deck.pptx`, judge each flag, read the headline track, and for a
new deck or a substantial rewrite run one fresh-eye review by a separate agent. The SVG preview is a rendering
aid, not a guarantee of fidelity in desktop presentation apps or animation/media playback.

The script also lists every `[要確認: …]` still on a slide, including chart titles and
labels. Confirm each with the user and fill it, or move it to the slide notes when the
slide reads correctly without it. Never deliver a deck that still shows one; report each
one the script lists under notes to the user (slide and what is missing).

Deliver the preview URL, the generated `deck.pptx` path and the editable project
path. State any unverified rendering or unsupported requested feature. On the
next revision, patch the same project and use the running preview. Rerun the
checks and export when delivering the revised output.