# Component Playground
> Storybook-подобная страница: все компоненты дизайн-системы во всех вариантах, контролы пропсов. Триггеры: «storybook страница», «all states UI».
- Skill: `jhamidun/component-playground` (Agent Skill)
- Install (CLI): `npx skillmds@latest add jhamidun/component-playground`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jhamidun/component-playground/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: JHamidun (https://skillmd.com/u/jhamidun)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/jhamidun/component-playground
---
# Component playground
Одна HTML-страница, на которой каждый компонент отрендерён во всех вариантах. С контролами «слева список → клик → справа сцена с компонентом + рычажки для пропсов».
## Структура
```
playground/
index.html ← главный
components/ ← по файлу на компонент
button.html
input.html
card.html
data.json ← список компонентов и их вариантов
```
## Шаблон index.html
```html
Component playground
```
## data.json
```json
{
"groups": {
"Foundation": [
{ "id": "tokens", "name": "Tokens", "file": "tokens.html" },
{ "id": "type", "name": "Typography", "file": "type.html" }
],
"Inputs": [
{ "id": "button", "name": "Button", "file": "button.html",
"props": {
"variant": { "type": "select", "options": ["primary","secondary","ghost"] },
"size": { "type": "select", "options": ["sm","md","lg"] },
"loading": { "type": "bool" },
"label": { "type": "text", "default": "Click me" }
}
}
]
}
}
```
## Компонент-страница (button.html)
```html
```
## Что показывать обязательно
- Все варианты × размеры × состояния.
- Пустое / disabled / loading / error состояния (см. `states-checklist`).
- В тёмной теме (если есть).
- На мобилке (через rezizer).
## Антипаттерны
- ❌ Один gigantic html-файл со всеми компонентами. Невозможно навигировать.
- ❌ Только default-вариант. Покрытие должно быть полным.
- ❌ Без контролов — нельзя проверить интерактивные стейты.