Sin descripción

6 Ramas

Zara Zhang b206c50c5a Restructure skill for progressive disclosure — reduce context bloat ~70%		hace 3 meses
scripts	b206c50c5a Restructure skill for progressive disclosure — reduce context bloat ~70%	hace 3 meses
LICENSE	84d16176ed Initial release: Frontend Slides skill for Claude Code	hace 4 meses
README.md	84d16176ed Initial release: Frontend Slides skill for Claude Code	hace 4 meses
SKILL.md	b206c50c5a Restructure skill for progressive disclosure — reduce context bloat ~70%	hace 3 meses
STYLE_PRESETS.md	b206c50c5a Restructure skill for progressive disclosure — reduce context bloat ~70%	hace 3 meses
animation-patterns.md	b206c50c5a Restructure skill for progressive disclosure — reduce context bloat ~70%	hace 3 meses
html-template.md	b206c50c5a Restructure skill for progressive disclosure — reduce context bloat ~70%	hace 3 meses
viewport-base.css	b206c50c5a Restructure skill for progressive disclosure — reduce context bloat ~70%	hace 3 meses

Frontend Slides

A Claude Code skill for creating stunning, animation-rich HTML presentations — from scratch or by converting PowerPoint files.

What This Does

Frontend Slides helps non-designers create beautiful web presentations without knowing CSS or JavaScript. It uses a "show, don't tell" approach: instead of asking you to describe your aesthetic preferences in words, it generates visual previews and lets you pick what you like.

Key Features

Zero Dependencies — Single HTML files with inline CSS/JS. No npm, no build tools, no frameworks.
Visual Style Discovery — Can't articulate design preferences? No problem. Pick from generated visual previews.
PPT Conversion — Convert existing PowerPoint files to web, preserving all images and content.
Anti-AI-Slop — Curated distinctive styles that avoid generic AI aesthetics (bye-bye, purple gradients on white).
Production Quality — Accessible, responsive, well-commented code you can customize.

Installation

For Claude Code Users

Copy the skill files to your Claude Code skills directory:

# Create the skill directory
mkdir -p ~/.claude/skills/frontend-slides

# Copy the files (or download from this repo)
cp SKILL.md ~/.claude/skills/frontend-slides/
cp STYLE_PRESETS.md ~/.claude/skills/frontend-slides/

Then use it by typing /frontend-slides in Claude Code.

Manual Download

Download SKILL.md and STYLE_PRESETS.md from this repo
Place them in ~/.claude/skills/frontend-slides/
Restart Claude Code

Usage

Create a New Presentation

/frontend-slides

> "I want to create a pitch deck for my AI startup"

The skill will:

Ask about your content (slides, messages, images)
Ask about the feeling you want (impressed? excited? calm?)
Generate 3 visual style previews for you to compare
Create the full presentation in your chosen style
Open it in your browser

Convert a PowerPoint

/frontend-slides

> "Convert my presentation.pptx to a web slideshow"

The skill will:

Extract all text, images, and notes from your PPT
Show you the extracted content for confirmation
Let you pick a visual style
Generate an HTML presentation with all your original assets

Included Styles

Dark Themes

Neon Cyber — Futuristic, techy, particle effects
Midnight Executive — Premium, corporate, trustworthy
Deep Space — Cinematic, inspiring, vast
Terminal Green — Developer-focused, hacker aesthetic

Light Themes

Paper & Ink — Editorial, literary, refined
Swiss Modern — Clean, Bauhaus-inspired, geometric
Soft Pastel — Friendly, playful, creative
Warm Editorial — Magazine-style, photographic

Specialty

Brutalist — Raw, bold, attention-grabbing
Gradient Wave — Modern SaaS aesthetic

Output Example

Each presentation is a single, self-contained HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Fonts, CSS variables, all styles inline -->
</head>
<body>
    <section class="slide title-slide">
        <h1 class="reveal">Your Title</h1>
    </section>

    <section class="slide">
        <h2 class="reveal">Slide Content</h2>
    </section>

    <!-- Navigation: Arrow keys, scroll, swipe, or click dots -->
    <script>
        // SlidePresentation controller, animations, interactions
    </script>
</body>
</html>

Features included:

Keyboard navigation (arrows, space)
Touch/swipe support
Mouse wheel scrolling
Progress bar
Navigation dots
Scroll-triggered animations
Responsive design
Reduced motion support

Philosophy

This skill was born from the belief that:

You don't need to be a designer to make beautiful things. You just need to react to what you see.
Dependencies are debt. A single HTML file will work in 10 years. A React project from 2019? Good luck.
Generic is forgettable. Every presentation should feel custom-crafted, not template-generated.
Comments are kindness. Code should explain itself to future-you (or anyone else who opens it).

Files

File	Purpose
`SKILL.md`	Main skill instructions for Claude Code
`STYLE_PRESETS.md`	Reference file with 10 curated visual styles

Requirements

Claude Code CLI
For PPT conversion: Python with python-pptx library

Credits

Created by @zarazhangrui with Claude Code.

Inspired by the "Vibe Coding" philosophy — building beautiful things without being a traditional software engineer.

License

MIT — Use it, modify it, share it.

README.md