Skip to content
Design
Skill

/better-interface

Combines all of the `better-*` skills into a single review across accessibility, layout, writing, typography, color and UI polish.

BOOST
From plugin
interfaces
7.5k13 skills
Install
$ npx -y skills add jakubkrehel/skills --skill better-interface --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/better-interface

Context preview

The summary Claude sees to decide when to auto-load this skill.

Combines all of the `better-*` skills into a single review across accessibility, layout, writing, typography, color and UI polish.

SKILL.md

better-interface.SKILL.md
name: better-interface
description: Combines all of the `better-*` skills into a single review across accessibility, layout, writing, typography, color and UI polish.

Cross-discipline review

This skill runs a cross-discipline review. It routes the interface to each `better-*` skill, collects their evidence and consolidates one ranked verdict.

Orchestration is all it owns. Accessibility rules belong to `better-accessibility`, structure to `better-layout`, copy to `better-writing`, type to `better-typography`, color to `better-colors`, visual polish and motion to `better-ui`. Never duplicate or override their rules here.

Change-scoped review of uncommitted work, branches and pull requests belongs to `interface-review`.

Evidence, not taste

Press hard on the escalation triggers and leave deliberate project choices alone. A trigger is a failure whatever the style guide says. A density, radius or voice you merely disagree with is not a finding.

The bar for reporting is evidence. The bar for `Approve` is that you inspected what you claim to have inspected.

Core principles

1. Resolve the scope first

Infer the screen, flow, feature or repository scope from the request and current workspace. State the resolved scope in the output.

Cover all of it in every domain, including the empty, loading, error and narrow-width states where they exist.

When the scope is too large to inspect credibly, narrow it to one complete flow. Take the one the request centers on, or failing that the entry path every user must pass through. State the boundary and what it excluded. Never imply uninspected surfaces were reviewed.

2. Send a change to `interface-review`

A request naming a branch, pull request, commit range or uncommitted changes is a change review. Say so and ask the user to run `interface-review`, which is user-invoked and cannot be started from here. Never resolve a change scope yourself, because a guessed diff gives the report a scope nobody can check.

When `interface-review` hands a review back, apply everything below to it. The cap and the verdict cover `Introduced` and `Regression` findings only, so a change whose only findings are `Pre-existing` is an `Approve`.

3. Recon before judgment

Identify the framework, styling system, component library, design tokens, supported viewports and any preview or test command. Write every fix in the project's own idiom, never as a request to adopt a different stack.

Then read what the project has written about its own interface: `CONTRIBUTING.md`, `CODING_STANDARDS.md`, `AGENTS.md`, `CLAUDE.md`, a design-system doc, Storybook docs and interface ADRs. Name which you found, or that there are none.

A documented convention settles matters of taste but never excuses a trigger or a domain rule violation. What it changes is **where** you report. When a guideline or shared token is the cause, report it once against that source, with the components as its locations.

4. Use domain skills as the sources of truth

Load every owning skill below and complete each domain review before consolidation. Review in this order so foundational failures are not hidden by polish:

1. `better-accessibility` 2. `better-layout` 3. `better-writing` 4. `better-typography` 5. `better-colors` 6. `better-ui`

From each, take its principles, its references and its verification checks. Its severity ladder and its format are for standalone use; the ones in this file replace them.

If an owning skill is unavailable, mark that domain `Not reviewed`, name it and continue with the rest. Do not recreate its rules from memory, substitute a neighbour or claim holistic coverage.

When two skills appear to cover one issue, assign it to the owner of the underlying rule and note secondary effects in the **Why** cell.

5. Require evidence

Every finding cites `path/to/file:line` and shows the current implementation. When runtime behavior determines the result, source alone cannot support a visual finding and a screenshot alone cannot support a code finding.

6. Rank by user impact

Use one shared severity scale:

  • `HIGH`: blocks a task, misleads the user, hides content or controls, causes data-loss risk or creates a repeated systemic failure.
  • `MEDIUM`: meaningfully harms comprehension, efficiency, adaptability or consistency.
  • `LOW`: isolated polish with limited task impact.

Within a severity, rank by how many places the finding reaches and how much one fix buys. A token or shared-component fix outranks the same symptom in one leaf.

**Escalation triggers.** Once the owning skill confirms one of these, it is `HIGH` on sight, never averaged down because the surface is minor:

  • An interactive control with no accessible name.
  • A keyboard-reachable control with no visible focus indicator.
  • A control or path reachable by pointer but not by keyboard.
  • Motion or auto-playing content that ignores `prefers-reduced-motion`.
  • Content or a control clipped, overlapped or unreachable at 320px width or 200% zoom.
  • Body or control text whose rendered contrast pair fails its required ratio.
  • State or meaning carried by color alone.
  • A destructive action with no confirmation, undo or distinct treatment.
  • Truncated content with no way to reach the full value.
  • Content or a control reachable only past a scroll edge or behind a disclosure that has no visible cue.
  • An error that names no way to recover from it.
  • A semantic color used against its meaning, such as the danger hue on a non-destructive action.
  • A state change carried by motion alone, with no color, icon or label left behind when the animation does not run.

Triggers rank above every other finding. When more fire than the cap allows, list them first and say how many the cap excluded. A cap may shorten a report; it may never be why a blocker went unreported.

These set severity, not new rules. The owning skill decides whether the symptom is present; this list decides what it costs.

7. Prefer the

Read more
Ships withinterfaces

A collection of agent skills that help you build great interfaces.

Get the whole plugin
Stats
7,525
Stars
281
Forks
Active
Maintenance
Markdown
Language
MIT
License
2d ago
Last commit
3mo ago
Created
17h ago
Added

Repo: jakubkrehel/skills

Other skills on interfaces.