domains / design / html-presentation-generation / frontend-slides

frontend-slides

Skill card

combined

Both copies describe the same task (zero-dependency, animation-rich HTML presentations) but enforce different, non-interchangeable design systems. The first copy is a strict viewport-fitting and content-density procedure (100vh, clamp(), density limits, PPT conversion phases). The second copy is a design-philosophy and aesthetic procedure (style positions, 8-point grid, specific font stacks, 2026 trends, hardcoded interaction states). Neither is a simple reproduction of the other; combining them is necessary to capture both the structural invariants and the aesthetic constraints.

Repositories

Other copies

Combined skill

---
name: frontend-slides
description: Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files.
---

# 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.
2. **Viewport Fitting (NON-NEGOTIABLE)**: Every slide MUST fit exactly within 100vh. No scrolling within slides.
3. **Distinctive Design**: Avoid generic 'AI slop.' Use creative, context-specific aesthetics.

## Design Aesthetics
- **Style Selection**: Choose a style position (e.g., Trust & Professional, Future & Depth) based on the presentation's purpose.
- **Typography**: Use distinctive fonts (e.g., Clash Display, Satoshi). Avoid generic fonts like Arial or Inter. Use significant weight and size contrast.
- **Color & Theme**: Commit to a cohesive aesthetic using CSS variables. Use complementary colors for guidance.
- **Motion**: Use CSS animations for high-impact moments like staggered reveals.

## Viewport Fitting Rules
- Every `.slide` must have `height: 100vh; overflow: hidden;`.
- Use `clamp()` for font sizes and spacing to ensure responsiveness.
- Include `prefers-reduced-motion` support.
- **Content Density Limits**:
  - Title slide: 1 heading + 1 subtitle.
  - Content slide: 1 heading + 4-6 bullets OR 2 paragraphs.
  - Feature grid: Max 6 cards.
  - Code slide: Max 8-10 lines.

## System Integrity Constraints
- **Spacing**: Use an 8-point grid (8, 12, 16, 24, 32, 40px) for padding and gaps.
- **Corner Radius**: Default to 12px; use 24px or full for 'Care' styles.
- **Interaction States**: For static HTML, hardcode different interaction states (default, hover, selected) on similar components to show the full lifecycle.

## Workflow
1. **Detect Mode**: Determine if creating new, converting PPT, or enhancing existing.
2. **Content Discovery**: Ask for purpose, length, and audience.
3. **Design Exploration**: Generate visual previews of different aesthetic directions.
4. **Generation**: Build the presentation following viewport and density rules.
5. **Verification**: Ensure no slide overflows 100vh and all content fits within density limits.