Skills Slides

slides

A Claude Code skill that generates stunning HTML presentations. Zero dependencies. Works offline. Opens in any browser.

**50 aesthetics × 20 palettes × 10 fonts × 5 layouts × 30+ effects = 50,000+ unique design combinations.**

Every presentation ships as a single `.html` file — no build step, no npm, no PowerPoint. Just double-click to present.

**[Live Demo →](https://nghiahsgs.github.io/skills-slides/)**

---

Why this exists

AI-generated slides look the same: purple gradients, Inter font, identical shadows, flat backgrounds. This skill fights that with a **token-based design system** and a strict **anti-slop checklist** that catches generic patterns before delivery.

The result: presentations that look intentionally designed, not template-generated.

---

What's inside

tokens/              # The design system
├── aesthetics.csv       # 50 named styles (startup-pitch, neon-cyber, editorial-minimal...)
├── color-palettes.csv   # 20 palettes with full hex values + WCAG ratios
├── font-pairings.csv    # 10 curated pairs from Google Fonts & Fontshare
├── layout-patterns.csv  # 5 CSS grid templates
└── effects-library.csv  # 30+ effects (particles, aurora, glassmorphism, gradients...)

references/          # Build rules
├── viewport-base.css       # Mandatory CSS foundation — viewport-fit, clamp(), snap scroll
├── html-template.md        # Full HTML skeleton + SlidePresentation JS class
├── animation-patterns.md   # Entrance animations, tilt effects, magnetic buttons
├── anti-slop-checklist.md  # 10-point quality gate (see below)
└─