Raphael Salaja Skills — плагин

Набор скиллов для работы агента над UI: правила масштаба, сдержанности и движения и проверка результата в живом приложении

  • 67 ★ репозитория
  • Последний коммит
  • MIT
Плагин

Расширенный доступ

Почему такой уровень

  • Скиллы `ship` и `rule` коммитят, пушат и правят файлы, а процедуры проверки запускают страницу и трассировку
Все причины и проверки

raphaelsalaja/skills

Установка

Работает в

В терминале, через 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 палитра команд`.

Обсуждение

Вопросов и отзывов пока нет.

Плагины

Скилл для верстки дорогих интерфейсов: лендинги, дашборды и мобильные экраны по четырем маршрутам с проверкой на дешевизну

СкиллРасширенный доступ976Звезды репозитория

Скилл для агента с базой из 107 стилей, 127 палитр и 107 шрифтовых пар: генерирует дизайн-систему и проверяет код интерфейса

ПлагинМинимальный доступ99Звезды репозитория

Скилл дизайна интерфейсов: арт-дирекция под продукт, общий DESIGN.md, токены, проверка верстки и доступности в браузере.

СкиллРасширенный доступ51Звезды репозитория

Скиллы для дизайн-инженеров: быстрая чистка интерфейса, доступность, метаданные и производительность анимаций

СкиллМинимальный доступ11 тыс.Звезды репозитория

Скилл о мелких деталях интерфейса: анимации, типографика, иконки, тени, скругления, оптическое выравнивание и области нажатия

СкиллМинимальный доступ4 тыс.Звезды репозитория15Установок через CLI и агентов

Скиллы против шаблонных интерфейсов: сетка, типографика, анимация и отступы, плюс генерация референсов для веба и мобильных

СкиллМинимальный доступ114,1 тыс.Звезды репозитория112Установок через CLI и агентов

Сравнение с похожими

Карточки с тем же главным запросом: чем они отличаются.

ИнструментОфициальныйЗвезды репозиторияГлавное отличие
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 |
| --- | --- | --- |

Сообщить о проблеме