Raphael Salaja Skills plugin
A skill set for agent UI work: scope, restraint and motion rules plus checks of the result in the live app
- 66 ★ on the repository
- Last commit
Extended access
Why this level
- The `ship` and `rule` skills commit, push and edit files, and verification procedures run a page and a trace
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add plugins/raphael-salaja-skillsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The `ship` and `rule` skills commit, push and edit files, and verification procedures run a page and a trace
This is third-party code. Review the repository files before installing.
What it does
The collection splits into principles and procedures. Principles set a standard the agent holds while working: `scope` changes exactly what was asked, `reuse` takes project components first, then a library, and only then writes new code, `restraint` ships the minimum, `copy` and `prose` guide interface text and articles, `defaults` sets default values, `motion` covers animation and `color` holds contrast. Procedures run a job in order. `verify` checks a change in the running app, `gather` collects references onto one board, `match` rebuilds a named reference from real values, `rule` turns a repeated correction into a project rule, `viewports` renders a page at all widths and `icons` draws missing icons in the set style. The user-invoked ones are `ship`, `prototype`, `lab`, `deconstruct`, `alignment`, `keyboard`, `frames`, `invariants`, `avatar`, `bots`, `sketchbook` and `audit`. Rules are written as pairs: each has a broken line and a replacement line, and findings read `file:line - [rule-id]`. A review ends with `Block` or `Approve`. The `kit/` directory holds HTML and CSS for reports.
Who it is for. Frontend developers and design engineers who want one interface standard and reproducible checks for Claude Code and Codex.
Good fit when
- The agent edits an interface and the `scope` skill keeps it within the request without extra rework
- A change is checked in the running app: code alone is not enough for verification
- A page is run across all widths and by keyboard and yields a list of problems
- A review of a diff or the whole codebase against every rule at once runs with `/audit`
Not a fit when
- The project has no interface: the rules are about screens, animation and layout
- Sentence-case headings are required: the `copy` skill sets Title Case
- The project does not load skills in the `SKILL.md` format
Example request
/audit the uncommitted diff and then /verify the settings form in the running appLimitations
The skills reflect the author's personal standards, such as interface labels in Title Case, so some rules must be turned off or overridden for your guide. Procedures such as `viewports`, `keyboard`, `frames` and `alignment` run a page and a performance trace, which needs a browser and a working app. The `bots` skill targets Grok Bots and `gather` reads the user's saves on sites they pick. Skills marked user-invoked fire only after an explicit command. Command names in the plugin carry a prefix, for example `/userinterface:audit`.
How to disable. Run `/plugin uninstall userinterface` or delete the installed skill folders from `.claude/skills/` and `.agents/skills/`.
FAQ
How do I install the Raphael Salaja skills?
Run `npx skills add raphaelsalaja/skills`. For Claude Code there is a plugin: `/plugin marketplace add raphaelsalaja/skills`, then `/plugin install userinterface@userinterface`.
How do principles differ from procedures?
Principles such as `scope` and `motion` are applied by the agent as it works. Procedures run a job step by step, and some, such as `ship` and `audit`, are called only manually.
What does `/audit` do?
It reviews a change, a session or a whole codebase against every skill in the collection and returns one ranked numbered report. Findings use the `file:line - [rule-id]` format.
What do Block and Approve mean?
`Block` means a high-severity finding remains and `Approve` means none does. The verdict follows the list of findings.
How do I call a procedure manually?
Type the name with a slash and a topic: `/prototype a denser filter bar`, `/lab the menu components`, `/keyboard the settings dialog`, `/frames opening the command palette`.
Discussion
No questions or reviews yet.
Related
PluginsA skill for building high-craft interfaces: landing pages, dashboards and mobile screens on four routes, with a cheapness check
A skill with 107 styles, 127 palettes and 107 font pairings that generates a design system and audits interface code
A UI design skill: art direction per product, a shared DESIGN.md, tokens, and layout and accessibility checks in a browser.
Skills for design engineers: quick UI cleanup, accessibility, metadata and animation performance fixes
Make interfaces feel better
make-interfaces-feel-better
A skill about the small interface details: animations, typography, icons, shadows, radii, optical alignment and hit areas
Skills against boilerplate-looking UIs: layout, type, motion and spacing, plus reference image generation for web and mobile
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| Raphael Salaja Skills (this card) | no | 66 | |
| User Interface Wiki | no | 950 | a reference on animation and interfaces by the same author, whereas this offers principles and verification procedures in the running app |
| Impeccable | no | 108,873 | a full set of design commands for critique and polish, whereas this offers principles with rule pairs and step-by-step procedures |
README in short
The README splits the set into principles and procedures and describes the rule of pairs of a broken line and its replacement. It lists the skills with one-line descriptions and gives the install command, call examples and the Claude Code plugin install.
README badge
Original 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 | | --- | --- | --- |