skills.rest
Keimoshi
KeimoshiCOMMUNITY
Explore all skills by this author →
GitHub

kami-deck

Generate a single-file HTML slide deck in the kami print design system with horizontal swipe navigation.

Updated May 20, 2026
Search Tags:#typography#html#design system#single-file#presentation#slide deck#editorial
One-click install
npx skills add https://github.com/Keimoshi/Silverloft --skill kami-deck-keimoshi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: kami-deck
Source: https://github.com/Keimoshi/Silverloft/tree/main/open-design-port/skills/kami-deck
Command: npx skills add https://github.com/Keimoshi/Silverloft --skill kami-deck-keimoshi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Creating visually consistent, print-grade slide decks by hand requires deep typographic discipline and repetitive HTML/CSS work. This Skill produces a complete self-contained HTML deck in the kami (紙 / 纸) design system — warm parchment slides, ink-blue cover and chapter slides, serif at one weight — without any build tooling or external JavaScript. ## Core Features & Use Cases - Typed slide system: Seven slide kinds (cover, chapter, content, stats, quote, cta, end) with fixed background rules — ink-blue only for cover/chapter/end, parchment for everything else. - Full navigation model: Keyboard arrows, wheel, touch swipe, dot indicator, ink-blue progress bar, and an ESC overview grid with scaled slide thumbnails. - Multilingual type stacks: EN (Charter), zh-CN (TsangerJinKai02 / Source Han Serif), and ja (YuMincho) selected via a single language parameter. - Use Case: Ask your agent for a 9-slide Q1 portfolio review deck for a research firm — it gathers brand and content in two brief rounds, then writes one self-contained index.html with tabular-nums metrics and a closing CTA. ## Quick Start Ask your agent to build a kami-style deck by describing your brand, slide list, and language, for example: create a 9-slide kami deck for Hokuto Research with ink-blue chapter dividers and a stats slide.

Frequently Asked Questions about kami-deck

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an HTML slide deck with keyboard and swipe navigation?▼

Describe your brand, deck title, and ordered slide list to the agent, which writes a single index.html with a transformed flex track supporting arrow keys, wheel, touch swipe, dot navigation, and an ESC overview grid. No build step or external JavaScript is required.

What slide types does the kami deck support?▼

Seven typed slides are supported: cover, chapter, content, stats, quote, cta, and end. Cover, chapter, and end slides use an ink-blue background with ivory text, while all other slides stay on warm parchment.

Can I generate slides in Chinese or Japanese?▼

Yes, the language parameter accepts en, zh-CN, and ja. It switches the serif stack to Charter, TsangerJinKai02 / Source Han Serif, or YuMincho respectively, and adjusts the olive text tone for Japanese's thinner strokes.

Does the kami deck require any JavaScript libraries or frameworks?▼

No, the output is one self-contained HTML file with inline CSS and a small vanilla script for navigation. The only external dependency is Google Fonts loaded via link tags.

What design restrictions apply to kami-style slides?▼

The system forbids italic text, second accent colors, cool blue-grays, rgba tag fills, and hard drop shadows. Ink-blue must cover no more than 5 percent of any parchment slide, and all numeric elements use tabular-nums.

Related Skills

Explore More Design & Creative Skills→
mahg-esmahg-es
3

slide-deck-generate

Generate branded slide deck structures with per-slide content and speaker notes.

Official
Intermediate
gobi-aigobi-ai
3

gobi-html-artifact

Designs and publishes self-contained HTML pages as versioned Gobi artifacts via the gobi CLI.

Official
Intermediate
Intension-usIntension-us

design-consultation

Generate a DESIGN.md documenting typography, color, spacing, layout, and motion guidelines.

Official
Advanced
seal-harnessseal-harness
1

visual-review

Capture screenshots of web pages and UI with Playwright for visual inspection.

Official
Intermediate