Frontend Slides
zarazhangrui/frontend-slides
Builds animated HTML slide decks that run in the browser with no dependencies, or converts PowerPoint files to the web, starting from visual style previews.
A skill your agent uses when the user asks the openkb chat to make a deck / slide presentation / PPT / slides / 演示稿 / 幻灯片 from their compiled KB content.
$ npx skills add VectifyAI/OpenKB --skill openkb-deck-editorial -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install VectifyAI/OpenKB openkb-deck-editorial --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/VectifyAI/OpenKB.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/openkb-deck-editorial .claude/skills/openkb-deck-editorial && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "openkb-deck-editorial" agent skill from https://github.com/VectifyAI/OpenKB/tree/main/skills/openkb-deck-editorial into .claude/skills/openkb-deck-editorial/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "openkb-deck-editorial", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/VectifyAI/OpenKB/tree/main/skills/openkb-deck-editorialType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add VectifyAI/OpenKB --skill openkb-deck-editorial -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install VectifyAI/OpenKB openkb-deck-editorial --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/VectifyAI/OpenKB.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/openkb-deck-editorial .agents/skills/openkb-deck-editorial && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "openkb-deck-editorial" agent skill from https://github.com/VectifyAI/OpenKB/tree/main/skills/openkb-deck-editorial into .agents/skills/openkb-deck-editorial/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "openkb-deck-editorial", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add VectifyAI/OpenKB --skill openkb-deck-editorial -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install VectifyAI/OpenKB openkb-deck-editorial --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/VectifyAI/OpenKB.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/openkb-deck-editorial .cursor/skills/openkb-deck-editorial && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "openkb-deck-editorial" agent skill from https://github.com/VectifyAI/OpenKB/tree/main/skills/openkb-deck-editorial into .cursor/skills/openkb-deck-editorial/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "openkb-deck-editorial", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/VectifyAI/OpenKB.git --path skills/openkb-deck-editorial--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add VectifyAI/OpenKB --skill openkb-deck-editorial -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install VectifyAI/OpenKB openkb-deck-editorial --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/VectifyAI/OpenKB.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/openkb-deck-editorial .gemini/skills/openkb-deck-editorial && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "openkb-deck-editorial" agent skill from https://github.com/VectifyAI/OpenKB/tree/main/skills/openkb-deck-editorial into .gemini/skills/openkb-deck-editorial/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "openkb-deck-editorial", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install VectifyAI/OpenKB openkb-deck-editorialInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add VectifyAI/OpenKB --skill openkb-deck-editorial -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/VectifyAI/OpenKB.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/openkb-deck-editorial .github/skills/openkb-deck-editorial && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "openkb-deck-editorial" agent skill from https://github.com/VectifyAI/OpenKB/tree/main/skills/openkb-deck-editorial into .github/skills/openkb-deck-editorial/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "openkb-deck-editorial", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add VectifyAI/OpenKB --skill openkb-deck-editorial -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install VectifyAI/OpenKB openkb-deck-editorial --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/VectifyAI/OpenKB.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/openkb-deck-editorial .opencode/skills/openkb-deck-editorial && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "openkb-deck-editorial" agent skill from https://github.com/VectifyAI/OpenKB/tree/main/skills/openkb-deck-editorial into .opencode/skills/openkb-deck-editorial/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "openkb-deck-editorial", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
openkb-deck-editorialA skill your agent uses when the user asks the openkb chat to make a deck / slide presentation / PPT / slides / 演示稿 / 幻灯片 from their compiled KB content.
Openkb Deck Editorial is an agent skill from VectifyAI/OpenKB. Use when the user asks the openkb chat to make a deck / slide presentation / PPT / slides / 演示稿 / 幻灯片 from their compiled KB content. Generates a polished single-file HTML deck in the Editorial Monocle visual direction (warm cream background, serif type, brick-red accent) — designed to be opened in a browser, full-screened, and shared. Does NOT apply to generating skills (that's openkb skill new), long-form research reports, or interactive prototypes.
Its SKILL.md is about 2.1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Documents & Office, covering Slides and decks, Deep research and HTML artifacts. The repository describes itself as: OpenKB: Open LLM Knowledge Base. The licence is Apache-2.0.
8 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit ff54396. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
No scripts in the folder and no shell commands in SKILL.md (its code samples are css).
From the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Openkb Deck Editorial loads about 2.1k tokens when it runs. Until then it costs about 120 tokens; SKILL.md has 963 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
The full file from VectifyAI/OpenKB at commit ff54396, republished under its Apache-2.0 licence (© VectifyAI). 963 words, ~2,095 tokens.
.claude/skills/openkb-deck-editorial/SKILL.md (or your agent's skills folder).You are designing a presentation, not writing a research report. Each slide carries one idea. Visual structure carries the narrative.
The user typed something like "make a deck about X" inside openkb chat.
You have wiki-read tools in your normal tool set, plus a write_file
tool that can write under output/**, plus a shell tool you can use to
read this SKILL.md and any files in skills/openkb-deck-editorial/ if
needed.
Pick a kebab-case slug for the deck (e.g. transformers-pitch) and
write the output to output/decks/<slug>/index.html.
Exactly one file: output/decks/<slug>/index.html.
It must be self-contained: no external <link rel="stylesheet">,
no external <script src="…">, no remote <img>. All CSS goes in a
single inline <style> in <head>. Helper JS for keyboard navigation
goes in a single inline <script> at end of <body>.
The body is a sequence of <section class="slide" data-type="...">
blocks. Each data-type must be one of the 7 values listed in §
"Slide grammar" below. The deck supports keyboard navigation: ← / →
move between slides, F toggles fullscreen, P triggers print.
Use this fixed design system. Do not improvise nearby colors, do not introduce gradients, do not bring in emojis. This is the only non-monochrome palette in the entire deck.
:root {
--bg: #f3eee1; /* oklch(94% 0.03 80) — warm cream paper */
--ink: #1a1612; /* oklch(15% 0.01 50) — warm near-black */
--muted: #7a6e55; /* oklch(55% 0.04 75) — labels / metadata */
--rule: #d4cfc0; /* oklch(82% 0.02 75) — thin separator */
--accent: #a4341c; /* oklch(45% 0.16 30) — brick red, the ONLY non-monochrome */
--highlight: #fff3a8; /* oklch(95% 0.10 95) — marker highlighter ONLY */
}font-family-serif: "Charter", "Iowan Old Style", "Times New Roman", Georgia, serif;
font-family-sans: "Inter", -apple-system, "Helvetica Neue", sans-serif; /* labels only */Type scale (size / line-height / letter-spacing):
--type-display: 56px / 1.05 / -1px — cover/chapter big titles--type-title: 38px / 1.10 / -0.5px — normal slide titles--type-body: 18px / 1.55 / 0 — body copy--type-quote: 28px / 1.30 / -0.3px italic — pull quotes--type-label: 10px / 1.0 / 2.5px uppercase — top/bottom label tracksaspect-ratio: 16/9; width: 100vw; max-width: 1280px;N / Total, right = source short label..display) must use max-width: 18ch (NOT 10ch).
Never wrap an article ("the", "an", "to") onto its own line..data-body { align-items: center; text-align: center } for
data-type="data" only — leave other slide types left-aligned).
Body copy beneath stays centered, max-width 38em..cover-body, .closing-body { max-width: 26em }..kbd { opacity: 0; transition: opacity .25s ease; }
body:hover .kbd { opacity: .55; }data-type values)data-type | Use | Visual signature |
|---|---|---|
cover | First slide: tag + huge title + 1-line subtitle | Display type, left-aligned, never centered |
chapter | Section divider: oversize number + chapter name | Number 120px brick-red, name 38px serif |
thesis | A single claim + a short explanation | Title fills ~60% height, explanation small bottom |
quote | Italic pull-quote + attribution | Centered, serif italic 28px, generous whitespace |
compare | Two-column comparison: header + 3-5 lines each side | 1px brick-red vertical rule between columns |
data | One number + label + one-line interpretation | Number 120-160px brick-red, micro-copy 12px |
closing | Mirrors cover; thanks / next steps | Same scale as cover but content closes the arc |
Cover/closing exception: the cover and closing slides have no
chapter context, so the top-left label is the deck identifier
("OPENKB") instead of a CHAPTER NN id.
concepts/ and
summaries/, and read wiki/index.md. Form a mental map before
committing to what the deck argues.data-type assignments. Vary data-type — at least 4
distinct types, no run of 3+ consecutive same type.output/decks/<slug>/index.html in one write_file
call. Inline all CSS, inline the keyboard nav JS, use inline
<svg> only for any graphics (v1 does not embed bitmap images).compare / data slide.data-type.quote and closing are centered.output/decks/<slug>/index.html exist and contain no external
<link> or <script src=>?data-type="cover" and one
data-type="closing"?data-type values used?data-type?If any answer is no, revise and re-run this self-check.
© VectifyAI, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Just SKILL.md in skills/openkb-deck-editorial of VectifyAI/OpenKB.
Open the folder on GitHubat commit ff54396
We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in VectifyAI/OpenKB, which our catalogue first saw on October 7, 2026.
Openkb Deck Editorial next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Openkb Deck Editorial this skillVectifyAI/OpenKB | 4.7k | 1 repos | ~2.1k | Automated safety check: Pass | Apache-2.0 | |
| Frontend Slideszarazhangrui/frontend-slides | 30k | 16 repos | ~7k | Automated safety check: Pass | MIT | |
| Single-File HTML Slide Decksop7418/guizang-ppt-skill | 27k | 1 repos | ~6.3k | Automated safety check: Pass | AGPL-3.0 | |
| PPT as CodeRussell-cell/PPT-as-code | 191 | — | ~11k | Automated safety check: Pass | MIT | |
| Markdown HTML Orchestratoralirezarezvani/claude-skills | 28k | — | ~2.7k | Automated safety check: Pass | MIT | |
| Data Viz Deckthatrebeccarae/claude-marketing | 162 | — | ~1.8k | Automated safety check: Pass | MIT |
zarazhangrui/frontend-slides
Builds animated HTML slide decks that run in the browser with no dependencies, or converts PowerPoint files to the web, starting from visual style previews.
op7418/guizang-ppt-skill
Generates single-file HTML slide decks with horizontal paging, WebGL backgrounds and a presenter view, in an editorial-magazine style or a Swiss-style layout.
Russell-cell/PPT-as-code
Plans and builds HTML-based web presentations through staged quick, basic or advanced workflows, with optional visualization planning, motion, a workbench and PPTX export handoff.
alirezarezvani/claude-skills
A skill your agent uses when a user wants to convert any markdown file in their Claude project into a single-file, lightly-interactive HTML — long-form documents (specs, plans, RFCs, reports…
thatrebeccarae/claude-marketing
Transform audit data, performance reports, and structured analyses into polished visual deliverables.
lewislulu/html-ppt-skill
Authors static HTML presentations from a library of themes, layouts and animations, with keyboard navigation, for talks, pitch decks and reports.
VectifyAI/OpenKB
A skill your agent uses when the user asks the openkb chat to make a deck / slide presentation / PPT / slides / 演示稿 / 幻灯片 from their compiled KB content AND wants a dark, high-tech, neon / glow /…
VectifyAI/OpenKB
A skill your agent uses when the user asks about content in their OpenKB knowledge base — research topics, concepts compiled from their documents, cross-document synthesis — or mentions openkb, an…
VectifyAI/OpenKB
A skill your agent uses to review a generated HTML deck or single-page artifact for visual quality and structural correctness.
Categories
A skill your agent uses when the user asks the openkb chat to make a deck / slide presentation / PPT / slides / 演示稿 / 幻灯片 from their compiled KB content. Openkb Deck Editorial is an agent skill from VectifyAI/OpenKB. Use when the user asks the openkb chat to make a deck / slide presentation / PPT / slides / 演示稿 / 幻灯片 from their compiled KB content.
Openkb Deck Editorial fits situations like: the user asks the openkb chat to make a deck / slide presentation / PPT / slides / 演示稿 / 幻灯片 from their compiled KB content; tasks that involve Slides and decks; tasks that involve Deep research.
Run `npx skills add VectifyAI/OpenKB --skill openkb-deck-editorial -a claude-code`. Or copy the skill folder (skills/openkb-deck-editorial in VectifyAI/OpenKB) into .claude/skills/openkb-deck-editorial in your project. Claude Code loads it when a task matches its description.
Run `npx skills add VectifyAI/OpenKB --skill openkb-deck-editorial -a codex`. Or copy the skill folder (skills/openkb-deck-editorial in VectifyAI/OpenKB) into .agents/skills/openkb-deck-editorial in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add VectifyAI/OpenKB --skill openkb-deck-editorial -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/openkb-deck-editorial, .gemini/skills/openkb-deck-editorial, .github/skills/openkb-deck-editorial and .opencode/skills/openkb-deck-editorial in your project.
SKILL.md names no scripts, command-line tools or credentials: Openkb Deck Editorial is instructions for the agent only.
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
Openkb Deck Editorial is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 2.1k tokens (SKILL.md is roughly 8.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
Skills that share tags, products or a category with Openkb Deck Editorial: Frontend Slides (zarazhangrui/frontend-slides, 30k stars), Single-File HTML Slide Decks (op7418/guizang-ppt-skill, 27k stars), PPT as Code (Russell-cell/PPT-as-code, 191 stars) and Markdown HTML Orchestrator (alirezarezvani/claude-skills, 28k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
VectifyAI (a GitHub organization) maintains it in VectifyAI/OpenKB, which has 4,746 GitHub stars. The repository holds 4 skills in this directory. The repository was last updated on July 22, 2026.
Source: VectifyAI/OpenKB on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.