open-design/skills/kami-deck

kami-deck

Sister skill to kami-landing. Produces a single self-contained HTML file: a horizontal magazine-style swipe deck in the kami (紙 / 纸) design system — print rhythm, ink-blue accent, serif at one weight, no italic, no cool grays.

Read first — agent contract, schema, and self-check live in SKILL.md. This README is the human quick-start.

What you get

• N viewport-sized slides laid out horizontally on a transformed flex track.
• Cover / chapter / end slides flip background to ink-blue (#1B365D) with ivory text. All other slides stay on parchment (#f5f4ed) with serif at weight 500.
• Per-slide chrome strip: brand mark · deck title · live slide counter (01 / 09).
• Tabular-nums on every counter, metric, and date.
• Ink-blue progress bar at the bottom that fills as you advance.
• Dot indicator near the bottom; click to jump.
• ESC overview grid with scaled thumbnails.
• Keyboard / wheel / touch nav — same model as guizang-ppt.
• Multilingual stack — EN / zh-CN / ja, set on :root via the language parameter.

30-second tour

The skill is "agent-driven, no script": there's no compose.ts. The agent reads SKILL.md, gathers the brief, then writes out/index.html directly using the tokens from design-systems/kami/DESIGN.md and the layout primitives in example.html.

To preview the canonical Open Design instance:

open example.html

To start a fresh project:

1. Open the skill in your agent (Claude · Cursor · Codex · …).
2. Answer two rounds of brief questions (identity + content).
3. Write the file. Done.

Files

skills/kami-deck/
├── SKILL.md      # ← agent contract (read this first)
├── README.md     # ← you are here
└── example.html  # canonical Open Design rendering (9 slides)

Boundaries

• No second accent color. No italic. No cool blue-grays. No hard drop shadows.
• One self-contained HTML file. No router, no external JS bundle.
• Cover / chapter / end slides only — no other slide kind goes dark.
• Tag fills must be solid hex (kami's print invariant), not rgba().

See also

• kami-landing — long-form one-pager sister.
• design-systems/kami/DESIGN.md — token spec.
• open-design-landing-deck — same swipe nav model, different visual language (Atelier Zero).
• Upstream: tw93/kami — original Claude skill (MIT) the design system adapts.