Frontend Slides

Установка

/plugin marketplace add https://github.com/zarazhangrui/frontend-slides
/plugin install frontend-slides@frontend-slides

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Скилл собирает презентацию одним HTML-файлом со встроенными CSS и JS, без npm и сборки. Вместо вопросов про вкус агент генерирует три превью в разных стилях, и пользователь выбирает направление глазами. Каждый слайд живет на фиксированной сцене 16:9, которая целиком масштабируется под экран, поэтому верстка не разъезжается на телефонах. Скилл умеет вытащить текст, картинки и заметки из PPTX и пересобрать их в веб-презентацию, а также экспортировать в PDF.

Для кого. Для тех, кто готовит выступления и питчи и не хочет верстать слайды вручную.

Пример запроса к агенту

Сделай презентацию на десять слайдов про наш стартап, покажи три варианта стиля

Ограничения

Результат это HTML, а не редактируемый PPTX. Конвертация PowerPoint использует Python-скрипт, экспорт в PDF и публикация идут через скрипты оболочки, агенту нужен доступ к файлам и командной строке. Плагинная команда доступна только в Claude Code, другие агенты читают SKILL.md напрямую.

Как отключить. Удалите плагин frontend-slides через /plugin или папку ~/.claude/skills/frontend-slides.

Проверка безопасности

• Запускает Python и shell-скрипты для конвертации и экспорта

Коротко о README

README показывает установку как плагина Claude Code, ручное копирование в ~/.claude/skills и использование в других агентах по ссылке на репозиторий. Описаны два сценария: новая презентация и конвертация PPTX. Перечислены встроенные стили в темных, светлых и специальных вариантах и дополнительный пакет смелых шаблонов, который подгружается только при выборе. Лицензия MIT.

SKILL.md

---
name: frontend-slides
description: 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.
---

# 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.
- Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Draw from IDE themes and cultural aesthetics for inspiration.
- Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions.
- Backgrounds: Create atmosphere and depth rather than defaulting to solid colors. Layer CSS gradients, use geometric patterns, or add contextual effects that match the overall aesthetic.

Похожие