feat: refresh shared skills catalog

skills/interface-kit/references/accessibility-checklist.md

@@ -1,6 +1,7 @@
-# WCAG 2.1 AA Accessibility Audit Guide
+# Accessibility audit reference
 
-Comprehensive checklist for building accessible web interfaces. Every requirement maps to WCAG 2.1 Level AA success criteria.
+Select relevant checks for the changed flow. This reference mixes WCAG requirements
+with stricter design recommendations; those recommendations are not AA gates.
 
 ---
 
@@ -141,8 +142,11 @@ The first rule of ARIA: do not use ARIA if a native HTML element provides the be
 }
 ```
 
-- Focus indicators must meet 3:1 contrast ratio against adjacent colors (WCAG 2.4.11)
-- Minimum focus indicator area: at least 2px perimeter around the component
+- Keep focus visible and not entirely obscured by authored content
+  ([WCAG 2.2 AA 2.4.11](https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html)).
+- A 2px-perimeter area and 3:1 focused/unfocused contrast are stronger
+  [AAA focus-appearance criteria](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html),
+  not the definition of AA 2.4.11. Apply non-text contrast where required.
 
 ### Modal Focus Trapping
 
@@ -300,18 +304,14 @@ panel: id="panel-id", role="region", aria-labelledby="trigger-id"
 
 ## 7. prefers-reduced-motion
 
-### Global Reset
+### Targeted motion reduction
 
 ```css
 @media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
-  }
+  html { scroll-behavior: auto; }
+  /* Apply to components with nonessential movement; keep state feedback. */
+  .decorative-motion { animation: none; }
+  .moving-control { transition-property: color, background-color, opacity; }
 }
 ```
 
@@ -402,7 +402,7 @@ npx playwright test --project=accessibility
 | `aria-hidden="true"` on focusable elements | Remove from tab order or remove `aria-hidden` |
 | Missing `lang` attribute on `<html>` | Set `<html lang="en">` (or appropriate language code) |
 | Autoplaying video/audio with sound | Require user interaction to start, or mute by default with controls |
-| Tiny tap targets on mobile | Minimum 44x44 CSS pixels for touch targets |
+| Tiny tap targets on mobile | Aim for 44px touch targets; AA 2.5.8 minimum is 24px with exceptions |
 | Using `title` attribute as primary label | `title` is unreliable; use `aria-label` or visible `<label>` |
 | Links that say "click here" or "read more" | Descriptive link text: "Read the accessibility guide" |
 | Missing form error summary | On submit failure, show summary of all errors at top of form |