Deft
Ask AI

Search

Search skills, authors and topics

jakubkrehel / skills

interface-review

Interface review of a change rather than a screen: uncommitted work, the current branch, or a pull request. Covers interface quality, not correctness, tests, or security.

View sourceCraftVisualTestingCode quality

Install

npx skills add https://github.com/jakubkrehel/skills --skill interface-review

Removed signals

What to look for on the - side of a hunk and which skill owns the judgement.

Removed from the - sideOwnerWhat to check
aria-label, aria-labelledby, aria-describedby, aria-live, role=better-accessibilityThe control or region lost its accessible name, description or announcement
alt=, <label, for=, htmlFor, scope=better-accessibilityImage, field or table cell lost its programmatic association
<button>, <a>, <nav>, <main>, <ul> replaced by div or spanbetter-accessibilityKeyboard and assistive-technology behavior was traded for styling
:focus-visible, :focus, outline, tabindexbetter-accessibilityKeyboard users lost the focus indicator or the element left the tab order
prefers-reduced-motionbetter-accessibilityMotion now ignores the user's system preference
prefers-contrastbetter-colorsColors now ignore the user's contrast preference
Logical properties swapped for left / rightbetter-layoutDirection-aware layout was dropped
lang=, dir=better-typographyLanguage metadata or text direction was dropped
text-wrap, line-clamp, overflow-wrap, tabular-nums, font-feature-settingsbetter-typographyText rendering, wrapping or numeral alignment silently changed
A color token swapped for a literal, or a token swapped for a lighter onebetter-colorsThe rendered contrast pair may now fail; measure it
A user-facing string deleted or shortenedbetter-writingA label, error or empty state lost the information it carried

Equivalent replacements

These clear the signal. Drop a removal one of them explains before routing anything:

  • aria-label giving way to aria-labelledby pointing at visible text.
  • An explicit role dropped because the element became the native equivalent, such as role="button" going when a div becomes a <button>.
  • outline replaced by a box-shadow ring on the same :focus-visible selector.
  • tabindex="0" dropped from an element that is now natively focusable.
  • A color literal replaced by a token with the same value.
  • A physical property replaced by its logical counterpart, which is the fix rather than the regression.
  • A string moved into the translation catalogue rather than deleted.

Searching the removed side

Restrict the search to deleted lines so additions do not mask a removal. Pass the exclusion pathspecs from Excluded paths [blocked] after --:

bash
git diff -U0 "$BASE" <head-ref> -- . <exclusions> \  | grep -E '^-' | grep -vE '^--- (a/|/dev/null)' \  | grep -E 'aria-|role=|alt=|htmlFor|for=|scope=|focus|outline|tabindex|prefers-|lang=|dir=|text-wrap|line-clamp|overflow-wrap|tabular-nums|font-feature|inset-|-inline|-block'

Leave <head-ref> off for a target that includes uncommitted work, so the diff runs against the working tree. Removed strings and swapped color tokens have no pattern; read those hunks.

Read the surrounding hunk before deciding. A removed attribute is meaningless without the element it came from, and -U0 deliberately hides that context.