Beyond the Deck: How frontend-slides Reinvents the Presentation as a State Machine

Moving past rigid templates to AI-orchestrated, zero-dependency editorial design.

• View on GitHub • More from zarazhangrui

A vintage printing press ingesting a stream of digital code and outputting a perfectly composed, minimalist Swiss-style poster. — frontend-slides converts raw logic into high-end editorial design.

Anti-AI-Slop — Curated distinctive styles that avoid generic AI aesthetics (bye-bye, purple gradients on white).

Zara Zhangrui, Creator and Primary Maintainer · zarazhangrui/frontend-slides: Create beautiful slides on the ... - GitHub

Key Takeaways

The framework uses a Claude Code Skill to orchestrate a multi-phase state machine for automated slide generation.
Aggressive CSS constraints and viewport measurements transform the browser into a fixed editorial frame.
The system produces a single zero-dependency HTML file to ensure long-term portability and resist dependency rot.
The project leverages AI to enforce high-end Swiss Modernist design principles over generic presentation templates.

The War on AI Slop

For decades, digital presentations have been trapped in a fill-in-the-blanks paradigm. Tools like PowerPoint and Keynote rely on static themes. Even developer-focused alternatives often default to generic layouts. The frontend-slides project takes a different path. By treating the presentation as a state machine governed by a Claude Code Skill, it generates unique, high-end editorial layouts on the fly.

It acts as an anti-slop manifesto. The project proves that AI can enforce higher design standards like Swiss Modernism rather than diluting them with generic visuals.

The Viewport is a Physical Frame

The framework relies on aggressive CSS constraints. It treats the browser window as a fixed slide frame rather than a scrolling canvas. This is achieved using CSS clamp functions and exact viewport height measurements.

Every`.slide` must have`height: 100vh; height: 100dvh; overflow: hidden;`

Zara Zhangrui, Creator and Primary Maintainer · frontend-slides by zarazhangrui/frontend-slides

How CSS clamp() and 100vh constraints create a fluid but strict physical frame for every slide.

Architecture of a Claude Skill

The core of the project is its SKILL.md file. This document acts as the brain of the operation, defining a multi-phase state machine for content discovery, style selection, generation, and conversion. Instead of loading all instructions at once, the skill uses progressive disclosure to keep the AI focused on one phase at a time.

The progressive disclosure architecture guides the LLM through a strict state machine without context bloat.

The Zero-Dependency Artifact

Modern web development is plagued by brittle npm dependencies. This project outputs a single HTML file with inline assets. This portable web approach guarantees that the presentation will continue to work perfectly for years without requiring a build step or a server.

A glowing glass floppy disk sitting in a dusty museum, with a perfectly running presentation on a screen behind it, contrasting with a pile of broken gears labeled node_modules. — The single HTML file acts as a digital time capsule, immune to dependency rot.

Feature	Slidev	Reveal.js	frontend-slides
Build Tool	Vite required	None (or Webpack)	None (Zero Dependency)
Authoring Format	Markdown + Vue	HTML / Markdown	AI Orchestrated HTML
Design Philosophy	Developer-centric utility	Framework-agnostic structure	Opinionated editorial design
AI-Native	No	No	Yes (Claude Code Skill)