Frontend Slides Skill

Create animation-rich HTML presentations using the App module (Vite + TypeScript + React) in <AgentWorkspaceRoot>/app. This skill helps non-designers discover their preferred aesthetic through visual exploration ("show, don't tell"), then generates production-quality slide decks as a React application.

Core Philosophy

1. App module workflow — Use <AgentWorkspaceRoot>/app to build presentation pages as a Vite + React project, run pnpm build, and preview with the BuildAndRefreshApp tool.
2. Show, Don't Tell — People don't know what they want until they see it. Generate visual previews, not abstract choices.
3. Distinctive Design — Avoid generic "AI slop" aesthetics. Every presentation should feel custom-crafted.
4. Production Quality — Code should be well-commented, accessible, and performant.
5. Viewport Fitting (CRITICAL) — Every slide MUST fit exactly within the viewport. No scrolling within slides, ever. This is non-negotiable.

CRITICAL: Viewport Fitting Requirements

This section is mandatory for ALL presentations. Every slide must be fully visible without scrolling on any screen size.

The Golden Rule