kami-deck

nexu-io/open-design · design-templates/kami-deck/SKILL.md

A lab-meeting deck on gut-microbiome links to sleep quality — the design, the results, the caveats, and the next experiment. Built as a decision-grade academic research deck for lab group, PI.

Design & CreativeNo license★ 91788⑂ 10564commit 9881cff

Install skillView source on GitHub

What this skill does

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.

The navigation model is intentionally borrowed from the guizang-ppt skill — ←/→ arrow keys, wheel / swipe, ESC for the overview grid. The aesthetic stays kami: parchment content slides, ink-blue cover and chapter slides, serif everywhere.

Design system source of truth: design-systems/kami/DESIGN.md. Read it before shipping. Tokens, type rules, and forbidden colors all live there. Slide-specific scale ratios (macro × 1.6, letter-spacing × 0.6 vs. print) are documented in §3 "Hierarchy" and §5 "Layout Principles · Slides".

What you get

N viewport-sized slides (6-15 is the sweet spot) laid out horizontally on one transformed flex track.
Cover and chapter slides flip background to ink-blue (#1B365D) with ivory text — the only place dark theme is used.
Content / stats / quote / CTA 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, page number.
Coral-free — kami's accent is ink-blue. Progress bar and dot nav are ink-blue too.
Keyboard / wheel / touch nav, ESC overview grid, dot indicator.
Multilingual stack — EN / zh-CN / ja, set on :root via the language parameter.

Slide types

A typical 11-slide deck:

1. cover     — ink-blue title plate
2. chapter   — "01 / Why now"
3. content   — manifesto
4. content   — capabilities + bullets
5. stats     — 4 numbers
6. chapter   — "02 / How it feels"
7. content   — method
8. content   — selected work
9. quote     — testimonial
10. cta      — primary action
11. end      — ink-blue kicker

Workflow

1. Gather the brief

Ask in two rounds (don't dump the whole list at once):

Identity round — name, mark, tagline, location, edition, language.
Content round — for each slide, kind + the typed fields.

2. Pick the language stack

Same as kami-landing: EN → Charter, zh-CN → TsangerJinKai02 / Source Han Serif, ja → YuMincho. JA also overrides --olive to #4d4c48 because YuMincho strokes are thinner.

3. Write `index.html`

Output a single file with all CSS inline. Mirror the structure of example.html. Use only the tokens from design-systems/kami/DESIGN.md.

The runtime script (keyboard / wheel / touch nav, dot indicator, progress bar, ESC overview) should match the model documented in open-design-landing-deck/scripts/compose.ts. Do not reuse the open-design-landing-deck CSS; the visual language is different.

4. Self-check

[ ] All cover / chapter / end slides use ink-blue background (#1B365D) with ivory text. All other slides are on parchment.
[ ] Ink-blue covers ≤ 5% of any parchment slide's surface.
[ ] Slide titles use serif weight 500 only. No italic.
[ ] All numeric stacks (counter, metrics, page numbers) carry font-variant-numeric: tabular-nums.
[ ] Press → / Space / scroll. Smoothly slides one viewport to the right; dot nav advances; the ink-blue progress bar ticks forward.
[ ] Press Esc. Overview grid appears with scaled thumbnails.
[ ] Resize to 1080px and 640px. Cover / content collapse to a single column; dot nav still works.
[ ] Lighthouse: contrast AA, font-display swap, no layout shift.

Boundaries

Do not introduce a second accent color. Pick ink-blue or pick nothing.
Do not use italic anywhere — emphasis swaps to ink-blue.
Do not use rgba() for tag fills; pre-blend over parchment and use solid hex from the table in design-systems/kami/DESIGN.md §2.
Do not add a router. This is a single-file artifact.
Do not reuse Atelier Zero collage imagery (the open-design-landing visual system). Kami is gradient-free, image-light, and hierarchy is carried by type.

Installation

Copy a source-pinned command for your client. You run it yourself.

Destination: .claude/skills/kami-deck · pinned to the source commit

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/design-templates/kami-deck" ".claude/skills/"
rm -rf .skillboard-tmp

Review the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.

New here? Step-by-step setup – from installing the agent to using the skill

Operating systemAgentI already use Claude Code

1
Install Git
Install Git with your package manager (Debian/Ubuntu shown; use dnf/pacman on others). Official download.
```
sudo apt update && sudo apt install -y git
```
2
Install Claude Code
Requires Node.js 18+. Install the CLI globally: Official docs. (command-line tool)
```
npm install -g @anthropic-ai/claude-code
```

Get the skill, pinned to its exact version

Open a terminal and run these steps (they clone the source, check out the exact commit, and copy the skill into place):

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/design-templates/kami-deck" ".claude/skills/"
rm -rf .skillboard-tmp

Destination: .claude/skills/kami-deck

4
Use it in Claude Code
Open Claude Code in your project. It reads skills from the folder above, so kami-deck is now available. Always review the source before using it – static checks cannot prove runtime safety.

Security & Audits

Scanner static-checks@0.1.0 · commit 9881cff70e02. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.

lowPath traversal reference
References parent-directory traversal, which can escape a target directory.
Evidence: ../· fingerprint fa08499e14d0113b

kami-deck

nexu-io/open-design · design-templates/kami-deck/SKILL.md

A lab-meeting deck on gut-microbiome links to sleep quality — the design, the results, the caveats, and the next experiment. Built as a decision-grade academic research deck for lab group, PI.

Design & CreativeNo license★ 91788⑂ 10564commit 9881cff

Install skillView source on GitHub

What this skill does

kami-deck

Design system source of truth: design-systems/kami/DESIGN.md. Read it before shipping. Tokens, type rules, and forbidden colors all live there. Slide-specific scale ratios (macro × 1.6, letter-spacing × 0.6 vs. print) are documented in §3 "Hierarchy" and §5 "Layout Principles · Slides".

What you get

N viewport-sized slides (6-15 is the sweet spot) laid out horizontally on one transformed flex track.
Cover and chapter slides flip background to ink-blue (#1B365D) with ivory text — the only place dark theme is used.
Content / stats / quote / CTA 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, page number.
Coral-free — kami's accent is ink-blue. Progress bar and dot nav are ink-blue too.
Keyboard / wheel / touch nav, ESC overview grid, dot indicator.
Multilingual stack — EN / zh-CN / ja, set on :root via the language parameter.

Slide types

A typical 11-slide deck:

1. cover     — ink-blue title plate
2. chapter   — "01 / Why now"
3. content   — manifesto
4. content   — capabilities + bullets
5. stats     — 4 numbers
6. chapter   — "02 / How it feels"
7. content   — method
8. content   — selected work
9. quote     — testimonial
10. cta      — primary action
11. end      — ink-blue kicker

Workflow

1. Gather the brief

Ask in two rounds (don't dump the whole list at once):

Identity round — name, mark, tagline, location, edition, language.
Content round — for each slide, kind + the typed fields.

2. Pick the language stack

Same as kami-landing: EN → Charter, zh-CN → TsangerJinKai02 / Source Han Serif, ja → YuMincho. JA also overrides --olive to #4d4c48 because YuMincho strokes are thinner.

3. Write `index.html`

Output a single file with all CSS inline. Mirror the structure of example.html. Use only the tokens from design-systems/kami/DESIGN.md.

4. Self-check

[ ] All cover / chapter / end slides use ink-blue background (#1B365D) with ivory text. All other slides are on parchment.
[ ] Ink-blue covers ≤ 5% of any parchment slide's surface.
[ ] Slide titles use serif weight 500 only. No italic.
[ ] All numeric stacks (counter, metrics, page numbers) carry font-variant-numeric: tabular-nums.
[ ] Press → / Space / scroll. Smoothly slides one viewport to the right; dot nav advances; the ink-blue progress bar ticks forward.
[ ] Press Esc. Overview grid appears with scaled thumbnails.
[ ] Resize to 1080px and 640px. Cover / content collapse to a single column; dot nav still works.
[ ] Lighthouse: contrast AA, font-display swap, no layout shift.

Boundaries

Do not introduce a second accent color. Pick ink-blue or pick nothing.
Do not use italic anywhere — emphasis swaps to ink-blue.
Do not use rgba() for tag fills; pre-blend over parchment and use solid hex from the table in design-systems/kami/DESIGN.md §2.
Do not add a router. This is a single-file artifact.
Do not reuse Atelier Zero collage imagery (the open-design-landing visual system). Kami is gradient-free, image-light, and hierarchy is carried by type.

Installation

Copy a source-pinned command for your client. You run it yourself.

Destination: .claude/skills/kami-deck · pinned to the source commit

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/design-templates/kami-deck" ".claude/skills/"
rm -rf .skillboard-tmp

Review the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.

New here? Step-by-step setup – from installing the agent to using the skill

Operating systemAgentI already use Claude Code

1
Install Git
Install Git with your package manager (Debian/Ubuntu shown; use dnf/pacman on others). Official download.
```
sudo apt update && sudo apt install -y git
```
2
Install Claude Code
Requires Node.js 18+. Install the CLI globally: Official docs. (command-line tool)
```
npm install -g @anthropic-ai/claude-code
```

Get the skill, pinned to its exact version

Open a terminal and run these steps (they clone the source, check out the exact commit, and copy the skill into place):

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/design-templates/kami-deck" ".claude/skills/"
rm -rf .skillboard-tmp

Destination: .claude/skills/kami-deck

4
Use it in Claude Code
Open Claude Code in your project. It reads skills from the folder above, so kami-deck is now available. Always review the source before using it – static checks cannot prove runtime safety.

Security & Audits

Scanner static-checks@0.1.0 · commit 9881cff70e02. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.

lowPath traversal reference
References parent-directory traversal, which can escape a target directory.
Evidence: ../· fingerprint fa08499e14d0113b

kami-deck

What this skill does

kami-deck

What you get

Slide types

Workflow

1. Gather the brief

2. Pick the language stack

3. Write `index.html`

4. Self-check

Boundaries

See also

Installation

Install Git

Install Claude Code

Get the skill, pinned to its exact version

Use it in Claude Code

Security & Audits

kami-deck

What this skill does

kami-deck

What you get

Slide types

Workflow

1. Gather the brief

2. Pick the language stack

3. Write `index.html`

4. Self-check

Boundaries

See also

Installation

Install Git

Install Claude Code

Get the skill, pinned to its exact version

Use it in Claude Code

Security & Audits

kami-deck

What this skill does

kami-deck

What you get

Slide types

Workflow

1. Gather the brief

2. Pick the language stack

3. Write index.html

4. Self-check

Boundaries

See also

Installation

Install Git

Install Claude Code

Get the skill, pinned to its exact version

Use it in Claude Code

Security & Audits

kami-deck

What this skill does

kami-deck

What you get

Slide types

Workflow

1. Gather the brief

2. Pick the language stack

3. Write index.html

4. Self-check

Boundaries

See also

Installation

Install Git

Install Claude Code

Get the skill, pinned to its exact version

Use it in Claude Code

Security & Audits

3. Write `index.html`

3. Write `index.html`