Raphael Salaja Skills — плагин
Набор скиллов для работы агента над UI: правила масштаба, сдержанности и движения и проверка результата в живом приложении
- 67 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Скиллы `ship` и `rule` коммитят, пушат и правят файлы, а процедуры проверки запускают страницу и трассировку
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add plugins/raphael-salaja-skillsОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Скиллы `ship` и `rule` коммитят, пушат и правят файлы, а процедуры проверки запускают страницу и трассировку
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Скиллы делятся на два вида. Принципы задают стандарт, которого агент держится по ходу работы: `scope` меняет ровно то, что просили, `reuse` сначала берет компоненты проекта, потом библиотеку и только затем пишет новое, `restraint` выпускает минимум, `copy` и `prose` ведут тексты интерфейса и статей, `defaults` задает значения по умолчанию, `motion` отвечает за анимацию, `color` держит контраст. Процедуры выполняют задачу по порядку. `verify` проверяет изменение в запущенном приложении, `gather` собирает референсы на одну доску, `match` пересобирает названный образец по реальным значениям, `rule` превращает повторную правку в правило проекта, `viewports` прогоняет страницу на всех ширинах, `icons` дорисовывает недостающие значки в стиле набора. Вызываемые вручную: `ship`, `prototype`, `lab`, `deconstruct`, `alignment`, `keyboard`, `frames`, `invariants`, `avatar`, `bots`, `sketchbook` и `audit`. Правила написаны парой: к каждому приложена неверная строка и строка-замена, а находки оформляются как `file:line - [rule-id]`. Обзор заканчивается итогом `Block` или `Approve`. Каталог `kit/` содержит HTML и CSS для отчетов.
Для кого. Фронтенд-разработчикам и дизайн-инженерам, которым нужен общий стандарт интерфейсов и воспроизводимые проверки для Claude Code и Codex.
Подходит, если
- Агент правит интерфейс, и скилл `scope` держит его в границах запроса без лишних переделок
- Изменение проверяют в запущенном приложении: одного кода для проверки недостаточно
- Страницу прогоняют по всем ширинам и по клавиатуре и получают список проблем
- Ревью диффа или всей кодовой базы по всем правилам сразу идет командой `/audit`
Не подходит, если
- Интерфейса в проекте нет: правила посвящены экранам, анимации и верстке
- Нужны правила по заголовкам в sentence case: скилл `copy` задает Title Case
- Проект не подключает скиллы формата `SKILL.md`
Пример запроса к агенту
/audit незакоммиченный diff и затем /verify форму настроек в запущенном приложенииОграничения
Скиллы отражают личные стандарты автора, например интерфейсные подписи в Title Case, поэтому часть правил придется отключить или переопределить под ваш гайд. Процедуры вроде `viewports`, `keyboard`, `frames` и `alignment` запускают страницу и трассировку производительности, для чего нужен браузер и работающее приложение. Скилл `bots` рассчитан на Grok Bots и `gather` читает сохраненное пользователя на выбранных им сайтах. Скиллы с пометкой пользовательского вызова срабатывают только после явной команды. Названия вызова в плагине получают префикс, например `/userinterface:audit`.
Как отключить. Выполните `/plugin uninstall userinterface` или удалите установленные папки скиллов из `.claude/skills/` и `.agents/skills/`.
Частые вопросы
Как поставить скиллы Raphael Salaja?
Выполните `npx skills add raphaelsalaja/skills`. Для Claude Code есть плагин: `/plugin marketplace add raphaelsalaja/skills`, затем `/plugin install userinterface@userinterface`.
Чем принципы отличаются от процедур?
Принципы вроде `scope` и `motion` агент применяет в ходе работы сам. Процедуры выполняют задачу по шагам, и часть из них, например `ship` и `audit`, вызывается только вручную.
Что делает `/audit`?
Проверяет изменение, сессию или всю кодовую базу по всем скиллам коллекции и выдает ранжированный нумерованный отчет. Находки идут в формате `file:line - [rule-id]`.
Что означают Block и Approve?
`Block` стоит, когда остается находка высокой важности, а `Approve` ставится, когда таких нет. Итог идет после списка находок.
Как вызвать процедуру вручную?
Наберите имя со слешем и тему: `/prototype более плотная панель фильтров`, `/lab меню`, `/keyboard диалог настроек`, `/frames палитра команд`.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
ПлагиныСкилл для верстки дорогих интерфейсов: лендинги, дашборды и мобильные экраны по четырем маршрутам с проверкой на дешевизну
Скилл для агента с базой из 107 стилей, 127 палитр и 107 шрифтовых пар: генерирует дизайн-систему и проверяет код интерфейса
Скилл дизайна интерфейсов: арт-дирекция под продукт, общий DESIGN.md, токены, проверка верстки и доступности в браузере.
Скиллы для дизайн-инженеров: быстрая чистка интерфейса, доступность, метаданные и производительность анимаций
Детали, от которых интерфейс приятнее
make-interfaces-feel-better
Скилл о мелких деталях интерфейса: анимации, типографика, иконки, тени, скругления, оптическое выравнивание и области нажатия
Скиллы против шаблонных интерфейсов: сетка, типографика, анимация и отступы, плюс генерация референсов для веба и мобильных
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| Raphael Salaja Skills (эта карточка) | нет | 67 | |
| User Interface Wiki | нет | 950 | справочник по анимации и интерфейсам того же автора, а здесь принципы и процедуры проверки в запущенном приложении |
| Impeccable | нет | 108 873 | полный набор дизайн-команд с оценкой и полировкой, а тут принципы с парами правил и процедуры по шагам |
Коротко о README
README делит набор на принципы и процедуры и описывает правило пар «неверная строка и замена». Он перечисляет скиллы с однострочным описанием, дает команду установки, примеры вызова и установку плагина для Claude Code.
Бейдж для README
Исходный SKILL.md
--- name: scope description: Changes exactly what was asked, keeps what already worked and finishes every item in the message. --- # Scope This skill holds an edit to the request. It reads the smallest literal meaning, keeps everything that already worked and accounts for every item the user sent. ## The smallest reading wins A change outside the named element is a finding unless the user asked for a sweep. One short question before a broad change is not a finding. Press hardest on short messages that point at one element, on batched messages and on refactors. Deleting what nobody asked for belongs to `restraint`. Proving the change works belongs to `verify`. ## Every ask gets an answer Split the message into numbered items and add the open items from earlier turns. Close with the same list, each item done or not done with the reason. Doing the first of four asks is `scope-list-every-ask`. ## The named element and nothing around it Restate the target in a few words. "The card" means the card, not the page around it. Restyling the whole shell for a top bar request is `scope-smallest-reading`. When two readings fit, ask one short question. ## Earlier instructions still stand Before editing, read the user's earlier corrections in the thread and the rules in the repository. Re-adding something they removed is `scope-remember-instructions`. A value they gave, such as `16px` of left padding, stays. Guessing a new one is `scope-keep-given-values`. ## What worked keeps working Before a refactor, list the features, buttons and states that exist now, then check each one after. A dropped back button is `scope-keep-what-worked`. When fixing one property, keep the others. Fixing a clip by removing the width animation is `scope-no-collateral`. ## Unshipped work is done now Work that has not shipped is not split into phases or marked out of scope without asking. A "phase 2" list is `scope-no-phasing`. While planning, plan only. Editing files before the plan is approved is `scope-plan-means-plan`. ## An explanation is the answer When the user asks how something works, explain it and wait. Answering "how does this work" with a diff is `scope-explain-when-asked`. ## The pair Every check is a pair. The broken line sits beside the line that replaces it. | Rule | Broken | Replacement | | --- | --- | --- |