How to use the Frontend Slides HTML Decks agent skill

What the frontend-slides skill makes the agent do

An agent skill is a folder containing a SKILL.md file and supporting references. When the skill is installed, the agent reads these instructions when a request matches them, and follows them while doing the work. Without the skill, the agent has no particular rules for slide decks.

With frontend-slides installed, the agent produces a single HTML file that opens in a web browser and works offline. It starts from the provided example.html template, keeps a fixed-size 1920×1080 layout that scales to any screen, and adds keyboard, mouse and swipe navigation plus entrance animations. It also picks a visual style from 12 curated colour and font presets and follows accessibility rules such as reduced-motion support.

• Output is one .html file with all CSS and JavaScript inline and no build step.
• Navigation works with arrow keys, Space, PageUp/PageDown, Home/End, the mouse wheel and touch swipe.
• Slides link to #/<index> so a specific slide can be opened directly.
• Charts are CSS-drawn bar charts; the skill does not fetch live data.

Install the skill from the ZIP

Download the ZIP for the frontend-slides folder from this page and unzip it. The folder contains SKILL.md, example.html, open-design.json, the references folder and the LICENSE file. Keep the folder structure intact.

For a personal install, place the unzipped folder in ~/.claude/skills/. To make the skill available only inside one project, place it in that project's .claude/skills/ folder instead.

In the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.

• Personal: ~/.claude/skills/frontend-slides/
• Project only: .claude/skills/frontend-slides/ inside your project
• Claude apps: Settings → Capabilities → Skills, then upload

Ask for a deck in natural language

You do not need a special command. Describe the deck you want and mention HTML slides or an HTML deck so the agent matches the request to the skill. The skill's trigger words include html deck, html slides, ai-literacy and workflow, so these phrases are good starting points.

The more specific the request, the better the output. State the audience, the purpose of the deck, the content or key points, and whether the deck will be spoken over or read on its own. The skill asks you to choose between a speaker-led, low-density deck with one idea per slide and a reading-first, high-density deck with structured grids.

• Example request: "Make an HTML slide deck for our leadership team explaining how we will roll out our AI assistant. Speaker-led, about 10 slides, calm and professional."
• Example request: "Turn these notes into a reading-first HTML deck I can email as one file."
• Name a mood if you have one, such as dramatic, playful or minimal, so the animation style can match it.

Review the output and what it can do

Open the generated HTML file in a browser to check it. Use the arrow keys or swipe to move between slides, and resize the window to confirm the stage scales. Because the output is raw HTML and CSS, you change text and colours by editing the file or asking the agent to revise it.

The skill can use Google Fonts or Fontshare webfonts, which load when the deck is opened. Check the text on every slide, especially claims and figures, before you present it to others.

• Check every number and claim; the bundled example is an AI-literacy talk and generated content needs your review.
• Editing: text and colour tokens live in CSS custom properties in :root.

Safety notes: scripts and network

According to the skill's metadata, it runs no scripts and does not use the network. The deck itself may load webfonts from Google Fonts or Fontshare when opened in a browser, so an internet connection is optional rather than required for the skill to work, but fonts may fall back to defaults offline.

Because the skill has no network data fetching, do not expect it to pull figures from live sources. Supply any data you need in your request or in the file.

• Runs scripts: no
• Uses network: no (the output may load webfonts when opened)
• Review generated content before sharing it externally

Tips for better decks

Give the agent source material. The skill's own guidance says to start from the template and replace content rather than rebuild the design system, so pasting clean text and figures gives the best result.

Choose a density mode early. Speaker-led decks need large type and few bullets; reading-first decks can carry more structure. If a slide feels crowded, ask for it to be split rather than shrunk.

• Name a style preset if you know one, for example Bold Signal, Swiss Modern or Paper & Ink.
• Ask for a critic pass to check the deck against your own goal.
• Keep the LICENSE file with any copies you redistribute (Apache-2.0 for this folder).