interfaces, reconciled
Jakub Krehel's interfaces skills (better-* domain skills, interface-review, break, state-machine, variant, explain-interface, build-design, teardown) as companions — which job each owns when installed, what this graph distilled from them, and twelve value conflicts settled. Exact values and WCAG criteria are his; motion ratios, the default press, APCA for design and the installer's pov stay here.
Raw markdown On GitHubreferences/meta/interfaces-reconciliation.md
Taught in
Jakub Krehel's skills (npx skills add jakubkrehel/skills, or the interfaces Claude Code plugin) split interface craft into six domain skills — better-accessibility, better-layout, better-writing, better-typography, better-colors, better-ui — an orchestrator, better-interface, and seven verb skills. Every domain skill blocks on evidence (a WCAG criterion, a visible break, an exact value missed) and treats a deliberate project convention as a preference, which is the same bar as review-format. Most of its domain rules were already in this graph; what was new is distilled into screen-reader-announcements, keyboard-patterns, wcag-thresholds, strings-and-locale, destructive-actions, color-token-tiers, palette-step-roles, gradient-interpolation, logical-properties-rtl, growth-and-overflow, grouping-by-space, change-scoped-review, stress-scenarios and reading-others-interfaces.
Who owns what when it is installed
| Job | Companion | This graph keeps |
|---|---|---|
| Review a branch, PR or uncommitted change | /interface-review (user-invoked) | the table shape and pov; without it, change-scoped-review |
| Review a whole screen or flow across domains | better-interface | review-checklist rows still apply; ui-reviewer when not installed |
| Stress one component; walk its product states | /break, /state-machine (user-invoked) | stress-scenarios |
| Three variants of one piece behind a picker | /variant (user-invoked) | prototype-picker's decision record |
| How another site or effect was built | /explain-interface (user-invoked) | reading-others-interfaces |
| Build from a Figma file or image | build-design (needs a Figma MCP) | the contract precedence in skill-router |
| A technical illustration, exploded view or teardown drawing | teardown | diagram-decision when it is really a diagram |
User-invoked skills cannot be started by another skill: when one owns the job, tell the user the command and stop. In an orchestrated review its severity and verdict replace this graph's; the pov overrides still apply on top.
Conflicts, settled
| Topic | interfaces | This graph | Settled |
|---|---|---|---|
| Button and heading case | one policy per element type; sentence case when none | copy-voice: Title Case | Consistency is the rule; with no policy, sentence case. pov decides for this install |
| Validation timing | validate on submit, focus the first invalid field | forms-validation: hard check on blur | Both: blur for format errors on a field left, submit always re-runs, focuses and announces. Never disable submit (both agree) |
| Focus ring | prefer the browser's own; a custom one only as a verified token | accessibility-baseline: a brand ring beats default blue | A brand ring is fine when it clears 3:1 against every colour it crosses and survives forced colours (wcag-thresholds) |
| Contrast math | WCAG 2.2 ratios | APCA first (contrast-and-color-scheme) | Design with APCA; a finding cites the WCAG ratio |
| Press scale | 0.96, 150 ms ease-out, never when disabled | 0.96 in ui-polish-pass; 0.97 in responsive-feedback | 0.96, and disabled never scales |
| Stagger | 100 ms between semantic chunks (title, body, actions) | 30–80 ms per list item (stagger-choreography) | Different units: chunks of one entrance 100 ms, items in a list 30–80 ms |
| Exit | 150 ms, opacity + 4px blur + fixed −12px | 60–80 % of the enter (duration-table) | His values for the staged 300 ms entrance; the ratio for panels and overlays |
| Icon swap | cross-fade, scale 0.25 → 1, blur 4px → 0, bounce 0 | review-checklist row 5: transform one icon | Related geometry morphs or rotates (morphing-icons); unrelated glyphs (play/pause, copy/check) take his cross-fade |
| Variant host | the real page, ?__variant= link | prototype-picker: /proto/<slug> | The real page when the piece lives on one; a proto route when no page exists yet |
| Hover gate | (hover: hover) | (hover: hover) and (pointer: fine) (touch-and-focus) | Either; Tailwind 4's hover: already compiles under (hover: hover) |
| Measure | 60–75 characters | 45–75, 65ch default (line-length-tracking) | 65ch default holds; under 45 or over 75 is the finding |
| Neutrals | pure grey is a fine default; tint optional | color-monochromatic | Tinting is a style, never a finding — unless warm and cool greys mix |
Gotcha
His skills cap a review at 15 findings and forbid inventing a diff scope. Running better-interface on a request that names a PR yields an instruction to run /interface-review, not a review. That is correct behaviour, not a failure: pass the command on.
Sources
- Jakub Krehel, interfaces skills (MIT, github.com/jakubkrehel/skills, HEAD
592aedc, plugininterfaces1.17.0, read 2026-10-25):AGENTS.md(rule ownership, invocation), everyskills/*/SKILL.md, and the reference files cited in each distilled node. Values are his; the glosses and settlements are this graph's. - Related: skill-router, routing-table, cinetic-reconciliation (the same pattern for a film companion).
metacompanioninterfacesreconciliationaccessibilityreview