New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Frontend Slides

by hamzafarooq in hamzafarooq/claude-code-starter

Create stunning, animation-rich single-file HTML presentations from scratch or by converting a PowerPoint (.pptx) file.

MITAuto-check passedDocuments & Office

Install Frontend Slides

skills CLI
$ npx skills add hamzafarooq/claude-code-starter --skill frontend-slides -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install hamzafarooq/claude-code-starter frontend-slides --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/hamzafarooq/claude-code-starter.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/frontend-slides .claude/skills/frontend-slides && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
frontend-slides
GitHub stars
145
Token cost
~1.4k tokens
SKILL.md length
569 words
Files
1
Skills in repo
29
Repo updated
First seen
Licence
MIT

At a glance

Create stunning, animation-rich single-file HTML presentations from scratch or by converting a PowerPoint (.pptx) file.

  • Works in 4 steps: Gather Content → Style Selection (Always Do This) → Build the Full Deck → …
  • The user wants to build a presentation
  • SKILL.md covers Core Principles, Workflow, Optional Post-Build and Source
  • Calls pip, python and vercel

What it does

Frontend Slides is an agent skill from hamzafarooq/claude-code-starter. Create stunning, animation-rich single-file HTML presentations from scratch or by converting a PowerPoint (.pptx) file. Use when the user wants to build a presentation, convert a PPT to web format, or create slides for a talk, pitch, or demo. Shows 3 visual style previews before building the full deck — no design experience needed.

Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Documents & Office, covering Slides and decks and PowerPoint presentations. It works with Microsoft PowerPoint. The licence is MIT.

When your agent uses it

  • The user wants to build a presentation
  • Convert a PPT to web format
  • Create slides for a talk

Example prompts

  • “/frontend-slides”

Requirements

  • Python 3
  • Node.js

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. Gather Content
  2. Style Selection (Always Do This)
  3. Build the Full Deck
  4. PowerPoint Conversion (if .pptx provided)

What it can do on your machine

Read from SKILL.md and the folder at commit 172c531. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • pip
    • python
    • vercel
    • npx
    • node

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • github.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Frontend Slides loads about 1.4k tokens when it runs. Until then it costs about 87 tokens; SKILL.md has 569 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~87
When it runs · the whole SKILL.md, loaded when a task matches
~1.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from hamzafarooq/claude-code-starter at commit 172c531, republished under its MIT licence (© hamzafarooq). 569 words, ~1,387 tokens.

Download SKILL.mdSave it as .claude/skills/frontend-slides/SKILL.md (or your agent's skills folder).
name
frontend-slides
description
Create stunning, animation-rich single-file HTML presentations from scratch or by converting a PowerPoint (.pptx) file. Use when the user wants to build a presentation, convert a PPT to web format, or create slides for a talk, pitch, or demo. Shows 3 visual style previews before building the full deck — no design experience needed.

Frontend Slides

Create zero-dependency, animation-rich HTML presentations that run entirely in the browser.

Core Principles

  1. Zero Dependencies — Single HTML files with inline CSS/JS. No npm, no build tools.
  2. Show, Don't Tell — Generate 3 visual previews before building. People discover what they want by seeing options, not describing them.
  3. Distinctive Design — No generic slides. Every presentation must feel custom-crafted.
  4. Viewport Fitting (NON-NEGOTIABLE) — Every slide MUST fit exactly within 100vh. No scrolling within slides ever. Content overflows? Split into multiple slides.

Workflow

Phase 1 — Gather Content

Ask the user:

  1. "What's the topic and goal? (e.g. investor pitch, product demo, teaching a concept)"
  2. "Who is the audience?"
  3. "How many slides roughly?"
  4. "Paste your content, bullets, or outline — OR share a .pptx file path to convert."

If a .pptx file is provided → jump to Phase 4 (PowerPoint Conversion) first, then return here.

Phase 2 — Style Selection (Always Do This)

Ask the user their vibe (multiselect, max 2):

  • Impressed / Confident
  • Excited / Energized
  • Calm / Focused
  • Inspired / Moved

Map their vibe to 3 distinct presets from this list and generate one single-slide HTML preview for each:

PresetFeel
Bold SignalDark, high-contrast, confident
Electric StudioVibrant neon on dark, energized
Dark BotanicalDark with organic texture, calm authority
Notebook TabsLight, handwritten-feel, approachable
Pastel GeometrySoft colors, geometric shapes, friendly
Neon CyberCyberpunk grid, glowing text, futuristic
Creative VoltageBold gradients, dynamic diagonals
Split PastelTwo-tone split layout, modern editorial
Paper & InkCream background, serif type, classic
Swiss ModernBrutalist grid, red + black, no-nonsense
Vintage EditorialMagazine-style, muted tones, typographic
Minimal ZenWhite space, single accent color, clean

Save 3 preview files to .claude-design/slide-previews/ as style-a.html, style-b.html, style-c.html and open them.

Wait for the user to pick one (A, B, or C) — or ask to mix elements from two.

Show full SKILL.md (306 more words)Show less
Phase 3 — Build the Full Deck

Using the chosen style, generate the complete single-file HTML presentation.

Slide structure rules:

  • Every slide headline = one complete insight, not a topic label
    • Bad: "Market Opportunity"
    • Good: "The $4B SMB payroll market is 80% undigitized"
  • Body supports the headline — never repeats it
  • Max bullets/content per slide type:
Slide TypeMaximum Content
Title1 heading + 1 subtitle + optional tagline
Content1 heading + 4–6 bullets OR 2 paragraphs
Feature grid1 heading + 6 cards max (2×3 or 3×2)
Code1 heading + 8–10 lines of code
Quote1 quote (max 3 lines) + attribution
Image1 heading + 1 image (max 60vh)

Required slides:

  1. Title slide
  2. Agenda (for decks over 8 slides)
  3. Content slides
  4. Summary / So what

HTML requirements:

  • Fully self-contained — no external CDN, no imports
  • Keyboard navigation: arrow keys + spacebar
  • Progress indicator
  • Speaker notes in hidden <div> (toggle with N key)
  • prefers-reduced-motion support

Viewport fitting (mandatory):

  • Every .slide: height: 100vh; height: 100dvh; overflow: hidden;
  • All font sizes: clamp(min, preferred, max) — never fixed px/rem
  • Images: max-height: min(50vh, 400px)
  • Media breakpoints at 700px, 600px, 500px height
  • Never negate CSS functions directly — use calc(-1 * clamp(...))

Output the complete HTML file. Default filename: presentation.html.

Phase 4 — PowerPoint Conversion (if .pptx provided)
  1. Run the extractor (auto-installs python-pptx if needed):
    bash
    pip install python-pptx -q
python -c "
from pptx import Presentation
import json, sys
prs = Presentation(sys.argv[1])
slides = []
for i, slide in enumerate(prs.slides):
    texts = [shape.text for shape in slide.shapes if shape.has_text_frame]
    slides.append({'slide': i+1, 'content': texts})
print(json.dumps(slides, indent=2))
" <path_to_pptx>
  2. Confirm extracted slide titles, content summaries, and image counts with the user.
  3. Proceed to Phase 2 for style selection.
  4. Generate HTML preserving all text, slide order, and speaker notes (as HTML comments).

Optional Post-Build

Deploy to Vercel (requires Node + Vercel CLI):

bash
vercel deploy ./presentation.html

Export to PDF (requires Node + Playwright):

bash
npx playwright install chromium --with-deps
node -e "
const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('file://' + require('path').resolve('presentation.html'));
  await page.pdf({ path: 'presentation.pdf', printBackground: true });
  await browser.close();
  console.log('Saved: presentation.pdf');
})();
"

Source

Based on frontend-slides by Zara Zhang Rui.

© hamzafarooq, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .claude/skills/frontend-slides of hamzafarooq/claude-code-starter.

Open the folder on GitHubat commit 172c531

Compare with similar skills

Frontend Slides next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Frontend Slides compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Frontend Slides this skillhamzafarooq/claude-code-starter145—~1.4kAutomated safety check: PassMIT
Image To Editable Pptningzimu/image-to-editable-ppt-skill2.8k—~4.3kAutomated safety check: PassMIT
Slidesfcakyon/claude-codex-settings1.2k1 repos~1.1kAutomated safety check: PassMIT
Ppt Image FirstNyxTides/ppt-image-first1.2k—~1.6kAutomated safety check: PassApache-2.0
Gpt Image2 PptJuneYaooo/gpt-image2-ppt-skills1.3k—~8.9kAutomated safety check: NotesApache-2.0
Paper Deckzsyggg/paper-craft-skills1.3k—~1.4kAutomated safety check: PassNone

Similar skills

  • Image To Editable Ppt

    ningzimu/image-to-editable-ppt-skill

    Rebuild slide images, scanned or image-based PPT/PPTX files, and PDF decks into object-level editable PowerPoint (.pptx), preserving speaker notes when supplied.

    2.8k GitHub stars~4.3k tokensUpdated 23 days ago
    Documents & OfficeAuto-check passed

  • Slides

    fcakyon/claude-codex-settings

    Create and edit presentation slide decks (.pptx) with PptxGenJS, bundled layout helpers, and render/validation utilities.

    1.2k GitHub starsUsed in 1 repo~1.1k tokens
    Documents & OfficeAuto-check passed

  • Ppt Image First

    NyxTides/ppt-image-first

    Build presentation plans for PPT / slides / decks through a conversation-first workflow, then propose multiple visual directions with preview images before writing deck specs.

    1.2k GitHub stars~1.6k tokensUpdated 5 mo ago
    Documents & OfficeAuto-check passed

  • Gpt Image2 Ppt

    JuneYaooo/gpt-image2-ppt-skills

    Generate visually striking PPT slides via OpenAI's gpt-image-2 -- use any style in styles/<collection/STYLEID.md or mimic a user-supplied .pptx template; outputs high-res slide PNGs and a 16:9 .pptx.

    1.3k GitHub stars~8.9k tokensUpdated 1 mo ago
    Documents & OfficeAuto-check: notes

  • Paper Deck

    zsyggg/paper-craft-skills

    将论文、技术文章或知识内容制作成高真实感的 AIGC 幻灯片。先做叙事结构和逐页视觉导演，再调用生图模型生成每一页 16:9 slide image，最后合成为 PPTX/PDF。适合论文汇报、组会、公开课、技术分享、商业化研究展示；当用户提到“论文PPT”“AI生成PPT”“不像AI的PPT”“高质感幻灯片”“逐页生图PPT”时使用。

    1.3k GitHub stars~1.4k tokensUpdated 4 mo ago
    Documents & OfficeAuto-check passed

  • HTML Slide To PPTX

    mucsbr/ppt-agent-workflow-san

    Convert structured single-slide or small deck HTML files into editable PPTX slides with native text boxes, shapes, chips, arrows, and panels.

    643 GitHub stars~1.1k tokensUpdated 1 mo ago
    Documents & OfficeAuto-check passed

More from hamzafarooq/claude-code-starter

All 29 skills in this repo

  • Beautiful HTML

    hamzafarooq/claude-code-starter

    Turn any document, proposal, report, or outline into a stunning single-file HTML presentation using 34 pre-built professional templates.

    145 GitHub stars~1.6k tokensUpdated 25 days ago
    Auto-check passed

  • Claude Code Deck

    hamzafarooq/claude-code-starter

    Generate a complete, ready-to-share HTML presentation explaining Claude Code, Skills, Sub Agents, Hooks, and Multi-Agent Systems — designed for product managers.

    145 GitHub stars~972 tokensUpdated 25 days ago
    Auto-check passed

  • Competitor Research

    hamzafarooq/claude-code-starter

    Research 3–5 competitors for any product or feature. An agent skill from hamzafarooq/claude-code-starter.

    145 GitHub stars~1.6k tokensUpdated 25 days ago
    Auto-check passed

  • Md To PDF

    hamzafarooq/claude-code-starter

    Convert any markdown file to a clean PDF. An agent skill from hamzafarooq/claude-code-starter.

    145 GitHub stars~598 tokensUpdated 25 days ago
    Auto-check passed

  • User Story Writer

    hamzafarooq/claude-code-starter

    Converts feature ideas or rough bullets into user stories with acceptance criteria.

    145 GitHub stars~531 tokensUpdated 25 days ago
    Auto-check passed

  • Dockerfile Generator

    hamzafarooq/claude-code-starter

    Create a production-ready Dockerfile and deployment config for any project.

    145 GitHub stars~355 tokensUpdated 25 days ago
    Auto-check: notes

Works with

Categories

Questions about Frontend Slides

What does Frontend Slides do?

Create stunning, animation-rich single-file HTML presentations from scratch or by converting a PowerPoint (.pptx) file. Frontend Slides is an agent skill from hamzafarooq/claude-code-starter.pptx) file.

When should I use Frontend Slides?

Frontend Slides fits situations like: the user wants to build a presentation; convert a PPT to web format; create slides for a talk.

How do I install Frontend Slides in Claude Code?

Run `npx skills add hamzafarooq/claude-code-starter --skill frontend-slides -a claude-code`. Or copy the skill folder (.claude/skills/frontend-slides in hamzafarooq/claude-code-starter) into .claude/skills/frontend-slides in your project. Claude Code loads it when a task matches its description.

How do I install Frontend Slides in Codex?

Run `npx skills add hamzafarooq/claude-code-starter --skill frontend-slides -a codex`. Or copy the skill folder (.claude/skills/frontend-slides in hamzafarooq/claude-code-starter) into .agents/skills/frontend-slides in your project. Codex loads it when a task matches its description.

Can I use Frontend Slides in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add hamzafarooq/claude-code-starter --skill frontend-slides -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/frontend-slides, .gemini/skills/frontend-slides, .github/skills/frontend-slides and .opencode/skills/frontend-slides in your project.

What does Frontend Slides need to run?

Going by SKILL.md and its folder, Frontend Slides needs the command-line tools its instructions call (pip, python, vercel, npx and node). Our summary lists: Python 3; Node.js.

Does Frontend Slides access the network?

SKILL.md names 1 domain. As links in the text: github.com. This is read from the text; nothing was executed.

Is Frontend Slides safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Frontend Slides use?

Frontend Slides is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Frontend Slides use?

About 1.4k tokens (SKILL.md is roughly 5.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Frontend Slides?

Skills that share tags, products or a category with Frontend Slides: Image To Editable Ppt (ningzimu/image-to-editable-ppt-skill, 2.8k stars), Slides (fcakyon/claude-codex-settings, 1.2k stars), Ppt Image First (NyxTides/ppt-image-first, 1.2k stars) and Gpt Image2 Ppt (JuneYaooo/gpt-image2-ppt-skills, 1.3k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Frontend Slides?

hamzafarooq (a GitHub user) maintains it in hamzafarooq/claude-code-starter, which has 145 GitHub stars. The repository holds 29 skills in this directory. The repository was last updated on September 13, 2026.

Source: hamzafarooq/claude-code-starter on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.