Интерактивная HTML-площадка с настройками

Делает один HTML-файл с настройками, живым предпросмотром и готовым промтом, который можно скопировать в Claude.

СкиллAnthropicClaudeApache-2.0Загрузить архив в ClaudeПроверка не требуется

Скачать на русскомОригинал на английском (архив)Источник ↗

Что делает: Делает один HTML-файл с настройками, живым предпросмотром и готовым промтом, который можно скопировать в Claude.
Когда брать: Когда вариантов слишком много, чтобы описать словами: дизайн, запрос к данным, карта понятий, проверка документа или кода.
Когда не брать: Если задачу легко выразить обычным текстом или нужен сложный многостраничный сайт.
Пример запроса: Сделай интерактивную площадку, где я подберу скругления, тени и цвета карточки и получу готовый промт.
Нужно подключить: браузер
Работает лучше с: терминал для автоматического открытия файла

Входит в плагин playground. В Cowork и Claude Code можно поставить плагин целиком.

Как включить

Нажмите «Скачать на русском» и сохраните архив.
В Claude откройте Настройки → Capabilities → Skills → Upload skill и выберите архив.
Включите скилл переключателем.

Для терминала

Распакуйте архив и положите папку playground в ~/.claude/skills/. Файл SKILL.md должен лежать внутри этой папки.

Текст

---
name: playground
description: Создаёт интерактивные HTML-площадки (playground) — самодостаточные одностраничные файлы-обозреватели, в которых пользователь настраивает что-либо визуально с помощью элементов управления, видит живой предпросмотр и копирует готовый промт. Используй, когда пользователь просит сделать площадку, обозреватель или интерактивный инструмент по какой-либо теме.
---

Конструктор интерактивных площадок

Площадка (playground) — это самодостаточный HTML-файл: с одной стороны интерактивные элементы управления, с другой живой предпросмотр, а внизу — поле с промтом и кнопкой копирования. Пользователь двигает элементы управления, исследует всё визуально, а потом копирует сформированный промт обратно в Claude.

Когда использовать этот скилл

Когда пользователь просит интерактивную площадку, обозреватель или визуальный инструмент по какой-либо теме — особенно если пространство вариантов большое, визуальное или структурное и его трудно выразить простым текстом.

Как использовать этот скилл

Определи тип площадки по запросу пользователя
Загрузи подходящий шаблон из templates/:
templates/design-playground.md — визуальные дизайнерские решения (компоненты, макеты, отступы, цвет, типографика)
templates/data-explorer.md — данные и построение запросов (SQL, API, конвейеры, регулярные выражения)
templates/concept-map.md — обучение и исследование (карты понятий, пробелы в знаниях, очерчивание границ задачи)
templates/document-critique.md — проверка документа (предложения с процессом «принять/отклонить/прокомментировать»)
templates/diff-review.md — проверка кода (git diff, коммиты, PR с построчными комментариями)
templates/code-map.md — архитектура кодовой базы (связи компонентов, потоки данных, схемы слоёв)
Следуй шаблону, чтобы построить площадку. Если тема не вписывается ни в один шаблон, возьми ближайший и адаптируй его.
Открой в браузере. После записи HTML-файла выполни open <filename>.html, чтобы запустить его в браузере пользователя по умолчанию.

Основные требования (к каждой площадке)

Один HTML-файл. Весь CSS и JS встроены внутрь. Никаких внешних зависимостей.
Живой предпросмотр. Обновляется мгновенно при каждом изменении элемента управления. Кнопки «Применить» нет.
Вывод промта. Естественным языком, а не списком значений. Упоминает только выбор, отличающийся от значений по умолчанию. Содержит достаточно контекста, чтобы действовать, не видя площадки. Обновляется вживую.
Кнопка копирования. Копирование в буфер обмена с коротким откликом «Скопировано!».
Разумные значения по умолчанию и пресеты. Хорошо выглядит при первой загрузке. Включи 3–5 именованных пресетов, которые переключают все элементы управления на согласованное сочетание.
Тёмная тема. Системный шрифт для интерфейса, моноширинный — для кода и значений. Минимум оформления.

Схема управления состоянием

Держи один объект состояния. Каждый элемент управления пишет в него, каждая отрисовка читает из него.

const state = { /* all configurable values */ };

function updateAll() {
  renderPreview(); // update the visual
  updatePrompt();  // rebuild the prompt text
}
// Every control calls updateAll() on change

Схема вывода промта

function updatePrompt() {
  const parts = [];

  // Only mention non-default values
  if (state.borderRadius !== DEFAULTS.borderRadius) {
    parts.push(`border-radius of ${state.borderRadius}px`);
  }

  // Use qualitative language alongside numbers
  if (state.shadowBlur > 16) parts.push('a pronounced shadow');
  else if (state.shadowBlur > 0) parts.push('a subtle shadow');

  prompt.textContent = `Update the card to use ${parts.join(', ')}.`;
}

Типичные ошибки, которых нужно избегать

Вывод промта — просто список значений → пиши его как естественную инструкцию
Слишком много элементов управления сразу → группируй по смыслу, а продвинутые прячь в сворачиваемый раздел
Предпросмотр обновляется не мгновенно → каждое изменение элемента управления должно сразу вызывать перерисовку
Нет значений по умолчанию и пресетов → при загрузке площадка пуста или сломана
Внешние зависимости → если CDN недоступен, площадка мертва
В промте не хватает контекста → добавь столько, чтобы по нему можно было действовать без площадки

Перевод: iiuniversitet. Оригинал: https://github.com/anthropics/claude-plugins-official/tree/main/plugins/playground/skills/playground, лицензия Apache-2.0. Изменения: перевод на русский язык.

Оригинал на английском

---
name: playground
description: Creates interactive HTML playgrounds — self-contained single-file explorers that let users configure something visually through controls, see a live preview, and copy out a prompt. Use when the user asks to make a playground, explorer, or interactive tool for a topic.
---

# Playground Builder

A playground is a self-contained HTML file with interactive controls on one side, a live preview on the other, and a prompt output at the bottom with a copy button. The user adjusts controls, explores visually, then copies the generated prompt back into Claude.

## When to use this skill

When the user asks for an interactive playground, explorer, or visual tool for a topic — especially when the input space is large, visual, or structural and hard to express as plain text.

## How to use this skill

1. **Identify the playground type** from the user's request
2. **Load the matching template** from `templates/`:
   - `templates/design-playground.md` — Visual design decisions (components, layouts, spacing, color, typography)
   - `templates/data-explorer.md` — Data and query building (SQL, APIs, pipelines, regex)
   - `templates/concept-map.md` — Learning and exploration (concept maps, knowledge gaps, scope mapping)
   - `templates/document-critique.md` — Document review (suggestions with approve/reject/comment workflow)
   - `templates/diff-review.md` — Code review (git diffs, commits, PRs with line-by-line commenting)
   - `templates/code-map.md` — Codebase architecture (component relationships, data flow, layer diagrams)
3. **Follow the template** to build the playground. If the topic doesn't fit any template cleanly, use the one closest and adapt.
4. **Open in browser.** After writing the HTML file, run `open <filename>.html` to launch it in the user's default browser.

## Core requirements (every playground)

- **Single HTML file.** Inline all CSS and JS. No external dependencies.
- **Live preview.** Updates instantly on every control change. No "Apply" button.
- **Prompt output.** Natural language, not a value dump. Only mentions non-default choices. Includes enough context to act on without seeing the playground. Updates live.
- **Copy button.** Clipboard copy with brief "Copied!" feedback.
- **Sensible defaults + presets.** Looks good on first load. Include 3-5 named presets that snap all controls to a cohesive combination.
- **Dark theme.** System font for UI, monospace for code/values. Minimal chrome.

## State management pattern

Keep a single state object. Every control writes to it, every render reads from it.

```javascript
const state = { /* all configurable values */ };

function updateAll() {
  renderPreview(); // update the visual
  updatePrompt();  // rebuild the prompt text
}
// Every control calls updateAll() on change
```

## Prompt output pattern

```javascript
function updatePrompt() {
  const parts = [];

  // Only mention non-default values
  if (state.borderRadius !== DEFAULTS.borderRadius) {
    parts.push(`border-radius of ${state.borderRadius}px`);
  }

  // Use qualitative language alongside numbers
  if (state.shadowBlur > 16) parts.push('a pronounced shadow');
  else if (state.shadowBlur > 0) parts.push('a subtle shadow');

  prompt.textContent = `Update the card to use ${parts.join(', ')}.`;
}
```

## Common mistakes to avoid

- Prompt output is just a value dump → write it as a natural instruction
- Too many controls at once → group by concern, hide advanced in a collapsible section
- Preview doesn't update instantly → every control change must trigger immediate re-render
- No defaults or presets → starts empty or broken on load
- External dependencies → if CDN is down, playground is dead
- Prompt lacks context → include enough that it's actionable without the playground

Источник: anthropics/claude-plugins-official / playground / playground ↗. Ссылка проверена 2026-10-10.

---
name: playground
description: Создаёт интерактивные HTML-площадки (playground) — самодостаточные одностраничные файлы-обозреватели, в которых пользователь настраивает что-либо визуально с помощью элементов управления, видит живой предпросмотр и копирует готовый промт. Используй, когда пользователь просит сделать площадку, обозреватель или интерактивный инструмент по какой-либо теме.
---

# Конструктор интерактивных площадок

Площадка (playground) — это самодостаточный HTML-файл: с одной стороны интерактивные элементы управления, с другой живой предпросмотр, а внизу — поле с промтом и кнопкой копирования. Пользователь двигает элементы управления, исследует всё визуально, а потом копирует сформированный промт обратно в Claude.

## Когда использовать этот скилл

Когда пользователь просит интерактивную площадку, обозреватель или визуальный инструмент по какой-либо теме — особенно если пространство вариантов большое, визуальное или структурное и его трудно выразить простым текстом.

## Как использовать этот скилл

1. **Определи тип площадки** по запросу пользователя
2. **Загрузи подходящий шаблон** из `templates/`:
   - `templates/design-playground.md` — визуальные дизайнерские решения (компоненты, макеты, отступы, цвет, типографика)
   - `templates/data-explorer.md` — данные и построение запросов (SQL, API, конвейеры, регулярные выражения)
   - `templates/concept-map.md` — обучение и исследование (карты понятий, пробелы в знаниях, очерчивание границ задачи)
   - `templates/document-critique.md` — проверка документа (предложения с процессом «принять/отклонить/прокомментировать»)
   - `templates/diff-review.md` — проверка кода (git diff, коммиты, PR с построчными комментариями)
   - `templates/code-map.md` — архитектура кодовой базы (связи компонентов, потоки данных, схемы слоёв)
3. **Следуй шаблону**, чтобы построить площадку. Если тема не вписывается ни в один шаблон, возьми ближайший и адаптируй его.
4. **Открой в браузере.** После записи HTML-файла выполни `open <filename>.html`, чтобы запустить его в браузере пользователя по умолчанию.

## Основные требования (к каждой площадке)

- **Один HTML-файл.** Весь CSS и JS встроены внутрь. Никаких внешних зависимостей.
- **Живой предпросмотр.** Обновляется мгновенно при каждом изменении элемента управления. Кнопки «Применить» нет.
- **Вывод промта.** Естественным языком, а не списком значений. Упоминает только выбор, отличающийся от значений по умолчанию. Содержит достаточно контекста, чтобы действовать, не видя площадки. Обновляется вживую.
- **Кнопка копирования.** Копирование в буфер обмена с коротким откликом «Скопировано!».
- **Разумные значения по умолчанию и пресеты.** Хорошо выглядит при первой загрузке. Включи 3–5 именованных пресетов, которые переключают все элементы управления на согласованное сочетание.
- **Тёмная тема.** Системный шрифт для интерфейса, моноширинный — для кода и значений. Минимум оформления.

## Схема управления состоянием

Держи один объект состояния. Каждый элемент управления пишет в него, каждая отрисовка читает из него.

```javascript
const state = { /* all configurable values */ };

function updateAll() {
  renderPreview(); // update the visual
  updatePrompt();  // rebuild the prompt text
}
// Every control calls updateAll() on change
```
## Схема вывода промта

```javascript
function updatePrompt() {
  const parts = [];

  // Only mention non-default values
  if (state.borderRadius !== DEFAULTS.borderRadius) {
    parts.push(`border-radius of ${state.borderRadius}px`);
  }

  // Use qualitative language alongside numbers
  if (state.shadowBlur > 16) parts.push('a pronounced shadow');
  else if (state.shadowBlur > 0) parts.push('a subtle shadow');

  prompt.textContent = `Update the card to use ${parts.join(', ')}.`;
}
```
## Типичные ошибки, которых нужно избегать

- Вывод промта — просто список значений → пиши его как естественную инструкцию
- Слишком много элементов управления сразу → группируй по смыслу, а продвинутые прячь в сворачиваемый раздел
- Предпросмотр обновляется не мгновенно → каждое изменение элемента управления должно сразу вызывать перерисовку
- Нет значений по умолчанию и пресетов → при загрузке площадка пуста или сломана
- Внешние зависимости → если CDN недоступен, площадка мертва
- В промте не хватает контекста → добавь столько, чтобы по нему можно было действовать без площадки

Перевод: iiuniversitet. Оригинал: https://github.com/anthropics/claude-plugins-official/tree/main/plugins/playground/skills/playground, лицензия Apache-2.0. Изменения: перевод на русский язык.