One review of a whole interface, ranked by what hurts users most

---
name: jubayer-interface
description: Runs one consolidated interface review by sending a screen, flow or feature through the six jubayer-* domain skills (accessibility, layout, writing, typography, colors, UI polish and motion) and merging their evidence into a single ranked findings table with a Block or Approve verdict. Use when the user asks for a full interface, UI or UX review, a design QA pass, a pre-launch check of a page or flow, or a review of the screens a branch or pull request touches. Also covers interfaces that ship in right-to-left and left-to-right or in two languages (Arabic and English, Bangla and English), the review runs in both directions and locales, assigns each bilingual issue to its owning domain, and escalates clear RTL and locale failures such as a missing lang attribute, focus order that no longer matches visual order, clipped text in a supported locale, or a mixed-direction value shown in the wrong order.
---

# Interface review

Use this skill when one review has to cover the whole interface instead of a single discipline. It does not judge anything on its own: it sends the scope through each `jubayer-*` domain skill in a fixed order, gathers what each one found and what each one checked, and turns that into one ranked list of findings with one verdict.

Its job is coordination only. Accessibility rules belong to `jubayer-accessibility`, structure to `jubayer-layout`, copy to `jubayer-writing`, type to `jubayer-typography`, color to `jubayer-colors`, visual polish and motion to `jubayer-ui`. Never restate, soften or override their rules here; this file only sets scope, order, severity, the cap and the verdict.

## Evidence, not taste

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

So the bar for reporting is evidence, not taste. The bar for `Approve` is that you inspected what you claim to have inspected. A short report from a real inspection beats a long one padded to look thorough.

## 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 across every domain skill listed under **Use domain skills as the sources of truth**, including the empty, loading, error and narrow-width states where they exist. When the interface ships in two directions or two languages, those are states too: see **Bilingual and right-to-left interfaces**. Report at most 15 findings.

When the scope is too large to inspect credibly, narrow it to one complete flow: 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. Review screens, not diffs

A request naming a branch, pull request, commit range, or uncommitted changes is still a screen review. Say so in the output: this skill reviews the screens and states a change touches, not the lines of the diff.

Resolve the scope from the changed files: list every screen, route, component and state those files render or affect (a shared component or token reaches every screen that uses it), and state that list as the scope. Then review each listed screen and state whole, exactly as principle 1 describes, with the same severity, cap and verdict.

Do not sort findings into new and old. A finding on a touched screen is a finding, whoever introduced it. Surfaces the change does not reach stay out of scope; name them as excluded rather than implying they were checked.

### 3. Recon before judgment

Identify the framework, styling system, component library, design tokens, supported viewports, supported locales and directions, and any preview or test command. Write every fix in the project's own idiom, so no finding arrives as a request to adopt a different stack. That governs the form of the fix, not whether the code is good enough.

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, interface ADRs. Name which you found, or that there are none.

Read them to find where a finding belongs, not for permission to drop it. A documented convention is no evidence the convention is good, and "it's in the style guide" does not retire a finding. What they change 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

Before reviewing, confirm that every owning skill below is available. Load and apply every available owner, and complete each domain review before consolidation.

Review in this order so foundational failures are not hidden by polish:

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

From a domain skill loaded here, take its principles, its references and its verification checks. Its severity ladder and its format are for standalone use; the consolidated format, shared severity and finding cap 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. Report it once.

### 5. Require evidence

Every finding cites `path/to/file:line` and shows the current implementation. Do not report a code-level finding from visual appearance alone or a visual finding from source code alone when runtime behavior determines the result.

### 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.
- A page with no `lang` on `<html>`, or a `lang` that names the wrong language (WCAG 2.2 SC 3.1.1 Language of Page).
- A right-to-left page whose keyboard focus order no longer matches its visual order, such as a layout faked with `flex-direction: row-reverse` or `order` (SC 2.4.3 Focus Order, SC 1.3.2 Meaningful Sequence).
- Text or a control clipped, overlapping, or cut off in any supported locale or direction.
- A mixed-direction value (a price, phone number, date, range, or inserted name) rendered in the wrong order, so its meaning changes.

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, the browser's own focus ring, in place of a custom rebuild. In bilingual work: the `dir` attribute and CSS logical properties in place of hand-written RTL overrides.
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.

A fix written at step 5 where step 1 was available is its own finding. Report the deletion instead.

### 8. Consolidate systemic findings

One root cause is one finding. List every confirmed location in the same row rather than one row per occurrence. A physical property (`margin-left`, `left`, `text-align: left`) repeated across components is one finding against the shared source when one exists. Never pad to reach 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.

## Bilingual and right-to-left interfaces

When the project ships in RTL and LTR (Arabic and English) or in two languages (Bangla and English), a review of one direction or one locale covers half the product.

- Run the whole review, every domain, in each supported direction and locale. Report a finding once, and name the direction or locale where it appears.
- Add these states to the coverage: `dir="rtl"`, the longest supported locale, the Arabic or Bangla font actually loaded (not a fallback), mixed-direction user content, and numerals in each numbering system the product uses.
- Route each bilingual issue to its owner: mirroring and logical properties to layout; icon flips and directional motion to ui; `lang`, `dir` and screen reader voice to accessibility; script-specific type rules to typography; plurals, gender and text length to writing; cultural color meaning and directional gradients to colors.
- Check the rendered page in both directions. Most RTL failures are physical CSS, transforms or scroll code that only show at runtime.

The full checklist, the states to inspect and the ownership table live in [bilingual-review.md](bilingual-review.md).

## Before you finish

| Mistake | Fix |
| --- | --- |
| Six disconnected domain reports | One ranked findings table |
| Visual claim inferred only from source | Inspect the rendered state, or mark it not verified |
| Silent gaps in coverage | Show which domains and states were actually inspected |
| Missing owning skill treated as covered | Mark the domain `Not reviewed` and name the skill |
| A branch or pull request reviewed line by line | List the screens and states the changed files reach, then review those whole |
| Domain marked `Clear` with no evidence inspected | Mark it `Not reviewed` and say why |
| A bilingual product reviewed in one direction only | Run every domain in each direction and locale, and list both in coverage |
| An RTL or locale issue reported under the wrong domain | Assign it using the ownership table in [bilingual-review.md](bilingual-review.md) |
| The same physical-CSS slip reported per component | One finding against the shared source, every location listed |

## Review output format

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

## Origin

Based on Jakub Krehel's `better-interface` skill (MIT License), renamed and edited by Maniruzzaman Jubayer, with added right-to-left and bilingual rules. See LICENSE.