К основному содержанию
скилл Claude Code CX Codex Cursor GitHub Copilot

frontend-slides · nexu-io — скилл для Claude Code: что делает и как установить

Генерирует HTML-презентации с анимациями и предпросмотром стилей. Пригодится для онлайн-докладов, интерактивных брифов и встраиваемых слайдов.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add nexu-io/open-design --skill frontend-slides -a claude-code
Открыть на GitHub

Что делает 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-code

2Вручную: положить файлы

~/.claude/skills/frontend-slides/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/frontend-slides/

Из того же набора39

Весь набор →
ui-ux-pro-max nexu-io Каталожная карточка для обнаружения скилла UI/UX Pro Max в репозитории OpenDesign. Помогает агенту распознавать запросы к паттернам интерфейсов и эвристикам юзабилити. Claude Code CX Codex Cursor +1 5 400установок frontend-design nexu-io Скилл для создания фронтенд-интерфейсов с продуманной типографикой, цветом и вёрсткой — от лендингов до дашбордов. Claude Code CX Codex Cursor +1 4 800установок threejs nexu-io Помогает ассистенту создавать 3D-сцены, настраивать материалы, камеру и пост-обработку на Three.js прямо в браузере. Claude Code CX Codex Cursor +1 3 400установок creative-director nexu-io Скилл ведёт разработку креативной концепции от брифа до презентации и проверяет идеи по трём осям. Нужен для кампаний и критики концепций. Claude Code CX Codex Cursor +1 3 400установок design-brief nexu-io Преобразует дизайн-бриф в формате I-Lang в конкретную спецификацию с палитрой, типографикой, плотностью и ограничениями. Устраняет неопределённость из фраз вроде «сделай профессионально». Claude Code CX Codex Cursor +1 3 400установок apple-hig nexu-io Подключает базу Apple Human Interface Guidelines для iOS, macOS, visionOS, watchOS и tvOS к агенту при проектировании интерфейсов. Claude Code CX Codex Cursor +1 3 200установок hatch-pet nexu-io Создаёт и упаковывает спрайтшиты анимированных питомцев для Codex в формате 8×9. Пригодится для сборки пиксельного компаньона по концепту или картинке-референсу. Claude Code CX Codex Cursor +1 3 100установок d3-visualization nexu-io Скилл учит агента создавать интерактивные графики и визуализации данных на D3.js. Подойдёт, если нужно быстро генерировать диаграммы для дашбордов, отчётов и прототипов. Claude Code CX Codex Cursor +1 3 100установок

Другие версии frontend-slides

Похожие

expo-data-fetching expo Скилл настраивает сетевые запросы, кэширование и обработку ошибок в Expo. Помогает прописать состояния экранов и интеграцию с TanStack Query. Claude Code CX Codex Cursor +1 27 200установок playwright-skill lackeyjb Скилл для написания и запуска Playwright-скриптов прямо в редакторе. Автоматически находит dev-серверы, делает скриншоты, проверяет адаптивность, тестирует логины и валидирует работу сайта. Claude Code CX Codex Cursor +1 6 900установок angular-migration Seth Hobson Помогает переносить приложения с AngularJS на Angular по частям или целиком. Пригодится для гибридных приложений, замены компонентов и обновления зависимостей. Claude Code CX Codex Cursor 10 900установок screen-reader-testing Seth Hobson Скилл помогает проверять веб-приложения с VoiceOver, NVDA и JAWS. Пригодится для отладки ARIA, форм, навигации и объявлений динамического контента. Claude Code CX Codex Cursor 10 700установок threejs-fundamentals CloudAI-X Помогает настроить базовую сцену Three.js r186: рендерер, камеры, цикл анимации с THREE.Timer и import map для WebGL или WebGPU с TSL. Claude Code CX Codex Cursor +1 17 100установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. Claude Code Claude.ai 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. Claude Code CX Codex Cursor +1 673 100установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. Claude Code 986 201установок

Вопросы о 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

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой