Frontend Slides

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.

31,632 stars 2,426 forksDocuments & Office Files

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add zarazhangrui/frontend-slides --skill frontend-slides

Manual install

git clone --depth 1 https://github.com/zarazhangrui/frontend-slides.git /tmp/frontend-slides
mkdir -p ~/.claude/skills
cp -r /tmp/frontend-slides/. ~/.claude/skills/frontend-slides

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# 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. No npm, no build tools.
2. **Show, Don't Tell** — Generate visual previews, not abstract choices. People discover what they want by seeing it.
3. **Distinctive Design** — No generic "AI slop." Every presentation must feel custom-crafted.
4. **Progressive Disclosure** — Read lightweight style indexes first. For bold templates, use small preview cards for style previews and load the full `design.md` only after the user picks that template.
5. **Fixed 16:9 Stage (NON-NEGOTIABLE)** — Every deck uses a 1920×1080 slide canvas scaled as a whole to the viewport. Slides must stay 16:9 on every screen, including phones. Do not reflow slide content to fit the device.

## Design Aesthetics

You tend to converge toward generic, "on distribution" outputs. In frontend design, this creates what users call the "AI slop" aesthetic. Avoid this: make creative, distinctive frontends that surprise and delight.

Focus on:

- Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics.

Read the full skill on GitHub

Details

Skill name: frontend-slides
Repository: zarazhangrui/frontend-slides
License: MIT
Repo updated: 23 June 2026
Copies: Found in 3 GitHub repos
Listed in: hesreallyhim/awesome-claude-code, travisvn/awesome-claude-skills, VoltAgent/awesome-agent-skills

FAQ

What does the Frontend Slides skill do?

How do I install the Frontend Slides skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add zarazhangrui/frontend-slides --skill frontend-slides. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Frontend Slides popular?

It lives in zarazhangrui/frontend-slides, which has 31,632 GitHub stars and 2,426 forks, and is included in 3 curated skill lists.

Related skills

Invoice Organizer

78k

ComposioHQ/awesome-claude-skills

Automatically organizes invoices for tax preparation. Sort and categorize invoices for easy tax filing.

Documents & Office FilesIn 1 list9.5k

Nutrient Document Processing

294k

affaan-m/ECC

Nutrient DWS API を使用してドキュメントの処理、変換、OCR、抽出、編集、署名、フォーム入力を行います。PDF、DOCX、XLSX、PPTX、HTML、画像に対応しています。

Documents & Office FilesIn 1 list43k

PDF

28k

openai/skills

Use when tasks involve reading, creating, or reviewing PDF files where rendering and layout matter; prefer visual checks by rendering pages (Poppler) and use Python tools such as `reportlab`, `pdfplumber`, and `pypdf` for generation and extraction.

Documents & Office FilesIn 2 lists2k

Frontend Slides

294k

affaan-m/ECC

フロントエンドプレゼンテーション、デモンストレーション、およびスライド構成のためのパターンとベストプラクティス。

Documents & Office FilesIn 1 list43k

Book to Skill

37k

virgiliojr94/book-to-skill

Converts books and documents (PDF, EPUB, DOCX, HTML, Markdown, plain text, RTF, MOBI/AZW with Calibre) into structured agent skills, extracting frameworks, mental models, principles, techniques, and anti-patterns. Use when the user wants to study a document through GitHub Copilot CLI, Amp, Claude Code, Hermes Agent, OpenCode, or OpenClaw, apply an author's frameworks while working, or build a reusable knowledge base from a file.

Documents & Office Files3.9k

XLSX

186k

anthropics/skills

Comprehensive spreadsheet creation, editing, and analysis with support for formulas, formatting, data analysis, and visualization. When Claude needs to work with spreadsheets (.xlsx, .xlsm, .csv, .tsv, etc) for: (1) Creating new spreadsheets with formulas and formatting, (2) Reading or analyzing data, (3) Modify existing spreadsheets while preserving formulas, (4) Data analysis and visualization in spreadsheets, or (5) Recalculating formulas.

Documents & Office FilesIn 8 lists22k

Browse the most popular Claude skills, all documents & office files skills, or write your own with the skills generator.