Skip to content
cccskills
FreePublished on GitHub

better-interface

Review an interface across accessibility, layout, writing, typography, color, and visual polish. It coordinates specialist skills, combines evidence from code and rendered screens, and produces one report with findings ranked by their impact on users.

OriginalShow the original description

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

See how to install

Good for

  • Reviewing a screen or complete user flow
  • Checking loading, error, and narrow-screen states
  • Prioritizing interface fixes by user impact
  • Finding shared causes behind repeated interface issues

Files included (3)

  • SKILL.md8.7 KB
  • agents/openai.yaml103 B
  • review-format.md2.1 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

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 cheaper fix

Severity says how bad a finding is; this says which fix to propose. When more than one would work, take the earliest that does:

  1. Delete. A separator that space would carry, an animation on a high-frequency interaction, an ARIA attribute a native element makes redundant, a ramp nothing imports.
  2. Use the platform. The native element, the native control or the browser's own focus ring, in place of a custom rebuild.
  3. Reuse what the project has. An existing token, spacing step or motion curve, before any new value.
  4. Correct the value. The wrong easing, radius, gap or contrast pair, using the exact value the owning skill gives.
  5. Add. A new token, a wrapper, a media query, an ARIA attribute the platform cannot supply.

When the code under review adds what Delete would fix, that is a finding, and its After is the deletion.

8. Consolidate systemic findings

One root cause is one finding, with every confirmed location in the same row. Report at most 15 findings. Never pad toward the cap; a short review or no findings is a valid result.

9. Verify what can be verified

Run the safe, relevant checks the project offers. Inspect the rendered interface when runtime behavior or visual judgment matters, and report the exact command or interaction and its result. A check you cannot run is Not verified, never a finding.

10. Review without mutating by default

Treat a review request as read-only. Do not edit source unless the user also asks you to implement the findings. When they do, keep the consolidated report as the change scope and re-run the relevant verification afterward.

Before you finish

MistakeFix
A separate findings section per domainMerge them into one table ranked by severity, then reach
A rendering claim whose only evidence is sourceInspect the rendered state, or mark it Not verified
A missing accessible name or focus ring rated MEDIUM because the surface is minorTriggers are HIGH on sight
A coverage row whose evidence cell names no file, component or checkInspect that domain, or mark it Not reviewed with the reason
A domain marked Clear although its skill never loadedMark it Not reviewed and name the skill
The same symptom in several rows, one per componentOne row against the shared token or component, listing every location
An After that adds a wrapper, token or ARIA attributeCheck whether a deletion or the native element fixes it first
A fix written in a library or styling system the project does not useRewrite it in the project's own idiom

Review output format

The format lives in review-format.md: scope and coverage, the findings table, verification and the verdict. A review is not finished until its findings are reported there.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Review and fix interface accessibility against WCAG 2.2, a web accessibility standard. Check keyboard navigation, focus, screen reader labels, forms, motion, and zoom, then report failures with their criteria and implement fixes using the project's existing styling system.

  • Check flows using only the keyboard
  • Fix control names and screen reader announcements
  • Improve form labels and error feedback
jakubkrehel/skills8KUpdated Oct 13, 2026

better-colors

FreeSummary

Build and review interface color systems with palettes, format conversions, and semantic tokens that name colors by purpose. Measure foreground and background contrast, and identify inconsistent themes, misused color roles, and colors outside the supported range.

  • Build palettes around interface roles
  • Organize color tokens by purpose
  • Measure text and background contrast
jakubkrehel/skills8KUpdated Oct 13, 2026

better-layout

FreeSummary

Review and improve interface grouping, alignment, spacing, and responsive structure. Check whether content and actions remain accessible when screens resize, text grows in translation, zoom increases, or the layout switches to right-to-left reading.

  • Checking clipping and overlap on narrow screens or at higher zoom
  • Preparing layouts for longer translated text
  • Reviewing right-to-left layouts
jakubkrehel/skills8KUpdated Oct 13, 2026

Set and review how interface text renders, including font loading, size hierarchy, line spacing, wrapping, truncation, and punctuation. Apply fixes within the existing styling system and check how realistic content behaves across different widths.

  • Organize heading and body text sizes
  • Fix wrapping and truncated text
  • Keep changing numbers aligned
jakubkrehel/skills8KUpdated Oct 13, 2026

better-ui

FreeSummary

Refine interface surfaces, icons, and motion with specific values for corners, shadows, alignment, and transitions. Preserve the project's existing design conventions while identifying visual inconsistencies, touch interaction problems, and missing alternatives for reduced motion.

  • Refining corners and shadows on nested cards
  • Unifying icon appearance across interaction states
  • Adjusting button feedback and entrance animations
jakubkrehel/skills8KUpdated Oct 13, 2026

better-writing

FreeSummary

Write and review interface text, including button labels, errors, empty states, and confirmations. Match the product's established vocabulary and tone, explain actions clearly, and give people a useful next step when something goes wrong.

  • Unifying terminology across labels and notifications
  • Rewriting errors to explain how to recover
  • Writing empty states with a clear next action
jakubkrehel/skills8KUpdated Oct 13, 2026

See all skills by jakubkrehel

Report a problem with this skill