
abdiraimov-otabek/dashboard-design-skill
Developer toolsЭта страница переведена автоматически. Технические детали смотрите в оригинале. Открыть оригинал
Навык Claude Code для чистого, честного пользовательского интерфейса панели инструментов: плитки KPI, диаграммы, датчики, рейтинговые списки, состояния, макеты и скриншот QA-пасса. Дистиллирован из 127 отгруженных приборных панелей.
Обзор
Дайте своему агенту по кодированию вкус старшего дизайнера продукта для экранов данных, в Интернете или в SwiftUI. Этот навык учит его строить, редизайн и аналитику, доходы и метрики панели приборов: KPI плитки, диаграммы, периоды сравнения, ранжированные поломки, выборщики диапазона дат, фильтры, идеи, пустые состояния, широкие и телефонные макеты. Он завершает каждую работу с помощью скриншота QA, поэтому он судит о том, что находится на экране, а не о том, что находится в коде. Он был дистиллирован из (аналитические инструменты, панели управления доходами, системы проектирования, дизайнерские галереи), полный разрыв одного продукта аналитики дохода и реальный редизайн, где каждое правило здесь было нарушено однажды, поймано на скриншоте и исправлено. (Codex, Cursor, все, что читает Markdown): указывайте файл AGENTS.md или правила на skills/dashboard-design/SKILL.md; ссылки загружаются оттуда. Он запускается сам по себе, когда вы работаете на приборной панели. Или спросить напрямую: - "Создать аналитическую панель для этого приложения: посетители, регистрация, доход от источника.
Обзор (машинный перевод)
Дайте своему агенту по кодированию вкус старшего дизайнера продукта для экранов данных, в Интернете или в SwiftUI. Это мастерство учит его строить, редизайн и критика аналитика, доходы и показатели панели инструментов: KPI плитки, графики, периоды сравнения, ранжирование поломки, выборщики дат, фильтры, идеи, пустые состояния, широкие и телефонные макеты. Заканчивается каждая работа с Скриншот QA проходит, поэтому он оценивает то, что находится на экране, а не то, что находится в коде.
Он был дистиллирован с **127 отгруженных экранов приборной панели ** (аналитические инструменты, панели управления доходами, системы проектирования). дизайнерские галереи, полный отказ от одного продукта для анализа доходов и реальный редизайн, где каждое правило было Один раз сломался, попал на скриншот и починил.
Что меняется
Вместо этого агент строит
[скрыто] [скрыто]
| Тонированный блок за каждым списковым рядом | Тонкий 3 px бар вдоль края строки |
| Подчеркивающая маркировка выбранной плитки | Мягкая тонированная начинка со слабым кольцом |
| Нативные 21/09/2026 📅 входные данные даты | Календарь пополнения: мягкая полоса, твердые дни окончания, «12 дней» + Применить |
| Узкая колонка, плавающая на широком мониторе | Широкий режим, который добавляет колонки по мере роста экрана |
Эта страница переведена автоматически. Технические детали смотрите в оригинале.
README
Показан фрагмент оригинального README. Открыть оригинал.
Dashboard Design: a Claude Code skill for clean, honest dashboards
Give your coding agent the taste of a senior product designer for data screens, on the web or in SwiftUI. This skill teaches it to build, redesign and critique analytics, revenue, metrics and admin dashboards: KPI cards, charts, heatmaps, bullet graphs, comparison periods, ranked breakdowns, date range pickers, filters, empty states, wide and phone layouts. Pages that speak for themselves: numbers and shapes on the screen, every explanation in a tooltip. It ends every job with a screenshot QA pass, so it judges what is on the screen rather than what is in the code.
It was distilled from 127 shipped dashboard screens (analytics tools, revenue dashboards, design systems, design galleries), the field’s classics (Stephen Few, Edward Tufte, Cole Nussbaumer Knaflic, Cleveland & McGill, Nielsen Norman Group, the WCAG), six of Apple’s WWDC sessions on charts, chart accessibility and interface writing, two full teardowns, and real redesigns where every rule here was broken once, caught on a screenshot, and fixed.
New in 2.0
- Wordless: a sentence under every KPI and a row of “insights” sentences are gone. Numbers, shapes and one-word baselines on the screen; explanations in tooltips. The QA pass counts sentences; the target is zero.
- Monitor: overview → what needs attention → closer look → act. Problems are flagged on the data itself, and the action sits on the flag (a not-marked heatmap cell is the remind button).
- Perception reference: the encoding ladder, Few’s colour rules, sequential / diverging / classed scales, the inverted-salience trap, bullet graphs, sparklines, WCAG for charts, Few’s thirteen mistakes as a checklist.
- New components: heatmap of number pills with classed tiers, bullet graph, segmented share bar, one tooltip system, people rows that fold on phones instead of truncating.
- Apple’s chart guidance: glance → interactive → expanded with continuity, fixed vs dynamic axes, gridlines at intuitive steps, spoken values context first, audio graphs, colours distinct by name, the words that remain (specific action labels, guiding empty states, errors with a fix).
- QA: a words audit, a salience test (“where does the eye land first?”), real-data and colour-blindness checks, and twelve new smells.
- Case study: a school’s home dashboard in three versions, including the one its owner rejected for being a page of sentences.
What it changes
| Instead of | The agent builds |
|---|---|
| A tinted block behind every list row | A slim 3 px share bar along the row’s edge |
| An underline marking the selected tile | A soft tinted fill with a faint ring |
Native 21/09/2026 📅 date inputs |
A popover calendar: soft band, solid end days, “12 days” + Apply |
Рекомендуемые инструменты
Попробуйте другой запрос или уберите фильтр.
Установка
npx skillfish add abdiraimov-otabek/dashboard-design-skill