Skip to content
ExamsLibraryFor agentsConnect your agent
metaMeta: working with agents·12/26

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 GitHub

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

JobCompanionThis 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 domainsbetter-interfacereview-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 imagebuild-design (needs a Figma MCP)the contract precedence in skill-router
A technical illustration, exploded view or teardown drawingteardowndiagram-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

TopicinterfacesThis graphSettled
Button and heading caseone policy per element type; sentence case when nonecopy-voice: Title CaseConsistency is the rule; with no policy, sentence case. pov decides for this install
Validation timingvalidate on submit, focus the first invalid fieldforms-validation: hard check on blurBoth: blur for format errors on a field left, submit always re-runs, focuses and announces. Never disable submit (both agree)
Focus ringprefer the browser's own; a custom one only as a verified tokenaccessibility-baseline: a brand ring beats default blueA brand ring is fine when it clears 3:1 against every colour it crosses and survives forced colours (wcag-thresholds)
Contrast mathWCAG 2.2 ratiosAPCA first (contrast-and-color-scheme)Design with APCA; a finding cites the WCAG ratio
Press scale0.96, 150 ms ease-out, never when disabled0.96 in ui-polish-pass; 0.97 in responsive-feedback0.96, and disabled never scales
Stagger100 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
Exit150 ms, opacity + 4px blur + fixed −12px60–80 % of the enter (duration-table)His values for the staged 300 ms entrance; the ratio for panels and overlays
Icon swapcross-fade, scale 0.25 → 1, blur 4px → 0, bounce 0review-checklist row 5: transform one iconRelated geometry morphs or rotates (morphing-icons); unrelated glyphs (play/pause, copy/check) take his cross-fade
Variant hostthe real page, ?__variant= linkprototype-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)
Measure60–75 characters45–75, 65ch default (line-length-tracking)65ch default holds; under 45 or over 75 is the finding
Neutralspure grey is a fine default; tint optionalcolor-monochromaticTinting 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, plugin interfaces 1.17.0, read 2026-10-25): AGENTS.md (rule ownership, invocation), every skills/*/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