TidyFactor Styler — скилл
Скилл правит интерфейс в живом коде без лишних зависимостей: компоненты, секции, страницы и RTL с арабским под ваш стек
- 121 ★ репозитория
- Последний коммит
Расширенный доступ
Почему такой уровень
- Скилл правит файлы интерфейса в проекте и пишет кэш в `.tidyfactor`, отдельная команда assets обрабатывает изображения.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/tidyfactor-stylerОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Скилл правит файлы интерфейса в проекте и пишет кэш в `.tidyfactor`, отдельная команда assets обрабатывает изображения.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
TidyFactor Styler — скилл для агентов, который перерабатывает интерфейс в существующем проекте по принципу согласия со стеком проекта. Он определяет активный фреймворк, смотрит имеющиеся токены дизайна и пишет компоненты, секции и страницы в стиле самого проекта: по его именам, конфигурации Tailwind и правилам оформления, без параллельной системы CSS. Командная диспетчеризация дает тринадцать команд: `brief`, `component`, `section`, `page`, `redesign`, `layout`, `nav-footer`, `typography`, `palette`, `assets`, `rtl`, `motion` и `styles`. Скилл держит матрицу из восьми состояний компонента: по умолчанию, наведение, нажатие, фокус, отключено, загрузка, пусто и ошибка. Отдельный рабочий процесс переводит направленный CSS на логические свойства и исправляет зеркальные значки для арабского и других языков справа налево.
Для кого. Фронтенд-разработчикам и агентствам, которым нужен редизайн в живом проекте без чужого CSS, особенно с арабским и другими RTL-языками.
Подходит, если
- Компонент надо обновить, не трогая соседние виджеты и не заводя новых стилей.
- Сайт получает арабскую версию, и направленный CSS нужно перевести на логические свойства.
- Страницу надо собрать по архетипу макета, подобрав навигацию и подвал под продукт.
- Палитру проверяют на контраст WCAG AA и строят шкалы семантических токенов.
Не подходит, если
- Нужен прототип с нуля: для него в экосистеме есть отдельный скилл tidyfactor-design.
- Нужен каркас нового фреймворка: для этого есть другие скиллы TidyFactor.
- Проект без своего оформления и без токенов: скиллу не за что зацепиться.
Пример запроса к агенту
Выполни brief для этого проекта, затем переделай компонент карточки товара под наш Tailwind и добавь все восемь состояний.Ограничения
Скилл подходит для реальных проектов и опирается на найденный стек, поэтому перед работой нужна команда `brief`, которая сохраняет базу в `.tidyfactor/styler-brief.md`. Ставится через CLI TidyFactor, установщик skills или пакет npm. README написан в рекламном ключе, заявленные «баллы архитектора» и сравнения нужно считать утверждениями автора. Документация переведена на арабский, фарси, испанский, португальский, китайский, немецкий и французский. Лицензия Apache-2.0 указана в бейдже. Последний коммит в репозитории датирован октябрем 2026 года.
Как отключить. Удалите папку скилла `tidyfactor-styler` из каталога скиллов агента и файл `.tidyfactor/styler-brief.md` из проекта. Пакет удаляется командой `npm uninstall`, если ставили глобально.
Частые вопросы
Как установить скилл?
Командой `npx @tidyfactor/cli add styler`, либо `npx skills add tidyfactor/styler`, либо автономным запуском `npx @tidyfactor/styler@latest`.
Какие стеки поддерживаются?
Скилл определяет фреймворк проекта и переключается между ними, среди упомянутых React, Next.js и PHP. Полный список приведен в разделе поддерживаемых стеков README.
Что делает команда rtl?
Запускает аудит и правку для RTL: заменяет направленный CSS логическими свойствами, исправляет переворот значков и настраивает иерархию шрифтов для арабского.
Что за матрица из восьми состояний?
Для каждого компонента гарантируются состояния по умолчанию, наведение, нажатие, фокус, отключено, загрузка, пусто и ошибка.
Как скилл не создает дубли стилей?
Команда `brief` определяет фреймворк и имеющиеся токены, а редизайн компонента затрагивает только его определение и места использования. Параллельная система CSS не создается.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкилл для интерфейсов без шаблонного ИИ-вида: типографика, цвет, движение, состояния компонентов и критика готового.
Детали, от которых интерфейс приятнее
make-interfaces-feel-better
Скилл о мелких деталях интерфейса: анимации, типографика, иконки, тени, скругления, оптическое выравнивание и области нажатия
Скиллы для дизайн-инженеров: быстрая чистка интерфейса, доступность, метаданные и производительность анимаций
27 правил oxlint для Tailwind CSS v4 плюс скилл и плагин Claude Code: опечатки в классах, конфликты и устаревшие утилиты.
Скилл с готовыми CSS-переходами для веб-интерфейсов: модалки, выпадашки, тосты, лоадеры и десятки других анимаций по правилам подбора
Скиллы против шаблонных интерфейсов: сетка, типографика, анимация и отступы, плюс генерация референсов для веба и мобильных
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| TidyFactor Styler (эта карточка) | нет | 121 | |
| Impeccable | нет | 108 873 | команды дизайна и ревью интерфейса; Styler держится существующего стека и отдельно ведет RTL для арабского |
| Frontend Design (Ilm-Alan) | нет | 166 | скилл для красивого фронтенда; Styler подстраивается под ваши токены и не создает параллельный CSS |
Коротко о README
Описаны тринадцать команд, восемь рабочих процессов, поддерживаемые стеки, арабский и RTL и методика проверки результата. Есть таблица связанных проектов TidyFactor с пакетами npm.