Skip to content
Get packs

Capsule HTML Deck Template

Builds a modular, pastel-style HTML slide deck for a year-end self-review.

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
3 files

What it does

This skill gives the agent a ready-made visual style, a 'Capsule' design of pill-shaped cards on a warm background with bright pastel accents, packaged as a single HTML slide deck. When asked, the agent fills that template with the user's own year-end review content, such as their role, outcomes, learning and requests, while keeping the fonts, colours and layout intact. It also asks first for missing details like audience, decision goal and key numbers, then drafts a slide plan and written slides.

Great for

  • A product manager who wants a polished, visual year-end self-review deck
  • Someone who wants a playful, modern-looking HTML presentation rather than a corporate template
  • Anyone adapting this template's look for a different personal or portfolio deck

Skip it if

  • Formal or highly institutional reviews, because the skill itself says the pastel style can soften authority
  • Situations where the user needs a deck that must be verified or edited in conventional slide software, since the output is raw HTML

Try asking

  • “Create a year-end self-review deck for my product manager role using the Capsule template”
  • “Ask me for the missing details first, then draft the slide plan and written slides for my promotion review”
  • “Turn these outcomes and metrics into a 10-slide HTML deck in the Capsule style”
Step-by-step guide: how to use Capsule HTML Deck TemplateInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the Apache-2.0 licence and an attribution note.

    html-ppt-zhangzara-capsule.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip html-ppt-zhangzara-capsule.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip html-ppt-zhangzara-capsule.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Provide your real numbers and evidence up front so the deck's claims are backed by data.
  • Tell the agent your review committee's decision goal so the slides are framed around it.
  • Open the resulting HTML file in a browser to check layout before sharing.

What's inside

  • example.html
  • SKILL.md
  • template.json

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.