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

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

Создаёт адаптивные HTML-презентации с графиками Chart.js и дизайн-токенами. Помогает собирать питч-деки и маркетинговые слайды прямо из терминала.

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

Что делает slides

Скилл генерирует интерактивные презентации в формате HTML. Для визуализации данных используется библиотека Chart.js, а внешний вид настраивается через дизайн-токены и адаптивную верстку. Контент формируется с учетом готовых формул копирайтинга и шаблонов расположения элементов.

Внутри находится подкоманда create и база знаний в каталоге references/. Скрипты читают файлы проекта: руководство по стилю docs/brand-guidelines.md и параметры assets/design-tokens.json. Рабочая директория остается в корне репозитория.

Ставить этот скилл стоит тем, кто хочет верстать слайды кодом без PowerPoint. Если вам нужен обычный файл PPTX без интерактивных графиков, лучше собирать презентацию привычными офисными программами.

Какие задачи решает

  • Сверстать интерактивный питч-дек в формате HTML
  • Добавить графики Chart.js на слайды с данными
  • Оформить маркетинговую презентацию по готовым формулам копирайтинга
  • Применить токены из assets/design-tokens.json к верстке слайдов

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

  • Сделай презентацию о новом продукте для питч-дека
  • create pitch deck
  • Собери маркетинговые слайды с графиками Chart.js

Как установить slides

1Через Skills CLI (Vercel)

npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill slides -a claude-code

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

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

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

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

Весь набор →
ui-ux-pro-max nextlevelbuilder Скилл подключает к агенту локальную базу из 119 UX-правил, 74 шрифтовых пар и 192 палитр. Помогает проектировать интерфейсы и проверять доступность. Claude Code CX Codex Cursor +1 413 800установок design-system claudekit Скилл собирает дизайн-токены, спецификации компонентов и презентационные слайды. Подойдёт, когда интерфейс и слайды должны следовать одной системе. Claude Code CX Codex Cursor +1 42 200установок design claudekit Скилл для генерации логотипов, бренд-айдентики, дизайн-токенов, слайдов на Chart.js и баннеров через ИИ и Python-скрипты. Claude Code CX Codex Cursor +1 40 800установок ui-styling claudekit Скилл для сборки доступных интерфейсов на shadcn/ui и Tailwind CSS: компоненты, темы, тёмная тема, адаптивные сетки и canvas-дизайн. Claude Code CX Codex Cursor +1 40 200установок brand claudekit Скилл держит голос бренда, визуальные правила и дизайн-токены в одном файле, а потом раздаёт их промптам агента и вашему CSS. Claude Code CX Codex Cursor +1 39 500установок banner-design claudekit Создаёт баннеры для соцсетей, рекламы и сайтов в HTML/CSS с готовыми размерами и стилями. Пригодится при сборке креативов без графических редакторов. Claude Code CX Codex Cursor +1 39 000установок

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

Похожие

frontend-ui-engineering addyosmani Задаёт ИИ-агенту правила верстки интерфейсов без типичных нейросетевых клише: фиолетовых кнопок, случайных градиентов и скруглений rounded-2xl. Помогает собирать компоненты по WCAG 2.1 AA. Claude Code CX Codex Cursor +1 66 600установок api-and-interface-design addyosmani Помогает проектировать API и границы модулей так, чтобы их было проще использовать и менять. Подходит для REST, GraphQL и публичных интерфейсов. Claude Code CX Codex Cursor +1 61 900установок mobile-native emilkowalski Убирает мелочи, из-за которых веб-приложение на телефоне выдаёт себя: залипающий hover, вспышку при тапе, ошибку с 100vh. Claude Code CX Codex Cursor +1 84 500установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. Claude Code Claude.ai 1 025 790установок grill-me Matt Pocock Скилл проводит жёсткое интервью по плану или дизайну, чтобы найти пробелы и уточнить решения. Подойдёт перед началом разработки. Claude Code 1 424 476установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. Claude Code CX Codex Cursor +1 673 100установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. Claude Code 986 201установок grilling Matt Pocock Стресс-тестирует план, решение или идею сериями уточняющих вопросов. Подходит, когда нужно вскрыть допущения до начала работы. Claude Code 979 543установок

Вопросы о slides

Как установить slides в Claude Code?

Выполните команду npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill slides -a claude-code в терминале.

Что делает скилл slides?

Он генерирует презентации в виде HTML-файлов. Слайды включают графики Chart.js, адаптивную верстку и стилизацию на основе дизайн-токенов.

Какие файлы проекта читает скилл slides?

Скрипты обращаются к руководству docs/brand-guidelines.md и токенам assets/design-tokens.json в корне вашего проекта.

Исходный текст

SKILL.md · MIT
---
name: slides
description: Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.
argument-hint: "[topic] [slide-count]"
metadata:
  author: claudekit
  version: "1.0.0"
---

# Slides

Strategic HTML presentation design with data visualization.

## When to Use

- Marketing presentations and pitch decks
- Data-driven slides with Chart.js
- Strategic slide design with layout patterns
- Copywriting-optimized presentation content

## Subcommands

| Subcommand | Description | Reference |
|------------|-------------|-----------|
| `create` | Create strategic presentation slides | `references/create.md` |

## Script Paths

Script paths in this skill and its `references/` are relative to the directory that contains this SKILL.md, not to the project: `scripts/<file>` is this skill's own `scripts/` folder, and `../<skill>/scripts/<file>` is a sibling sub-skill installed alongside it. Build the full path from that directory (Claude Code reports it as the skill's base directory when the skill loads) and keep the working directory at the project root — the scripts read and write project files such as `docs/brand-guidelines.md`, `assets/design-tokens.json` or `src/` relative to it.

## References (Knowledge Base)

| Topic | File |
|-------|------|
| Layout Patterns | `references/layout-patterns.md` |
| HTML Template | `references/html-template.md` |
| Copywriting Formulas | `references/copywriting-formulas.md` |
| Slide Strategies | `references/slide-strategies.md` |

## Routing

1. Parse subcommand from `$ARGUMENTS` (first word)
2. Load corresponding `references/{subcommand}.md`
3. Execute with remaining arguments

© claudekit · MIT · nextlevelbuilder/ui-ux-pro-max-skill

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

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

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