Dashboard Design — плагин
Скилл для Claude Code строит и разбирает дашборды: KPI-плитки, графики, календарь периода, с проверкой по скриншотам.
- 457 ★ репозитория
- Последний коммит
- MIT
Минимальный доступ
Почему такой уровень
- Скилл состоит из правил, справочников и примеров HTML, сам не запускает код и не обращается к сети.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add plugins/dashboard-designОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Скилл состоит из правил, справочников и примеров HTML, сам не запускает код и не обращается к сети.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Dashboard Design дает агенту набор правил для экранов с данными: аналитика, выручка, метрики, админка. Скилл покрывает KPI-карточки, графики, тепловые карты, bullet-графики, периоды сравнения, ранжированные списки, выбор диапазона дат, фильтры, пустые состояния, широкие и телефонные макеты. Веб-версия и SwiftUI описаны отдельными справочниками. Правила собраны из 127 разобранных дашбордов, работ Стивена Фью, Эдварда Тафти, Коула Нуссбаумера Кнафлик и шести докладов Apple WWDC о графиках. Каждая задача завершается проходом по скриншотам: агент оценивает то, что видно на экране, а не то, что написано в коде. Скилл молчаливый по замыслу: числа и формы на экране, а пояснения в подсказках.
Для кого. Фронтенд-разработчикам и продактам, которые собирают аналитические и админские экраны и хотят, чтобы агент не выдавал типовые шаблонные дашборды.
Подходит, если
- Нужен дашборд посетителей, регистраций и выручки по источникам с нуля.
- Готовые KPI-плитки выглядят тяжело, и их надо упростить.
- Календарь выбора периода собран из нативных полей даты и неудобен.
- Дашборд надо разобрать по скриншоту и получить список проблем по тяжести.
Не подходит, если
- Нужна подключаемая библиотека графиков с готовым API: скилл дает правила и примеры, а не компонент.
- Требуется настроить хранилище и конвейер данных под метрики.
- Проект использует только нативный мобильный стек, кроме SwiftUI.
Пример запроса к агенту
Собери аналитический дашборд для этого приложения: посетители, регистрации, выручка по источникам.Ограничения
Скилл задает строгий визуальный стиль: молчаливые экраны, плотная типографика, слабая подсветка. Если у проекта уже есть дизайн-система, правила придется сверять с ней вручную. Проверка по скриншотам требует, чтобы у агента был доступ к браузеру или рендеру страницы. Для Codex, Cursor и других агентов автоматической установки нет: в AGENTS.md или файле правил указывают путь к SKILL.md, а справочники загружаются оттуда. README содержит блок спонсорской рекламы двух сторонних приложений.
Как отключить. Удалите плагин командой /plugin или папку dashboard-design из ~/.claude/skills, если ставили скилл вручную.
Частые вопросы
Как поставить Dashboard Design в Claude Code?
Запустите `/plugin marketplace add abdiraimov-otabek/dashboard-design-skill`, затем `/plugin install dashboard-design@dashboard-design-skill`. Скилл включается и сам при работе над дашбордом.
Есть ли версия для SwiftUI?
Да, в references лежит отдельный файл swiftui.md. Правила про графики Apple включены в общие.
Что значит бессловесный дашборд?
Под каждым числом нет предложения: остаются дельта с одним словом базы сравнения и подсказка. Проверка считает предложения на экране, цель ноль.
Как использовать в Codex или Cursor?
Укажите в `AGENTS.md` или файле правил путь `skills/dashboard-design/SKILL.md`. Справочники подгружаются из этой папки.
Какие компоненты описаны?
KPI-плитки, графики, тепловые карты, bullet-графики, ранжированные списки, выбор диапазона дат, фильтры, подсказки и пустые состояния. Для каждого есть правила и примеры в references.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
ПлагиныСкилл дизайна интерфейсов, презентаций и графики для кодинг-агентов: черновики на холсте через CLI superdesign
Пакет скиллов и команд для Claude Code: аудит токенов и компонентов, управление, документация и отчеты для команды дизайн-системы
Скилл дизайна интерфейсов: арт-дирекция под продукт, общий DESIGN.md, токены, проверка верстки и доступности в браузере.
Скилл дизайна веб-страниц для Claude Code: сначала спецификация DESIGN.md, потом код по ней
Скилл для Codex: три разных визуальных концепта, ревью по скриншотам и чистка лишнего, чтобы интерфейс не выглядел шаблонно.
Скиллы креативного кода для Claude Code: движение, микровзаимодействия и визуальные системы для веба, Android и Apple
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| Dashboard Design (эта карточка) | нет | 457 | |
| Lieflat Charts | нет | 6 839 | правила для диаграмм; Dashboard Design целиком про экран дашборда: плитки, фильтры, календарь, пустые состояния |
| AntV Chart Visualization Skills | нет | 533 | помогает выбрать и построить график; этот скилл задает композицию и проверку всего дашборда |
Коротко о README
В версии 2.1 добавлены плитки целей, полоса статистики с дельтами и штрихованные столбцы изменений. Описана шкала плотности: текст 14 px, иконки 16 px. В репозитории три примера в одном HTML-файле каждый: продажи, трафик и статус.