frontend-slides · nexu-io — скилл для Claude Code: что делает и как установить
Генерирует HTML-презентации с анимациями и предпросмотром стилей. Пригодится для онлайн-докладов, интерактивных брифов и встраиваемых слайдов.
npx skills add nexu-io/open-design --skill frontend-slides -a claude-codeЧто делает frontend-slides
Скилл создаёт интерактивные веб-слайды с анимациями и предварительным просмотром визуального стиля. Его используют при подготовке онлайн-выступлений или кратких рабочих справок прямо в кодовой базе.
В манифесте указан режим deck и категория slides. Для оформления скилл требует наличие зависимости typography. Запись в каталоге OpenDesign нужна агенту, чтобы обнаружить этот инструмент на этапе планирования задач.
Оригинальные скрипты и шаблоны находятся в репозитории zarazhangrui/frontend-slides. Если вам нужны готовые исходные ассеты, придётся подтянуть апстрим-бандл вручную.
Какие задачи решает
- собрать интерактивную HTML-презентацию с анимацией
- подготовить веб-слайды для онлайн-доклада
- сформировать интерактивный бриф с визуальным предпросмотром
Примеры запросов агенту
- Используй frontend-slides, чтобы оформить этот доклад в виде веб-презентации
- Сделай animation slides для интерактивного брифа проекта
- Собери html slides с предпросмотром стилей
Как установить frontend-slides
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill frontend-slides -a claude-code2Вручную: положить файлы
~/.claude/skills/frontend-slides/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/frontend-slides/
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill frontend-slides -a codex2Вручную: положить файлы
.agents/skills/frontend-slides/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill frontend-slides -a cursor2Вручную: положить файлы
.cursor/skills/frontend-slides/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install nexu-io/open-design frontend-slides2Вручную: положить файлы
.github/skills/frontend-slides/SKILL.md1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill frontend-slides -a gemini-cli2Командой платформы
gemini skills install https://github.com/nexu-io/open-design --path skills/frontend-slidesВручную: положить файлы
.devin/skills/frontend-slides/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill frontend-slides -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Из того же набора39
Весь набор →Другие версии frontend-slides
Похожие
Вопросы о frontend-slides
Как установить frontend-slides в Claude Code?
Выполните команду npx skills add nexu-io/open-design --skill frontend-slides -a claude-code. Файл навыка будет сохранён по пути ~/.claude/skills/frontend-slides/SKILL.md.
Что делает frontend-slides?
Он направляет агента при генерации HTML-презентаций с анимациями и предпросмотром стилей оформления.
Что требуется для полноценной работы скилла?
В конфигурации скилла указана зависимость typography. Для доступа к полным ассетам и скриптам разработчик рекомендует установить исходный бандл из репозитория zarazhangrui/frontend-slides.
Исходный текст
SKILL.md · Apache-2.0
---
name: frontend-slides
description: |
Generate animation-rich HTML presentations with visual style previews. Useful for online keynotes, embedded talks, and interactive briefs.
triggers:
- "html slides"
- "animation slides"
- "interactive deck"
- "web ppt"
- "reveal slides"
od:
mode: deck
category: slides
upstream: "https://github.com/zarazhangrui/frontend-slides"
craft:
requires:
- typography
---
# frontend-slides
> Curated from @zarazhangrui.
## What it does
Generate animation-rich HTML presentations with visual style previews. Useful for online keynotes, embedded talks, and interactive briefs.
## Source
- Upstream: https://github.com/zarazhangrui/frontend-slides
- Category: `slides`
## How to use
This catalogue entry advertises the skill in OpenDesign so the agent
discovers it during planning. To run the full upstream workflow with
its original assets, scripts, and references, install the upstream
bundle into your active agent's skills directory:
```bash
# Inspect the upstream README for exact paths
open https://github.com/zarazhangrui/frontend-slides
```
Then ask the agent to invoke this skill by name (`frontend-slides`) or with
one of the trigger phrases listed in this skill's frontmatter.
© nexu-io · Apache-2.0 · nexu-io/open-design