# Animated web deck about its own skill

> A dark browser deck with gold-accented serif headlines, a style quiz, and a theme picker, made with the creator's frontend-slides skill to show what it does. The creator describes the request rather than quoting it; the skill asks about looks before building.

- Kind: Slides
- Page: https://meetreference.com/v/animated-web-deck-about-its-own-skill/
- Ready-to-use agent handoff: https://meetreference.com/v/animated-web-deck-about-its-own-skill/agent.txt
- Exact prompt as plain text: https://meetreference.com/v/animated-web-deck-about-its-own-skill/prompt.txt
- Authorship: Not stated
- Made with: Not stated
- Model: not stated
- Built with: HTML and CSS
- Skills or plugins: frontend-slides
- Style: Decks; html deck, web slides, dark, serif, gold accent, animated, interactive
- Shared by @zarazhangrui in X, Jan 28, 2026: https://x.com/zarazhangrui/status/2016337615843434646
- Prompt fidelity: Paraphrased. The creator described the prompt in their own words rather than publishing it.

## Before you start

Guidance from Reference, separate from the creator's instructions.

1. Read the reference and inspect the project, installed libraries, and available agent skills before writing code. Reuse suitable tools already present.
2. Prefer the creator-reported libraries and skills when they fit the task. Explain what useful additions help with, and install missing project dependencies or relevant skills from official sources when the environment and the user's existing permissions allow it. Respect the project's package manager and setup rules; do not ask again for routine setup already authorized.
3. Distinguish tools used by the creator from your own recommendations. A listed tool is not automatically required, and an empty tools or requirements list means the setup is unknown, not that nothing is needed.
4. Ask concise questions when missing inputs or choices materially affect the result: paid services, credentials, the user's assets, or a different production approach. Use existing answers and permissions; continue independent work while waiting.
5. If a useful library, skill, or service cannot be installed or used, explain an available alternative and its expected effect on quality, features, or effort. Get the user's choice before a material compromise; otherwise state the fallback and continue. Never silently simplify the result or claim to have used a tool you did not use.

Requirements reported by the source: The frontend-slides skill (in Claude Code: /plugin marketplace add https://github.com/zarazhangrui/frontend-slides, then /plugin install frontend-slides@frontend-slides); Answers to the skill's style questions.

## Recreating this deck

These are the creator's published instructions, unedited.

To adapt it: With the skill installed, start it and replace "a slide show about this skill" with your own subject, as in the README's "I want to create a pitch deck for my AI startup". The look comes from the preview you pick.

## Prompt

```text
"I asked Claude to make a slide show about this skill to showcase what it can do."
```

## What it looks like

Written by Reference from the video frames, not by the creator.

A dark presentation in the browser: near-black slides with soft gold glows, serif headlines, and a thin gold progress line along the top. A cursor highlight is visible on several slides.

- Color: Near-black and charcoal with warm gold accents and cream text; a muted red outline on one slide and small neon swatches in the theme picker.
- Type: High-contrast serif headlines ("Presentations are broken.", "Four principles."), small spaced gold capitals for section labels, and a small sans-serif for body text.
- Framing: Headlines left-aligned or centered with lots of dark space, cards in two-by-two grids, a column of navigation dots on the right edge, and a modal of theme cards over a darkened slide.
- Structure: The problem (four tool cards), Claude interviews you (a radio-button question about the vibe), three simple steps, first one and then all three, four principles, Convert your PPT, a Dark Themes picker with four swatches, Find your aesthetic with three style groups, and a blurred closing title.

Storyboard, nine frames spread across the video: https://meetreference.com/media/animated-web-deck-about-its-own-skill/storyboard.webp

- Frame 1 at 3.5s: https://meetreference.com/media/animated-web-deck-about-its-own-skill/f1.webp
- Frame 2 at 10.5s: https://meetreference.com/media/animated-web-deck-about-its-own-skill/f2.webp
- Frame 3 at 17.4s: https://meetreference.com/media/animated-web-deck-about-its-own-skill/f3.webp
- Frame 4 at 24.4s: https://meetreference.com/media/animated-web-deck-about-its-own-skill/f4.webp
- Frame 5 at 31.4s: https://meetreference.com/media/animated-web-deck-about-its-own-skill/f5.webp
- Frame 6 at 38.3s: https://meetreference.com/media/animated-web-deck-about-its-own-skill/f6.webp
- Frame 7 at 45.3s: https://meetreference.com/media/animated-web-deck-about-its-own-skill/f7.webp
- Frame 8 at 52.3s: https://meetreference.com/media/animated-web-deck-about-its-own-skill/f8.webp
- Frame 9 at 59.2s: https://meetreference.com/media/animated-web-deck-about-its-own-skill/f9.webp

## How it was made, per the creator

- Notes: Per the post, Claude interviews you about aesthetics first, then generates a few directions to "show not tell" so you can pick one; the skill can also convert existing PowerPoint files and keep their images. The README describes it as a Claude Code plugin that writes single HTML files with inline CSS and JavaScript, and its usage example is the skill command followed by "I want to create a pitch deck for my AI startup".

> The world hasn't woken up to the fact that code can create much better slides than most PPT tools.
> (@zarazhangrui)

## Links

- Watch: https://x.com/zarazhangrui/status/2016337615843434646
- Original post: https://x.com/zarazhangrui/status/2016337615843434646
- frontend-slides on GitHub: https://github.com/zarazhangrui/frontend-slides
- Creator's reply with the skill link: https://x.com/zarazhangrui/status/2016337749700481394
- Creator's walkthrough on YouTube: https://www.youtube.com/watch?v=372Iksaz8b0