New to Claude Skills? Learn how to install them →

Get Claude Skills
nexu-io on GitHub

HTML Capsule Deck

Free

Create modern, modular presentation decks with ease.

by nexu-io84.9k stars on nexu-io/open-design
Updated Aug 10, 2026
Get this skill

Free · Opens the source repo

What HTML Capsule Deck does

The HTML Capsule Deck is a specialized tool designed for crafting visually appealing presentation decks, particularly suited for year-end self-reviews and personal portfolios. This skill provides a structured approach to building a decision-grade career deck, focusing on the role, outcomes, learning experiences, and requests, all backed by evidence. The modular design features pill-shaped cards and a pastel color palette, ensuring that the presentations are not only functional but also engaging and modern.

The workflow is straightforward and user-friendly. Users start by cloning the provided example.html file, which serves as a template for their presentations. They can easily replace placeholder content with their own information, ensuring that the typography and design elements remain consistent throughout. The skill emphasizes the importance of preserving the design system, which includes specific fonts, colors, and decorative elements that contribute to the overall identity of the deck. This ensures that the final output is cohesive and professional.

The HTML Capsule Deck is ideal for a variety of contexts, particularly those that benefit from a modern and playful aesthetic, such as lifestyle brands, creator portfolios, and agency credentials. It is particularly effective in situations where a light-hearted approach is appropriate, making it a great choice for tech demos or research presentations that aim for clarity and engagement. However, it is not recommended for formal settings that require a more traditional and authoritative presentation style, as the playful design may undermine the seriousness of the content.

Overall, the HTML Capsule Deck skill is a valuable resource for anyone looking to create impactful and visually engaging presentations without compromising on design integrity. By following the structured workflow and design guidelines, users can produce high-quality decks that effectively communicate their messages while maintaining a modern aesthetic.

When to use it

Use this skill when you need to create a modern, modular presentation that is visually engaging and suitable for informal contexts.

When not to use it

Avoid this skill for formal presentations that require a traditional and authoritative design aesthetic.

What you can build with it

Creating a Year-End Self-Review

Use the HTML Capsule Deck to build a visually engaging self-review presentation that highlights your achievements and learning over the year.

Designing a Portfolio for a Creative Role

Leverage the modular design of the deck to showcase your work in a visually appealing manner, perfect for applying to creative positions.

Developing a Tech Demo Presentation

Utilize the playful and modern aesthetic of the deck to create an engaging presentation for a tech demo that captures your audience's attention.

How to install HTML Capsule Deck

View source

1. Install with the skills CLI

npx skills add nexu-io/open-design/html-ppt-zhangzara-capsule --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by nexu-io

Capsule

Modular pill-shaped cards on warm bone with a full pastel-pop palette.

A single self-contained HTML deck — typography, palette, decorative system, and slide vocabulary are all tuned together. Mixing layouts across templates breaks the system; stay inside this one.

At a glance

  • Scheme: light
  • Formality: medium-low
  • Density: medium
  • Slides in demo: 10

Best for

Anything that should feel modular, modern, and a little Y2K: lifestyle brands, creator portfolios, DTC launches, beauty / wellness, agency credentials. Also fun for a playful tech demo or a research deck that wants pop-art clarity instead of gravitas.

Avoid for

Contexts that require traditional institutional weight — the capsule shapes and pastel pops actively soften authority.

Workflow

  1. Clone example.html into the user's workspace as the working file.
  2. Replace placeholder content with the user's real headlines, body copy, numbers, names, dates, and section labels. Match existing dimensions when swapping image placeholders.
  3. Preserve the design system. Never substitute fonts, recolor the palette, restructure the layout grid, or strip decorative elements (corner brackets, paper grain, geometric shapes, illustrated SVGs). They are part of the identity.
  4. Adjust deck length by duplicating layouts. If the user has more content than the demo holds, duplicate an existing slide of the most appropriate layout. If less, drop slides from the bottom. Update page-number labels.
  5. Designing missing layouts: if a slide needs a layout the template doesn't have, design it from scratch using the same fonts, palette, decorative vocabulary, spacing rhythm, and component grammar — never bail to a different template.
  6. Keep the navigation runtime as shipped. If the deck ships an assets/deck-stage.js or inline keyboard handler, leave it intact.

Output contract

Emit between <artifact> tags:

<artifact identifier="zhangzara-capsule" type="text/html" title="Deck Title">
<!doctype html>
<html>...</html>
</artifact>

Source & license

Vendored from upstream MIT-licensed zarazhangrui/beautiful-html-templates.

The full upstream MIT license text — including the original copyright notice — ships in this skill at LICENSE and must be redistributed alongside any copy of example.html, template.json, or any vendored assets/ runtime. See template.json for the upstream metadata snapshot.

Frequently asked questions about HTML Capsule Deck

Similar skills

PPTX HTML Fidelity Audit

Ensure your PPTX matches its HTML source perfectly.

HTML PPT Studio

Create professional HTML presentations effortlessly.

Humanize PPT

Transform raw material into presentation-ready outlines.

Replit Deck

Create visually cohesive decision decks with ease.

Open Design Landing Deck

Create engaging marketing decks with a magazine-style format.

Magazine Web Presentation

Create visually striking HTML presentations with ease.