dithercn — скилл
Движок дизеринга для shadcn и скилл к нему: агент собирает фоны, графики и лоадеры из точек в цветах темы проекта.
- 145 ★ репозитория
- Последний коммит
- MIT
Минимальный доступ
Почему такой уровень
- Команда shadcn CLI скачивает исходники с `dithercn.dev` и копирует их в проект, поэтому изменения стоит просмотреть в diff.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/dithercnОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Команда shadcn CLI скачивает исходники с `dithercn.dev` и копирует их в проект, поэтому изменения стоит просмотреть в diff.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
dithercn добавляет в проект на shadcn/ui движок дизеринга и скилл для агента. Движок `dither-core` в `lib/dither` строит упорядоченные точки по тону, который вы задаете сами: шейдер WebGL для движущихся эффектов, SVG и CSS для статичных форм, дизеринг изображений и экспорт в PNG, SVG и CSS. Цвета берутся из темы (`--primary`, `--background`), анимацию, смену размера, паузу вне экрана и reduced motion движок берет на себя. Скилл объясняет агенту, как выбрать технику, написать поле на GLSL, поставить дизеринг на лендинг или дашборд и проверить результат в светлой, темной теме и при сниженном движении. Рядом идут 63 готовых примера: фоны, графики, элементы интерфейса, текст и изображения.
Для кого. Фронтенд-разработчикам и дизайнерам, которые собирают лендинги и дашборды на React и shadcn/ui и хотят дизеринг-эффекты без ручного GLSL.
Подходит, если
- Под заголовком героя нужен медленный дизеринговый фон в цвете бренда.
- График или индикатор должен выглядеть как пиксельный дизеринг.
- Фотографию превращают в дизеринговую картинку и выгружают в PNG или SVG.
- Прежде чем писать свое поле, агент сверяется с ближайшим готовым примером.
Не подходит, если
- Проект не на React 19 и Tailwind CSS v4: движок рассчитан на них.
- Интерфейс не использует shadcn/ui и переменные темы.
- Нужна анимация без WebGL: движущиеся эффекты построены на шейдере.
Пример запроса к агенту
Добавь медленное дизеринговое северное сияние за заголовком героя в цвете бренда и оставь заголовок читаемым.Ограничения
Нужны React 19, Tailwind CSS v4 и shadcn/ui. Движущиеся эффекты используют WebGL. Установка копирует исходники в проект и добавляет переменные `--dither-*` в глобальные стили. Замена движка может затереть ваши правки в `lib/dither`, поэтому скилл просит сначала предупредить об этом. Готовые компоненты служат отправной точкой, а не меню на выбор: агент пишет собственное поле и берет технику у ближайшего примера. Эффекты стоит проверять на слабых устройствах. Лицензия MIT.
Как отключить. Удалите `lib/dither`, `components/dithercn`, папки `.agents/skills/dithercn` и `.claude/skills/dithercn` и переменные `--dither-*` из глобальных стилей.
Частые вопросы
Что ставит команда?
Движок в `lib/dither/`, скилл в `.agents/skills/dithercn/` и `.claude/skills/dithercn/`, переменные `--dither-*`.
Как поставить отдельный пример?
Той же командой с другим адресом, например `https://dithercn.dev/r/dither-gradient.json`.
Что делать с устаревшим движком?
Скилл ищет `colorField` в `lib/dither/shader.tsx`; если слова нет, файлы движка заменяют, не используя `--overwrite`, иначе пропадет `lib/utils.ts`.
Что есть для агентов на сайте?
`/llms.txt`, `/llms-full.txt` и `/.well-known/agent-skills/index.json` со скиллом.
Какие нужны версии?
React 19 и Tailwind CSS v4 в проекте на shadcn/ui. Без них движок не заработает.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл и MCP-сервер библиотеки Shaders: агент собирает фоны, стекло, градиенты и курсорные эффекты на WebGPU для React, Vue, Svelte, Solid и JS
design.how: 6 скиллов превращают интерфейс приложения в дизайн-систему для агента и четыре готовые системы для shadcn.
Скилл разбирает и переносит WebGL, WebGPU и Canvas-эффекты со страницы в отдельный локальный проект на нативном JS
Скилл превращает референсы интерфейсов в структурированный профиль дизайна в JSON и генерирует по нему новый интерфейс под ваш контент
Скилл дизайна интерфейсов, презентаций и графики для кодинг-агентов: черновики на холсте через CLI superdesign
Скилл для верстки дорогих интерфейсов: лендинги, дашборды и мобильные экраны по четырем маршрутам с проверкой на дешевизну
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| dithercn (эта карточка) | нет | 145 | |
| Shaders | да | 5 917 | скилл и MCP библиотеки Shaders на WebGPU; dithercn ставит в проект исходники движка дизеринга |
| Shader Skills | нет | 447 | учит писать GLSL из готовых блоков; dithercn дает готовый движок дизеринга с темой и экспортом |
Коротко о README
README показывает баннер, объясняет состав (движок, скилл, 63 примера, цвета темы) и дает команду установки с примером запроса. Ниже идут раздел для агентов и команды разработки сайта.