Skills

Use better-interface to check interface-related skills in one pass

For people who want to improve an interface from UI, fonts, color, accessibility, layout, and product copy, provided they first install the official npx skills add; the first time, verify better-interface, and do not run break, which writes a temporary page.

Official source · jakubkrehel/skills

Install

npx skills add jakubkrehel/skills

Who it's for

When you want an agent to start from interface, fonts, color, accessibility, layout, and product copy to help you make a better interface, use this skill set. The excerpt writes it as a set of agent skills covering these topics. Official repository:

https://github.com/jakubkrehel/skills

Among them, better-interface merges all better-* skills into one review. Docs:

https://github.com/jakubkrehel/skills/blob/main/skills/better-interface/SKILL.md

If you are not ready to run the official install on this machine, do not continue. The excerpt does not write every item in the set as a copyable command; do not invent skill names that were not named. Slash-form marketplace and install appear, but no client is named; do not attach a product name to them, and do not treat them as the first main path.

First try in 3 minutes

First open the official repository and check:

https://github.com/jakubkrehel/skills

The recommended install is only this one. Installing skills writes files on this machine; before you run it, confirm you want to keep this interface skill set:

npx skills add jakubkrehel/skills

The success signal is that this command finishes normally. The excerpt does not write the on-disk skill directory; do not invent a path. The excerpt also wrote /plugin marketplace add jakubkrehel/skills and /plugin install interfaces@interfaces; do not use them side by side the first time, and do not write them as exclusive to a particular client.

The first time in the agent, only verify; do not have it write a temporary page yet. Ask the agent to explain: this skill set covers interface, fonts, color, accessibility, layout, and product copy, and better-interface merges better-* into one review. Watch that it can restate the coverage, and that it has not created a page or started a stress test.

break is user-invoked: it renders the component you chose, in every state and scene, onto a temporary page and stress-tests it. Docs:

https://github.com/jakubkrehel/skills/blob/main/skills/break/SKILL.md

This writes a temporary page; that is a side effect. Do not run break the first time. Only consider it when you name a disposable component and confirm a temporary page may be generated. The excerpt gives no sample component path; do not invent one.

Use cases

Case 1: Install along the official npx path first, then verify coverage. After you accept writing skill files, run npx skills add jakubkrehel/skills. Fits people who only want to attach interface skills to an agent and are not ready to change pages. Success signal: install finished, and the agent can name interface, fonts, color, accessibility, layout, and product copy, plus better-interface's merged review. If install fails, stop; do not switch to slash plugin commands.

Case 2: Understand break first, then decide whether to invoke it. After install, have the agent restate break: user-invoked; it renders the chosen component in every state and scene onto a temporary page and stress-tests it. Fits people who worry the agent will write pages immediately. Success signal: it admits this is user-invoked, will generate a temporary page, and this time it did not actually render. Before a real invoke, confirm the target component is disposable and accept a temporary page being written. The excerpt does not say how to close a temporary page; do not invent a cleanup command. Do not invent other workflow names that do not appear in the excerpt.

Boundaries

The main path is only npx skills add jakubkrehel/skills. Slash marketplace and install are not the main path for the first try, and they are not written as exclusive to a particular client. Coverage is interface, fonts, color, accessibility, layout, and product copy. better-interface merges better-* into one review. break writes a temporary page and stress-tests; it must be user-invoked.

The excerpt does not write a skill directory, uninstall steps, or a full set of better-* names. Skill names, client names, and cleanup commands that were not written must not be filled in. First-time success only looks at install finishing and the agent restating coverage; before a real break you must confirm the temporary page is disposable. This is a skill set that helps you build a better interface, not another installer marketplace. If the agent runs break on its own, stop first and switch to a read-only restatement. The excerpt only names the better-interface and break docs; do not invent filenames for other better-*. The first time, also do not treat the slash install's interfaces@interfaces as a second main path. People who only want to change copy or only tune color, and do not need the whole interface skill set, can read the repository first and need not install at once. The excerpt writes the goal as helping you build a better interface; the first time still follows a read-only restatement. The better-interface docs page and the break docs page both live in the official repository; the addresses must stay as they are; do not rewrite them to other paths. If the agent starts changing several components on a production page, stop first, go back to a single disposable component, or keep explaining only. The evidence does not write uninstall or update commands; do not invent a second installer.