pakco77/pakco-html/pakco-html

pakco.html

pakco.html is a local-first visual taste menu for AI-generated decks. It helps users stop describing taste from scratch: browse visible styles, copy an executable prompt, and let Claude Code / Codex / Hermes / WorkBuddy / TRAE Work generate the deck with stable visual constraints.

The underlying skill still authors professional HTML presentations as static files, with themes, full-deck taste cards, layouts, animations, and prompts. One theme file = one look. One layout file = one page type. One animation class = one entry effect. All pages share a token-based design system in assets/base.css.

Install

Codex

Ask Codex to install the GitHub skill from the repo root:

Install this skill from GitHub: https://github.com/pakco77/pakco-html
Use the repo root as the skill path and install it as pakco-html.

Terminal fallback:

curl -fsSL https://raw.githubusercontent.com/pakco77/pakco-html/refs/heads/main/scripts/install-codex.sh | bash

Restart Codex after installation so it reloads ~/.codex/skills/pakco-html.

Claude Code / AgentSkill CLI

npx skills add https://github.com/pakco77/pakco-html

WorkBuddy

Install into WorkBuddy's user Skill directory:

curl -fsSL https://raw.githubusercontent.com/pakco77/pakco-html/refs/heads/main/scripts/install-agent.sh | bash -s -- workbuddy

Restart WorkBuddy or refresh Skills after installation.

TRAE Work / TRAE SOLO

Use the AgentSkill CLI target that matches the installed edition:

npx skills add https://github.com/pakco77/pakco-html --agent trae-cn -g
# International edition:
npx skills add https://github.com/pakco77/pakco-html --agent trae -g

Terminal fallback for TRAE Work CN:

curl -fsSL https://raw.githubusercontent.com/pakco77/pakco-html/refs/heads/main/scripts/install-agent.sh | bash -s -- trae-work

Restart TRAE Work or refresh Skills after installation.

Other AgentSkill agents

For supported agents, use the skills CLI agent target:

npx skills add https://github.com/pakco77/pakco-html --agent kimi-code-cli
npx skills add https://github.com/pakco77/pakco-html --agent qwen-code
npx skills add https://github.com/pakco77/pakco-html --agent gemini-cli

For any other agent that reads a local SKILL.md folder, use the generic installer:

curl -fsSL https://raw.githubusercontent.com/pakco77/pakco-html/refs/heads/main/scripts/install-agent.sh | bash -s -- ~/.some-agent/skills/pakco-html

No build. Pure static HTML/CSS/JS with only CDN webfonts.

What the skill gives you

• 36 themes (assets/themes/*.css) — minimal-white, editorial-serif, soft-pastel, sharp-mono, arctic-cool, sunset-warm, catppuccin-latte/mocha, dracula, tokyo-night, nord, solarized-light, gruvbox-dark, rose-pine, neo-brutalism, glassmorphism, bauhaus, swiss-grid, terminal-green, xiaohongshu-white, rainbow-gradient, aurora, blueprint, memphis-pop, cyberpunk-neon, y2k-chrome, retro-tv, japanese-minimal, vaporwave, midcentury, corporate-clean, academic-paper, news-broadcast, pitch-deck-vc, magazine-bold, engineering-whiteprint
• 24 deck taste cards (templates/full-decks/<name>/ + Guizang variants) — 15 native complete multi-slide decks with scoped .tpl-<name> CSS, plus 9 Guizang color variants. Native templates include 8 extracted looks (xhs-white-editorial, graphify-dark-graph, knowledge-arch-blueprint, hermes-cyber-terminal, obsidian-claude-gradient, testing-safety-alert, xhs-pastel-card, dir-key-nav-minimal) and 7 scenario scaffolds (pitch-deck, product-launch, tech-sharing, weekly-report, xhs-post 3:4, course-module, presenter-mode-reveal — 演讲者模式专用)
• 31 layouts (templates/single-page/*.html) with realistic demo data
• 27 CSS animations (assets/animations/animations.css) via data-anim
• 20 canvas FX animations (assets/animations/fx/*.js) via data-fx — particle-burst, confetti-cannon, firework, starfield, matrix-rain, knowledge-graph (force-directed), neural-net (pulses), constellation, orbit-ring, galaxy-swirl, word-cascade, letter-explode, chain-react, magnetic-field, data-stream, gradient-blob, sparkle-trail, shockwave, typewriter-multi, counter-explosion
• Keyboard runtime (assets/runtime.js) — arrows, T (theme), A (anim), F/O, S (presenter mode: magnetic-card popup with CURRENT / NEXT / SCRIPT / TIMER cards), N (notes drawer), R (reset timer in presenter)
• FX runtime (assets/animations/fx-runtime.js) — auto-inits [data-fx] on slide enter, cleans up on leave
• Showcase decks for themes / layouts / animations / full-decks gallery
• Headless Chrome render script for PNG export

Opening the style picker

When the user asks to open/browse the style menu (e.g. "html来", "打开风格菜单", "打开 pakco-html", "打开html风格", "看看有什么风格", "open the picker"), treat the directory containing this SKILL.md as SKILL_ROOT. Start a local server from that directory and open the picker in the host's browser or HTML preview:

cd "$SKILL_ROOT" && python3 -m http.server 8000 &
# then open: http://localhost:8000/templates/style-picker.html

Common roots are ~/.codex/skills/pakco-html, ~/.claude/skills/pakco-html, ~/.workbuddy/skills/pakco-html, ~/.trae/skills/pakco-html, and ~/.trae-cn/skills/pakco-html. Check the actual loaded Skill path instead of assuming one of them.

The picker shows 60+ live previews across 4 tabs (Skins / Templates / UI Taste / Social Cards). The user clicks a card to copy the prompt, then pastes it back to you.

When to use

Use when the user asks for any kind of slide-based output or wants to turn text/notes into a presentable deck. Prefer this over building from scratch.

🎤 Presenter Mode (演讲者模式 + 逐字稿)

If the user mentions any of: 演讲 / 分享 / 讲稿 / 逐字稿 / speaker notes / presenter view / 演讲者视图 / 提词器, or says things like "我要去给团队讲 xxx", "要做一场技术分享", "怕讲不流畅", "想要一份带逐字稿的 PPT" — use the `presenter-mode-reveal` full-deck template and write 150–300 words of 逐字稿 in each slide's <aside class="notes">.

See references/presenter-mode.md for the full authoring guide including the 3 rules of speaker script writing:

1. 不是讲稿，是提示信号 — 加粗核心词 + 过渡句独立成段
2. 每页 150–300 字 — 2–3 分钟/页的节奏
3. 用口语，不用书面语 — "因此"→"所以"，"该方案"→"这个方案"

All full-deck templates support the S key presenter mode (it's built into runtime.js). S opens a new popup window with 4 magnetic cards:

• 🔵 CURRENT — pixel-perfect iframe preview of the current slide
• 🟣 NEXT — pixel-perfect iframe preview of the next slide
• 🟠 SPEAKER SCRIPT — large-font 逐字稿 (scrollable)
• 🟢 TIMER — elapsed time + slide counter + prev/next/reset buttons

Each card is draggable by its header and resizable by the bottom-right corner handle. Card positions/sizes persist to localStorage per deck. A "Reset layout" button restores the default arrangement.

Why the previews are pixel-perfect: each preview is an <iframe> that loads the actual deck HTML with a ?preview=N query param; runtime.js detects this and renders only slide N with no chrome. So the preview uses the same CSS, theme, fonts, and viewport as the audience view — colors and layout are guaranteed identical.

Smooth navigation: on slide change, the presenter window sends postMessage({type:'preview-goto', idx:N}) to each iframe. The iframe just toggles .is-active between slides — no reload, no flicker. The two windows also stay in sync via BroadcastChannel.

Only presenter-mode-reveal is designed from the ground up around the feature with proper example 逐字稿 on every slide.

Keyboard in presenter window: ← → navigate (syncs audience) · R reset timer · Esc close popup. Keyboard in audience window: S open presenter · T cycle theme · ← → navigate (syncs presenter) · F fullscreen · O overview.

📱 网页模式（Webpage Mode）

If the user says any of: 网页 / 网页版 / 网页形态 / 做个网页 / 生成网页 / web page / webpage / 长页面 / 上下滑 / 手机看的 / 发链接给别人看, or the content is meant for 阅读、传播、存档 rather than live presentation — use the webpage template instead of a deck.

Webpage mode produces a vertically scrolling HTML page with no slide boundaries. Key differences from deck:

How to scaffold:

<body class="webpage">
<div class="page">
  <section class="hero">...</section>
  <div class="section-break"></div>
  <section>...</section>
  ...
  <div class="page-footer">...</div>
</div>
</body>

Starter template: templates/webpage.html. Copy it to start a new webpage. All design tokens (themes, .card, .grid, .pill, .gradient-text, etc.) work in both modes. Do NOT include runtime.js in webpage mode — it's not needed.

Before you author anything — ALWAYS ask or recommend

Do not start writing slides until you understand three things. Either ask the user directly, or — if they already handed you rich content — propose a tasteful default and confirm.

1. Content & audience. What's the deck about, how many slides, who's

watching (engineers / execs / 小红书读者 / 学生 / VC)?

1. Style / theme. Which of the 36 themes fits? If unsure, recommend 2-3

candidates based on tone:

• Business / investor pitch → pitch-deck-vc, corporate-clean, swiss-grid
• Tech sharing / engineering → tokyo-night, dracula, catppuccin-mocha,

terminal-green, blueprint

• 小红书图文 → xiaohongshu-white, soft-pastel, rainbow-gradient,

magazine-bold

• Academic / report → academic-paper, editorial-serif, minimal-white
• Edgy / cyber / launch → cyberpunk-neon, vaporwave, y2k-chrome,

neo-brutalism

1. Starting point. One of the 15 native full-deck templates, 9 Guizang variants, or scratch? Point

to the closest templates/full-decks/<name>/ and ask if it fits. If the user's content suggests something obvious (e.g. "我要做产品发布会" → product-launch), propose it confidently instead of asking blindly.

A good opening message looks like:

我可以给你做这份 PPT！先确认三件事：

1. 大致内容 / 页数 / 观众是谁？

2. 风格偏好？我建议从这 3 个主题里选一个：tokyo-night（技术分享默认好看）、xiaohongshu-white（小红书风）、corporate-clean（正式汇报）。

3. 要不要用我现成的 tech-sharing 全 deck 模板打底？

Only after those are clear, scaffold the deck and start writing.

Update (更新)

When the user says "更新 pakco-html", "update pakco-html", "升级", or "拉最新版", use the directory containing this SKILL.md as SKILL_ROOT, then run:

bash "$SKILL_ROOT/scripts/update.sh"

If scripts/update.sh doesn't exist yet (old install), run the equivalent inline:

TMP=$(mktemp -d) && git clone --depth 1 https://github.com/pakco77/pakco-html.git "$TMP/r" 2>/dev/null && cp -r "$TMP/r/assets" "$TMP/r/templates" "$TMP/r/references" "$TMP/r/scripts" "$SKILL_ROOT/" && cp "$TMP/r/SKILL.md" "$SKILL_ROOT/" && rm -rf "$TMP" && echo "✅ 更新完成"

All existing decks that reference assets/ via relative paths will automatically get the latest features (themes, layouts, mobile support, bug fixes) — no HTML changes needed.

Quick start