102.7K+Download
Skip to the usage guide
frontend-slidesby Zara Zhang

Frontend Slides Skill.

A Claude Code and Codex skill for PPT and slide decks: animation-rich HTML presentations from scratch or converted from PowerPoint files.

  • Presentations
  • HTML slides
Download OpenDesignView usage guide
zarazhangrui/frontend-slides · SKILL.mdSKILL.md
--- name: frontend-slides description: Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices. --- ## Core Principles ## Design Aesthetics ## Fixed Stage Rules ## Phase 0: Detect Mode ## Phase 1: Content Discovery (New Presentations) ## Phase 2: Style Discovery
Front matter and section headings read from the upstream file on 2026-09-14 · 28,057 characters in full

01 What it does

What the frontend-slides Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

Frontend Slides builds browser-based HTML presentations, either from scratch or from a .pptx file. The deck keeps CSS and JavaScript inline and needs no application build step, but may still load fonts or assets. It helps users choose a visual direction through three single-slide style previews.

How much text a deck carries is set by a density choice between low-density speaker-led and high-density reading-first. Every deck is authored inside a fixed 1920x1080 stage scaled uniformly to the viewport, and delivery can end with a live Vercel URL or a PDF export.

What it produces

  • An HTML presentation with inline CSS and JavaScript; any referenced fonts and image assets must remain available.
  • Three temporary style preview files (style-a.html, style-b.html, style-c.html) that are deleted at delivery time.
  • Optionally a live URL on Vercel for sharing the deck by text, Slack or email, viewable on any device.
  • Optionally a PDF for email, Slack or print, produced by screenshotting each slide and combining them.
See the example prompt ↗

How It Works

  1. 01
    Detect the Mode

    The skill first decides whether the job is a new deck built from scratch, a .pptx conversion, or an enhancement of an existing HTML presentation, and applies the matching phase path.

  2. 02
    Ask Discovery Questions in One Pass

    Purpose, length, content readiness and density are asked together, using a native structured-question UI when the environment has one, so the user fills everything out at once.

  3. 03
    Generate Three Style Previews

    Instead of asking the user to name a style, the skill renders three single-slide title previews, opens them automatically, and asks which one they prefer (or to mix elements).

  4. 04
    Generate the single-file Deck

    The full presentation is written as one HTML file that inlines the entire mandatory viewport-base.css plus section-by-section comments, using the density choice and the selected style recipe.

  5. 05
    Convert a PowerPoint File

    For a .pptx source the bundled Python script extracts the content, the user confirms titles, summaries and image counts, and only then does style discovery and HTML generation happen.

  6. 06
    Deliver, Then Offer Sharing

    Preview files are deleted, the deck is opened in the browser, and the user is told about navigation, CSS variables, fonts, the .reveal class and inline editing before being offered deployment or PDF export.

02 Find your fit

When to Use the frontend-slides Skill

Use the frontend-slides skill in Claude Code or Codex when the job is PPT and slide decks of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • Anyone who wants slides built for a talk or pitch, or an existing PPT/PPTX turned into web slides.
  • Non-designers who cannot state a visual preference but can react to two or three rendered options.
  • Someone starting from a PowerPoint file that needs restyling rather than re-authoring.
  • Improving an HTML deck that already exists, where content additions risk breaking the fixed-stage fitting.
  • Decks that will be viewed on phones, where a letterboxed 16:9 stage is acceptable but a phone-specific layout is not wanted.

Know the Boundaries

  • Decks that should adapt their layout to the viewing device; slide content is never reflowed to fit a screen.
  • Expecting a PDF export to carry motion or interactivity; it is a static snapshot.
  • Exporting externally-created HTML whose slides use a class name other than .slide, which makes the export script find nothing.

What to Provide

  • PurposeThe occasion drives preset matching and wildcard design; the offered options are a pitch deck, teaching tutorial, conference talk or internal presentation.
  • LengthRough slide count, banded as short, medium or long, sets how many section and content slides the deck can carry.
  • Existing contentThe user says whether all content is ready, only rough notes, or just a topic, and shares the material so the deck is built from it.
  • Density modeA single up-front choice between low density speaker-led and high density reading-first, remembered and applied to slide count, type scale and layout throughout.
  • Image folder (optional)Images are evaluated one by one for usability and dominant colours, and the outline is co-designed around them rather than planned first.

03 Inside the skill

Rules the frontend-slides Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

  1. Inline Deck Code, No Build Step

    The presentation uses inline CSS and JavaScript without an npm build pipeline. That does not make every workflow offline: fonts can load externally, PowerPoint extraction uses Python, and PDF export uses a browser tool.

  2. Never Reflow for the Device

    The 1920x1080 stage scales as a whole and may letterbox on phones; responsive breakpoints must not be used to rearrange slide content.

  3. Switch Slides with Visibility, Not Display

    Slide switching uses .active / .visible with visibility, opacity and pointer-events; display: none and display: block are banned because later layout classes can override them and reveal every slide at once.

  4. Negate CSS Functions with Calc

    Direct negation of clamp(), min() or max() is silently ignored, so the skill must wrap it as calc(-1 * clamp(...)).

  5. Fonts from Fontshare or Google Fonts

    System fonts are never used, and the aesthetics section names Inter, Roboto and Arial as overused families to avoid.

  6. No Template Names on the Slide

    Template and slug names live only in the message to the user, never rendered on the preview or slide itself, alongside other internal workflow text.

  7. Split Instead of Shrinking

    Scrolling, overflow, overlapping panels and text below comfortable reading size are baseline violations; content over the density limit becomes more slides.

  8. Read preview.md Before design.md

    Bold templates are shortlisted from the selection index and read at preview.md level; a template's full design.md is only loaded in Phase 3 after the user picks it.

04 Put it to work

Install frontend-slides in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add frontend-slides to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal
npx skills add https://github.com/zarazhangrui/frontend-slides --skill frontend-slides

Generic skills CLI form for SKILL.md; the repository may document its own path.

Give the Skill a First PPT and Slide Decks Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt
It's [a 20-minute conference talk] and all I have is rough notes in [talk-notes.md]. Build me a new HTML presentation, about 12 slides, low density and speaker-led so it's one idea per slide. Show me some style previews before you generate the deck.

Editorial starter example based on the source workflow; not a recorded run.

Check the First Result

What the SKILL.md itself says a correct result looks like:

  • After any modification, confirm the stage is still 16:9 with no text overflowing its card, no panels overlapping, and screenshots that look right at 1280x720 plus one phone viewport.
  • Judge overflow and overlap from rendered browser screenshots rather than code, because grid panels can visually cover each other.
  • Read the visible text of each preview before opening it, and revise if any internal metadata has leaked onto the slide.
  • After deploying, open the live URL and confirm every referenced image actually loads.

In OpenDesign check your installed version’s skill list and supported tools. If this skill is absent, consult the current import guide and the upstream setup instructions. The source review is not a live compatibility test.

Download OpenDesignRead the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author
Zara Zhang
Repository
github.com/zarazhangrui/frontend-slides Branch main
Skill file
SKILL.md Content checksum recorded at verification; commit 9906a34
License
MIT From LICENSE.
Repository stars
29,255 GitHub snapshot taken 2026-09-14 for the whole zarazhangrui/frontend-slides repository. Not a rating or usage count for frontend-slides.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

  1. Core PrinciplesZero dependencies, show-don't-tell previews, distinctive design, progressive disclosure and the non-negotiable fixed 16:9 stage.
  2. Design AestheticsTypography, colour, motion and background guidance aimed at avoiding generic AI slop typography and palettes.
  3. Fixed Stage RulesCSS invariants: 1920x1080 canvas, .active/.visible switching, clamp only outside the stage, reduced-motion support.
  4. Phase 0: Detect ModeClassifies the request as new deck, PPT conversion or enhancement, with modification rules for existing files.
  5. Phase 1: Content Discovery (New Presentations)Asks purpose, length, content readiness and density together, then evaluates any supplied image folder.
  6. Phase 2: Style DiscoveryGenerates three previews from safe preset, bold template and wildcard under strict preview authenticity rules.
  7. Phase 3: Generate PresentationApplies the density choice and selected style recipe, reads supporting files, outputs one fixed-stage HTML file.
  8. Phase 4: PPT ConversionExtracts .pptx content with a Python script, confirms it with the user, then converts into the chosen style.
  9. Phase 5: DeliveryDeletes previews, opens the deck, and summarises file details, navigation, customisation points and inline editing.
  10. Phase 6: Share & Export (Option
The Skill's Own Description
“Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.”

Front-matter description from SKILL.md. The full file is about 28,057 characters. Read the full file on GitHub.

Frontend Slides

Run frontend-slides on a Real PPT and Slide Decks Task.

Start with the example task above, supply the listed inputs and check the required tools. Review the output against the checklist before using it in a project.

Download OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/zarazhangrui/frontend-slides --skill frontend-slides