@event4u/agent-config 5.10.1 → 6.1.0

package/dist/agent-src/skills/design-intelligence/evals/triggers.json

@@ -0,0 +1,16 @@
+{
+  "skill": "design-intelligence",
+  "description": "5 should-trigger + 5 should-not-trigger queries. Should-trigger covers the ui-design-brief rebound + selection questions; should-not-trigger covers audit, implementation, a11y-method, and token-authoring neighbors.",
+  "queries": [
+    {"q": "which design style fits a luxury e-commerce shop?", "trigger": true},
+    {"q": "produce the ui-design-brief for this fintech dashboard", "trigger": true},
+    {"q": "welche Farbpalette passt zu einer Health-App?", "trigger": true},
+    {"q": "what font pairing should the landing page use?", "trigger": true},
+    {"q": "what chart type for a trend over time, colorblind-safe?", "trigger": true},
+    {"q": "what UI components do we already have for forms?", "trigger": false, "note": "existing-ui-audit — what exists, not what to build"},
+    {"q": "implement the card component in shadcn", "trigger": false, "note": "react-shadcn-ui apply-step executor"},
+    {"q": "audit this screen for WCAG 2.2 AA", "trigger": false, "note": "accessibility-auditor owns the method"},
+    {"q": "generate CSS variables from tokens.json", "trigger": false, "note": "design-tokens toolchain"},
+    {"q": "make this page prettier", "trigger": false, "note": "vague-request trigger — ask first per ask-when-uncertain"}
+  ]
+}

package/dist/agent-src/skills/design-intelligence/references/design-languages.md

@@ -0,0 +1,45 @@
+# Design languages — rich prose specs (on-demand reference)
+
+> Sixteen complete design-language specifications (philosophy → token
+> system → component styling), adopted from
+> `nextlevelbuilder/ui-ux-pro-max-skill` `design.csv`
+> @ `b7e3af80f6e331f6fb456667b82b12cade7c9d35` (MIT, last checked
+> 2026-06-07). Chinese titles/intros translated to English; the full
+> English spec bodies live verbatim in
+> [`../data/design-languages/`](../data/design-languages/) — one `.txt`
+> per style, ready to paste into a design brief or generation prompt.
+>
+> This is **reference** material (mid-action lookup), not the grounding
+> corpus — style *selection* runs through the engine
+> (`corpus-grounding` + `styles.csv`); open a spec here only after a
+> style is chosen.
+
+| Style | Essence (translated) | Spec file |
+|---|---|---|
+| **Bauhaus** | Bold geometric modernism — circles, squares, triangles; primary palette (red/blue/yellow), crisp edges, hard shadows; functional yet artistic with constructivist asymmetry. | [`bauhaus.txt`](../data/design-languages/bauhaus.txt) |
+| **Monochrome** | Editorial system built on pure black & white — no accent color, only dramatic contrast, oversized serifs, precise geometric layout; high-fashion / architecture-portfolio feel. | [`monochrome.txt`](../data/design-languages/monochrome.txt) |
+| **Modern Dark** | Cinematic, high-precision dark mode — animated gradient blobs, cursor-tracking spotlight, layered ambient lighting and crafted micro-interactions; feels like premium software. | [`modern-dark.txt`](../data/design-languages/modern-dark.txt) |
+| **SaaS** | Bold minimalist modern visual system — signature electric-blue gradients, sophisticated dual-font pairing, dynamic execution. | [`saas.txt`](../data/design-languages/saas.txt) |
+| **Terminal** | Raw, functional retro-futurist command-line aesthetic — high contrast, monospace precision, blinking cursor. | [`terminal.txt`](../data/design-languages/terminal.txt) |
+| **Kinetic** | Motion-first design with typography as the primary visual medium — infinite marquees, viewport-scaled text, scroll-triggered animation, aggressive uppercase; rhythmic brutalist energy. | [`kinetic.txt`](../data/design-languages/kinetic.txt) |
+| **Flat Design** | Depth cues removed (no shadows/bevels/gradients) in favor of solid color, typography and layout — clean, two-dimensional, geometric, bold color blocking. | [`flat-design.txt`](../data/design-languages/flat-design.txt) |
+| **Material Design** | Playful dynamic color extraction, pill buttons, distinct elevation states — Google Material 3 with enhanced depth and micro-interactions. | [`material-design.txt`](../data/design-languages/material-design.txt) |
+| **Neo Brutalism** | Raw high-contrast aesthetic echoing print design and DIY punk — cream backgrounds, thick 4px black borders, zero-blur hard offset shadows. | [`neo-brutalism.txt`](../data/design-languages/neo-brutalism.txt) |
+| **Bold Typography** | Type-led design with huge headlines as the main visual element — extreme contrast and dramatic negative space create poster-like compositions where text becomes the art. | [`bold-typography.txt`](../data/design-languages/bold-typography.txt) |
+| **Academia** | Collegiate aesthetic — old libraries, warm paper textures, traditional serifs, gold/crimson tones. | [`academia.txt`](../data/design-languages/academia.txt) |
+| **Cyberpunk** | High-contrast neon on black, glitch animation, terminal/monospace type, tech ornamentation — dystopian digital aesthetic from 80s sci-fi and hacker culture. | [`cyberpunk.txt`](../data/design-languages/cyberpunk.txt) |
+| **Claymorphism** | Surreal 3D aesthetic of soft inflated clay objects — multi-layer shadow stacking, vibrant candy-shop colors, tactile micro-interactions, organic floating elements. | [`claymorphism.txt`](../data/design-languages/claymorphism.txt) |
+| **Enterprise** | Modern SaaS aesthetic balancing professionalism and approachability — vivid indigo/violet gradients, soft shadows, isometric depth, clean geometric sans-serifs. | [`enterprise.txt`](../data/design-languages/enterprise.txt) |
+| **Sketch** | Organic wobbly borders, handwritten typography, paper texture, playful imperfection — every element looks marker-and-pencil drawn on textured paper. | [`sketch.txt`](../data/design-languages/sketch.txt) |
+| **Neumorphism** | Extruded and inset elements via dual shadows on a monochromatic background — soft, tactile, physically grounded; mind the accessibility limits. | [`neumorphism.txt`](../data/design-languages/neumorphism.txt) |
+
+## How to use
+
+1. Select the style through the grounding engine first:
+   `python3 <skills-root>/corpus-grounding/scripts/ground.py search
+   --manifest <skills-root>/design-intelligence/data/manifest.json
+   --domain style "<product + mood>"`.
+2. Open the matching spec file and lift its token system (colors,
+   typography, radius/border, shadows) into the design brief.
+3. Use-case lists inside each spec stay source-language where upstream
+   mixed languages; the spec bodies (the load-bearing part) are English.

package/dist/agent-src/skills/design-intelligence/references/design-rules-checklist.md

@@ -0,0 +1,268 @@
+# Design-rules checklist — 10 priority categories, ~205 rules
+
+> Always-consultable checklist taxonomy adopted from
+> `nextlevelbuilder/ui-ux-pro-max-skill` `quick-reference.md`
+> @ `b7e3af80f6e331f6fb456667b82b12cade7c9d35` (MIT, last checked
+> 2026-06-07). Chinese framing translated; rule bullets verbatim.
+>
+> Work the categories in priority order 1 → 10; pull detail rules per
+> category as needed. The `Domain` column names the search domain for
+> `corpus-grounding` queries against this skill's manifest
+> (`--domain ux`, `--domain color`, …). Scripts do not read this table —
+> it is agent/human reference.
+>
+> **Dedup note:** WCAG 2.2 AA *auditing method* stays with
+> [`accessibility-auditor`](../../accessibility-auditor/SKILL.md); layout /
+> form / responsive *heuristics* stay with [`fe-design`](../../fe-design/SKILL.md).
+> This checklist is the compact pre-delivery sweep that cross-references
+> both — when entries conflict, the dedicated skill wins.
+
+| Priority | Category | Impact | Domain | Key Checks (Must Have) | Anti-Patterns (Avoid) |
+|----------|----------|--------|--------|------------------------|------------------------|
+| 1 | Accessibility | CRITICAL | `ux` | Contrast 4.5:1, Alt text, Keyboard nav, Aria-labels | Removing focus rings, Icon-only buttons without labels |
+| 2 | Touch & Interaction | CRITICAL | `ux` | Min size 44×44px, 8px+ spacing, Loading feedback | Reliance on hover only, Instant state changes (0ms) |
+| 3 | Performance | HIGH | `ux` | WebP/AVIF, Lazy loading, Reserve space (CLS < 0.1) | Layout thrashing, Cumulative Layout Shift |
+| 4 | Style Selection | HIGH | `style`, `product` | Match product type, Consistency, SVG icons (no emoji) | Mixing flat & skeuomorphic randomly, Emoji as icons |
+| 5 | Layout & Responsive | HIGH | `ux` | Mobile-first breakpoints, Viewport meta, No horizontal scroll | Horizontal scroll, Fixed px container widths, Disable zoom |
+| 6 | Typography & Color | MEDIUM | `typography`, `color` | Base 16px, Line-height 1.5, Semantic color tokens | Text < 12px body, Gray-on-gray, Raw hex in components |
+| 7 | Animation | MEDIUM | `ux` | Duration 150–300ms, Motion conveys meaning, Spatial continuity | Decorative-only animation, Animating width/height, No reduced-motion |
+| 8 | Forms & Feedback | MEDIUM | `ux` | Visible labels, Error near field, Helper text, Progressive disclosure | Placeholder-only label, Errors only at top, Overwhelm upfront |
+| 9 | Navigation Patterns | HIGH | `ux` | Predictable back, Bottom nav ≤5, Deep linking | Overloaded nav, Broken back behavior, No deep links |
+| 10 | Charts & Data | LOW | `chart` | Legends, Tooltips, Accessible colors | Relying on color alone to convey meaning |
+
+## Quick Reference
+
+### 1. Accessibility (CRITICAL)
+
+- `color-contrast` - Minimum 4.5:1 ratio for normal text (large text 3:1); Material Design
+- `focus-states` - Visible focus rings on interactive elements (2–4px; Apple HIG, MD)
+- `alt-text` - Descriptive alt text for meaningful images
+- `aria-labels` - aria-label for icon-only buttons; accessibilityLabel in native (Apple HIG)
+- `keyboard-nav` - Tab order matches visual order; full keyboard support (Apple HIG)
+- `form-labels` - Use label with for attribute
+- `skip-links` - Skip to main content for keyboard users
+- `heading-hierarchy` - Sequential h1→h6, no level skip
+- `color-not-only` - Don't convey info by color alone (add icon/text)
+- `dynamic-type` - Support system text scaling; avoid truncation as text grows (Apple Dynamic Type, MD)
+- `reduced-motion` - Respect prefers-reduced-motion; reduce/disable animations when requested (Apple Reduced Motion API, MD)
+- `voiceover-sr` - Meaningful accessibilityLabel/accessibilityHint; logical reading order for VoiceOver/screen readers (Apple HIG, MD)
+- `escape-routes` - Provide cancel/back in modals and multi-step flows (Apple HIG)
+- `keyboard-shortcuts` - Preserve system and a11y shortcuts; offer keyboard alternatives for drag-and-drop (Apple HIG)
+
+### 2. Touch & Interaction (CRITICAL)
+
+- `touch-target-size` - Min 44×44pt (Apple) / 48×48dp (Material); extend hit area beyond visual bounds if needed
+- `touch-spacing` - Minimum 8px/8dp gap between touch targets (Apple HIG, MD)
+- `hover-vs-tap` - Use click/tap for primary interactions; don't rely on hover alone
+- `loading-buttons` - Disable button during async operations; show spinner or progress
+- `error-feedback` - Clear error messages near problem
+- `cursor-pointer` - Add cursor-pointer to clickable elements (Web)
+- `gesture-conflicts` - Avoid horizontal swipe on main content; prefer vertical scroll
+- `tap-delay` - Use touch-action: manipulation to reduce 300ms delay (Web)
+- `standard-gestures` - Use platform standard gestures consistently; don't redefine (e.g. swipe-back, pinch-zoom) (Apple HIG)
+- `system-gestures` - Don't block system gestures (Control Center, back swipe, etc.) (Apple HIG)
+- `press-feedback` - Visual feedback on press (ripple/highlight; MD state layers)
+- `haptic-feedback` - Use haptic for confirmations and important actions; avoid overuse (Apple HIG)
+- `gesture-alternative` - Don't rely on gesture-only interactions; always provide visible controls for critical actions
+- `safe-area-awareness` - Keep primary touch targets away from notch, Dynamic Island, gesture bar and screen edges
+- `no-precision-required` - Avoid requiring pixel-perfect taps on small icons or thin edges
+- `swipe-clarity` - Swipe actions must show clear affordance or hint (chevron, label, tutorial)
+- `drag-threshold` - Use a movement threshold before starting drag to avoid accidental drags
+
+### 3. Performance (HIGH)
+
+- `image-optimization` - Use WebP/AVIF, responsive images (srcset/sizes), lazy load non-critical assets
+- `image-dimension` - Declare width/height or use aspect-ratio to prevent layout shift (Core Web Vitals: CLS)
+- `font-loading` - Use font-display: swap/optional to avoid invisible text (FOIT); reserve space to reduce layout shift (MD)
+- `font-preload` - Preload only critical fonts; avoid overusing preload on every variant
+- `critical-css` - Prioritize above-the-fold CSS (inline critical CSS or early-loaded stylesheet)
+- `lazy-loading` - Lazy load non-hero components via dynamic import / route-level splitting
+- `bundle-splitting` - Split code by route/feature (React Suspense / Next.js dynamic) to reduce initial load and TTI
+- `third-party-scripts` - Load third-party scripts async/defer; audit and remove unnecessary ones (MD)
+- `reduce-reflows` - Avoid frequent layout reads/writes; batch DOM reads then writes
+- `content-jumping` - Reserve space for async content to avoid layout jumps (Core Web Vitals: CLS)
+- `lazy-load-below-fold` - Use loading="lazy" for below-the-fold images and heavy media
+- `virtualize-lists` - Virtualize lists with 50+ items to improve memory efficiency and scroll performance
+- `main-thread-budget` - Keep per-frame work under ~16ms for 60fps; move heavy tasks off main thread (HIG, MD)
+- `progressive-loading` - Use skeleton screens / shimmer instead of long blocking spinners for >1s operations (Apple HIG)
+- `input-latency` - Keep input latency under ~100ms for taps/scrolls (Material responsiveness standard)
+- `tap-feedback-speed` - Provide visual feedback within 100ms of tap (Apple HIG)
+- `debounce-throttle` - Use debounce/throttle for high-frequency events (scroll, resize, input)
+- `offline-support` - Provide offline state messaging and basic fallback (PWA / mobile)
+- `network-fallback` - Offer degraded modes for slow networks (lower-res images, fewer animations)
+
+### 4. Style Selection (HIGH)
+
+- `style-match` - Match style to product type (use `--design-system` for recommendations)
+- `consistency` - Use same style across all pages
+- `no-emoji-icons` - Use SVG icons (Heroicons, Lucide), not emojis
+- `color-palette-from-product` - Choose palette from product/industry (search `--domain color`)
+- `effects-match-style` - Shadows, blur, radius aligned with chosen style (glass / flat / clay etc.)
+- `platform-adaptive` - Respect platform idioms (iOS HIG vs Material): navigation, controls, typography, motion
+- `state-clarity` - Make hover/pressed/disabled states visually distinct while staying on-style (Material state layers)
+- `elevation-consistent` - Use a consistent elevation/shadow scale for cards, sheets, modals; avoid random shadow values
+- `dark-mode-pairing` - Design light/dark variants together to keep brand, contrast, and style consistent
+- `icon-style-consistent` - Use one icon set/visual language (stroke width, corner radius) across the product
+- `system-controls` - Prefer native/system controls over fully custom ones; only customize when branding requires it (Apple HIG)
+- `blur-purpose` - Use blur to indicate background dismissal (modals, sheets), not as decoration (Apple HIG)
+- `primary-action` - Each screen should have only one primary CTA; secondary actions visually subordinate (Apple HIG)
+
+### 5. Layout & Responsive (HIGH)
+
+- `viewport-meta` - width=device-width initial-scale=1 (never disable zoom)
+- `mobile-first` - Design mobile-first, then scale up to tablet and desktop
+- `breakpoint-consistency` - Use systematic breakpoints (e.g. 375 / 768 / 1024 / 1440)
+- `readable-font-size` - Minimum 16px body text on mobile (avoids iOS auto-zoom)
+- `line-length-control` - Mobile 35–60 chars per line; desktop 60–75 chars
+- `horizontal-scroll` - No horizontal scroll on mobile; ensure content fits viewport width
+- `spacing-scale` - Use 4pt/8dp incremental spacing system (Material Design)
+- `touch-density` - Keep component spacing comfortable for touch: not cramped, not causing mis-taps
+- `container-width` - Consistent max-width on desktop (max-w-6xl / 7xl)
+- `z-index-management` - Define layered z-index scale (e.g. 0 / 10 / 20 / 40 / 100 / 1000)
+- `fixed-element-offset` - Fixed navbar/bottom bar must reserve safe padding for underlying content
+- `scroll-behavior` - Avoid nested scroll regions that interfere with the main scroll experience
+- `viewport-units` - Prefer min-h-dvh over 100vh on mobile
+- `orientation-support` - Keep layout readable and operable in landscape mode
+- `content-priority` - Show core content first on mobile; fold or hide secondary content
+- `visual-hierarchy` - Establish hierarchy via size, spacing, contrast — not color alone
+
+### 6. Typography & Color (MEDIUM)
+
+- `line-height` - Use 1.5-1.75 for body text
+- `line-length` - Limit to 65-75 characters per line
+- `font-pairing` - Match heading/body font personalities
+- `font-scale` - Consistent type scale (e.g. 12 14 16 18 24 32)
+- `contrast-readability` - Darker text on light backgrounds (e.g. slate-900 on white)
+- `text-styles-system` - Use platform type system: iOS 11 Dynamic Type styles / Material 5 type roles (display, headline, title, body, label) (HIG, MD)
+- `weight-hierarchy` - Use font-weight to reinforce hierarchy: Bold headings (600–700), Regular body (400), Medium labels (500) (MD)
+- `color-semantic` - Define semantic color tokens (primary, secondary, error, surface, on-surface) not raw hex in components (Material color system)
+- `color-dark-mode` - Dark mode uses desaturated / lighter tonal variants, not inverted colors; test contrast separately (HIG, MD)
+- `color-accessible-pairs` - Foreground/background pairs must meet 4.5:1 (AA) or 7:1 (AAA); use tools to verify (WCAG, MD)
+- `color-not-decorative-only` - Functional color (error red, success green) must include icon/text; avoid color-only meaning (HIG, MD)
+- `truncation-strategy` - Prefer wrapping over truncation; when truncating use ellipsis and provide full text via tooltip/expand (Apple HIG)
+- `letter-spacing` - Respect default letter-spacing per platform; avoid tight tracking on body text (HIG, MD)
+- `number-tabular` - Use tabular/monospaced figures for data columns, prices, and timers to prevent layout shift
+- `whitespace-balance` - Use whitespace intentionally to group related items and separate sections; avoid visual clutter (Apple HIG)
+
+### 7. Animation (MEDIUM)
+
+- `duration-timing` - Use 150–300ms for micro-interactions; complex transitions ≤400ms; avoid >500ms (MD)
+- `transform-performance` - Use transform/opacity only; avoid animating width/height/top/left
+- `loading-states` - Show skeleton or progress indicator when loading exceeds 300ms
+- `excessive-motion` - Animate 1-2 key elements per view max
+- `easing` - Use ease-out for entering, ease-in for exiting; avoid linear for UI transitions
+- `motion-meaning` - Every animation must express a cause-effect relationship, not just be decorative (Apple HIG)
+- `state-transition` - State changes (hover / active / expanded / collapsed / modal) should animate smoothly, not snap
+- `continuity` - Page/screen transitions should maintain spatial continuity (shared element, directional slide) (Apple HIG)
+- `parallax-subtle` - Use parallax sparingly; must respect reduced-motion and not cause disorientation (Apple HIG)
+- `spring-physics` - Prefer spring/physics-based curves over linear or cubic-bezier for natural feel (Apple HIG fluid animations)
+- `exit-faster-than-enter` - Exit animations shorter than enter (~60–70% of enter duration) to feel responsive (MD motion)
+- `stagger-sequence` - Stagger list/grid item entrance by 30–50ms per item; avoid all-at-once or too-slow reveals (MD)
+- `shared-element-transition` - Use shared element / hero transitions for visual continuity between screens (MD, HIG)
+- `interruptible` - Animations must be interruptible; user tap/gesture cancels in-progress animation immediately (Apple HIG)
+- `no-blocking-animation` - Never block user input during an animation; UI must stay interactive (Apple HIG)
+- `fade-crossfade` - Use crossfade for content replacement within the same container (MD)
+- `scale-feedback` - Subtle scale (0.95–1.05) on press for tappable cards/buttons; restore on release (HIG, MD)
+- `gesture-feedback` - Drag, swipe, and pinch must provide real-time visual response tracking the finger (MD Motion)
+- `hierarchy-motion` - Use translate/scale direction to express hierarchy: enter from below = deeper, exit upward = back (MD)
+- `motion-consistency` - Unify duration/easing tokens globally; all animations share the same rhythm and feel
+- `opacity-threshold` - Fading elements should not linger below opacity 0.2; either fade fully or remain visible
+- `modal-motion` - Modals/sheets should animate from their trigger source (scale+fade or slide-in) for spatial context (HIG, MD)
+- `navigation-direction` - Forward navigation animates left/up; backward animates right/down — keep direction logically consistent (HIG)
+- `layout-shift-avoid` - Animations must not cause layout reflow or CLS; use transform for position changes
+
+### 8. Forms & Feedback (MEDIUM)
+
+- `input-labels` - Visible label per input (not placeholder-only)
+- `error-placement` - Show error below the related field
+- `submit-feedback` - Loading then success/error state on submit
+- `required-indicators` - Mark required fields (e.g. asterisk)
+- `empty-states` - Helpful message and action when no content
+- `toast-dismiss` - Auto-dismiss toasts in 3-5s
+- `confirmation-dialogs` - Confirm before destructive actions
+- `input-helper-text` - Provide persistent helper text below complex inputs, not just placeholder (Material Design)
+- `disabled-states` - Disabled elements use reduced opacity (0.38–0.5) + cursor change + semantic attribute (MD)
+- `progressive-disclosure` - Reveal complex options progressively; don't overwhelm users upfront (Apple HIG)
+- `inline-validation` - Validate on blur (not keystroke); show error only after user finishes input (MD)
+- `input-type-keyboard` - Use semantic input types (email, tel, number) to trigger the correct mobile keyboard (HIG, MD)
+- `password-toggle` - Provide show/hide toggle for password fields (MD)
+- `autofill-support` - Use autocomplete / textContentType attributes so the system can autofill (HIG, MD)
+- `undo-support` - Allow undo for destructive or bulk actions (e.g. "Undo delete" toast) (Apple HIG)
+- `success-feedback` - Confirm completed actions with brief visual feedback (checkmark, toast, color flash) (MD)
+- `error-recovery` - Error messages must include a clear recovery path (retry, edit, help link) (HIG, MD)
+- `multi-step-progress` - Multi-step flows show step indicator or progress bar; allow back navigation (MD)
+- `form-autosave` - Long forms should auto-save drafts to prevent data loss on accidental dismissal (Apple HIG)
+- `sheet-dismiss-confirm` - Confirm before dismissing a sheet/modal with unsaved changes (Apple HIG)
+- `error-clarity` - Error messages must state cause + how to fix (not just "Invalid input") (HIG, MD)
+- `field-grouping` - Group related fields logically (fieldset/legend or visual grouping) (MD)
+- `read-only-distinction` - Read-only state should be visually and semantically different from disabled (MD)
+- `focus-management` - After submit error, auto-focus the first invalid field (WCAG, MD)
+- `error-summary` - For multiple errors, show summary at top with anchor links to each field (WCAG)
+- `touch-friendly-input` - Mobile input height ≥44px to meet touch target requirements (Apple HIG)
+- `destructive-emphasis` - Destructive actions use semantic danger color (red) and are visually separated from primary actions (HIG, MD)
+- `toast-accessibility` - Toasts must not steal focus; use aria-live="polite" for screen reader announcement (WCAG)
+- `aria-live-errors` - Form errors use aria-live region or role="alert" to notify screen readers (WCAG)
+- `contrast-feedback` - Error and success state colors must meet 4.5:1 contrast ratio (WCAG, MD)
+- `timeout-feedback` - Request timeout must show clear feedback with retry option (MD)
+
+### 9. Navigation Patterns (HIGH)
+
+- `bottom-nav-limit` - Bottom navigation max 5 items; use labels with icons (Material Design)
+- `drawer-usage` - Use drawer/sidebar for secondary navigation, not primary actions (Material Design)
+- `back-behavior` - Back navigation must be predictable and consistent; preserve scroll/state (Apple HIG, MD)
+- `deep-linking` - All key screens must be reachable via deep link / URL for sharing and notifications (Apple HIG, MD)
+- `tab-bar-ios` - iOS: use bottom Tab Bar for top-level navigation (Apple HIG)
+- `top-app-bar-android` - Android: use Top App Bar with navigation icon for primary structure (Material Design)
+- `nav-label-icon` - Navigation items must have both icon and text label; icon-only nav harms discoverability (MD)
+- `nav-state-active` - Current location must be visually highlighted (color, weight, indicator) in navigation (HIG, MD)
+- `nav-hierarchy` - Primary nav (tabs/bottom bar) vs secondary nav (drawer/settings) must be clearly separated (MD)
+- `modal-escape` - Modals and sheets must offer a clear close/dismiss affordance; swipe-down to dismiss on mobile (Apple HIG)
+- `search-accessible` - Search must be easily reachable (top bar or tab); provide recent/suggested queries (MD)
+- `breadcrumb-web` - Web: use breadcrumbs for 3+ level deep hierarchies to aid orientation (MD)
+- `state-preservation` - Navigating back must restore previous scroll position, filter state, and input (HIG, MD)
+- `gesture-nav-support` - Support system gesture navigation (iOS swipe-back, Android predictive back) without conflict (HIG, MD)
+- `tab-badge` - Use badges on nav items sparingly to indicate unread/pending; clear after user visits (HIG, MD)
+- `overflow-menu` - When actions exceed available space, use overflow/more menu instead of cramming (MD)
+- `bottom-nav-top-level` - Bottom nav is for top-level screens only; never nest sub-navigation inside it (MD)
+- `adaptive-navigation` - Large screens (≥1024px) prefer sidebar; small screens use bottom/top nav (Material Adaptive)
+- `back-stack-integrity` - Never silently reset the navigation stack or unexpectedly jump to home (HIG, MD)
+- `navigation-consistency` - Navigation placement must stay the same across all pages; don't change by page type
+- `avoid-mixed-patterns` - Don't mix Tab + Sidebar + Bottom Nav at the same hierarchy level
+- `modal-vs-navigation` - Modals must not be used for primary navigation flows; they break the user's path (HIG)
+- `focus-on-route-change` - After page transition, move focus to main content region for screen reader users (WCAG)
+- `persistent-nav` - Core navigation must remain reachable from deep pages; don't hide it entirely in sub-flows (HIG, MD)
+- `destructive-nav-separation` - Dangerous actions (delete account, logout) must be visually and spatially separated from normal nav items (HIG, MD)
+- `empty-nav-state` - When a nav destination is unavailable, explain why instead of silently hiding it (MD)
+
+### 10. Charts & Data (LOW)
+
+- `chart-type` - Match chart type to data type (trend → line, comparison → bar, proportion → pie/donut)
+- `color-guidance` - Use accessible color palettes; avoid red/green only pairs for colorblind users (WCAG, MD)
+- `data-table` - Provide table alternative for accessibility; charts alone are not screen-reader friendly (WCAG)
+- `pattern-texture` - Supplement color with patterns, textures, or shapes so data is distinguishable without color (WCAG, MD)
+- `legend-visible` - Always show legend; position near the chart, not detached below a scroll fold (MD)
+- `tooltip-on-interact` - Provide tooltips/data labels on hover (Web) or tap (mobile) showing exact values (HIG, MD)
+- `axis-labels` - Label axes with units and readable scale; avoid truncated or rotated labels on mobile
+- `responsive-chart` - Charts must reflow or simplify on small screens (e.g. horizontal bar instead of vertical, fewer ticks)
+- `empty-data-state` - Show meaningful empty state when no data exists ("No data yet" + guidance), not a blank chart (MD)
+- `loading-chart` - Use skeleton or shimmer placeholder while chart data loads; don't show an empty axis frame
+- `animation-optional` - Chart entrance animations must respect prefers-reduced-motion; data should be readable immediately (HIG)
+- `large-dataset` - For 1000+ data points, aggregate or sample; provide drill-down for detail instead of rendering all (MD)
+- `number-formatting` - Use locale-aware formatting for numbers, dates, currencies on axes and labels (HIG, MD)
+- `touch-target-chart` - Interactive chart elements (points, segments) must have ≥44pt tap area or expand on touch (Apple HIG)
+- `no-pie-overuse` - Avoid pie/donut for >5 categories; switch to bar chart for clarity
+- `contrast-data` - Data lines/bars vs background ≥3:1; data text labels ≥4.5:1 (WCAG)
+- `legend-interactive` - Legends should be clickable to toggle series visibility (MD)
+- `direct-labeling` - For small datasets, label values directly on the chart to reduce eye travel
+- `tooltip-keyboard` - Tooltip content must be keyboard-reachable and not rely on hover alone (WCAG)
+- `sortable-table` - Data tables must support sorting with aria-sort indicating current sort state (WCAG)
+- `axis-readability` - Axis ticks must not be cramped; maintain readable spacing, auto-skip on small screens
+- `data-density` - Limit information density per chart to avoid cognitive overload; split into multiple charts if needed
+- `trend-emphasis` - Emphasize data trends over decoration; avoid heavy gradients/shadows that obscure the data
+- `gridline-subtle` - Grid lines should be low-contrast (e.g. gray-200) so they don't compete with data
+- `focusable-elements` - Interactive chart elements (points, bars, slices) must be keyboard-navigable (WCAG)
+- `screen-reader-summary` - Provide a text summary or aria-label describing the chart's key insight for screen readers (WCAG)
+- `error-state-chart` - Data load failure must show error message with retry action, not a broken/empty chart
+- `export-option` - For data-heavy products, offer CSV/image export of chart data
+- `drill-down-consistency` - Drill-down interactions must maintain a clear back-path and hierarchy breadcrumb
+- `time-scale-clarity` - Time series charts must clearly label time granularity (day/week/month) and allow switching

package/dist/agent-src/skills/design-review/SKILL.md

@@ -0,0 +1,233 @@
+---
+model_tier: high
+name: design-review
+description: "Use when the user says \"review the design\", \"check the UI\", or wants a comprehensive UI/UX review. Uses a 7-phase methodology covering interaction, responsiveness, accessibility, and more."
+domain: quality
+workspaces:
+  - engineering
+packs:
+  - engineering-base
+---
+
+# design-review
+
+## When to use
+
+Use this skill when:
+- Reviewing pull requests with UI changes
+- Auditing frontend components for design quality
+- Verifying responsive design across viewports
+- Checking accessibility compliance (WCAG 2.1 AA)
+- Testing interaction flows and user experience
+- Conducting visual QA on new features
+
+Do NOT use when:
+- Creating new designs (use `fe-design` skill instead)
+- Reviewing backend/API code only
+- Quick syntax checks (use linters)
+
+## Prerequisites
+
+One of the following browser automation tools:
+- **Playwright MCP** (recommended) — browser automation, screenshots, viewport testing
+- **Chrome DevTools** — screenshot capture, performance analysis
+
+A **live preview URL** is required for testing.
+
+## Procedure: Design review
+
+### Phase 0: Preparation
+
+- Read PR description and git diff.
+- Identify changed components and affected pages.
+- Navigate to preview URL.
+- Take baseline screenshot.
+
+### Phase 1: Interaction
+
+- Test user flows end-to-end.
+- Verify hover, focus, active, and disabled states.
+- Test keyboard navigation (Tab, Enter, Escape, Arrow keys).
+- Check loading states and transitions.
+- Verify form submission and error recovery.
+
+### Phase 2: Responsiveness
+
+Test at three viewports:
+
+| Viewport | Width | Device |
+|---|---|---|
+| Desktop | 1440px | Standard monitor |
+| Tablet | 768px | iPad |
+| Mobile | 375px | iPhone SE |
+
+- Take screenshots at each viewport.
+- Check layout shifts, overflow, and content reflow.
+- Verify touch targets are at least 44x44px on mobile.
+
+### Phase 3: Visual Polish
+
+- **Typography:** Font sizes, weights, line heights, hierarchy.
+- **Spacing:** Consistent margins, padding, alignment.
+- **Colors:** Contrast ratios, brand consistency, dark mode.
+- **Alignment:** Grid alignment, visual balance.
+- **Icons:** Consistent size, style, and spacing.
+
+### Phase 4: Accessibility (WCAG 2.1 AA)
+
+| Criterion | Check |
+|---|---|
+| **1.1.1** | All images have meaningful alt text |
+| **1.3.1** | Semantic HTML (headings, landmarks, lists) |
+| **1.4.3** | Color contrast ≥ 4.5:1 (text), ≥ 3:1 (large text) |
+| **1.4.11** | Non-text contrast ≥ 3:1 (UI components, borders) |
+| **2.1.1** | All functionality available via keyboard |
+| **2.4.3** | Focus order is logical and predictable |
+| **2.4.7** | Focus indicator is visible |
+| **3.3.1** | Error messages identify the field and describe the error |
+| **3.3.2** | Labels and instructions for form inputs |
+| **4.1.2** | ARIA roles, states, and properties are correct |
+
+### Phase 5: Robustness
+
+- **Empty states:** What happens with no data?
+- **Error states:** What happens when things fail?
+- **Content overflow:** Long text, many items, large numbers.
+- **Loading states:** Skeleton screens, spinners, progressive loading.
+- **Boundary values:** Min/max inputs, special characters.
+
+### Phase 6: Code Health
+
+- Component reuse — are existing components used where possible?
+- Design tokens — are colors, spacing, fonts from the design system?
+- CSS patterns — utility classes vs. custom CSS, consistency.
+- Accessibility in code — semantic HTML, ARIA attributes.
+
+### Phase 7: Content & Console
+
+- Grammar and spelling in UI text.
+- Consistent terminology and tone.
+- No placeholder text left in production.
+- Check browser console for JavaScript errors or warnings.
+
+## Communication principles
+
+### Problems over prescriptions
+
+Describe **what's wrong and why it matters**, not how to fix it.
+
+```
+❌ "Change margin to 16px"
+✅ "Spacing feels inconsistent with adjacent elements, creating visual clutter near the CTA."
+```
+
+### Triage matrix
+
+Every issue gets a severity:
+
+| Severity | Meaning | Action |
+|---|---|---|
+| **Blocker** | Must fix before merge | Blocks PR |
+| **High** | Should fix before merge | Strong recommendation |
+| **Medium** | Consider for follow-up | Suggestion |
+| **Nitpick** | Optional polish | Prefix with "Nit:" |
+
+### Evidence-based
+
+Screenshots required for all visual issues. Reference specific viewport and state.
+
+### Start positive
+
+Acknowledge what works well before listing issues.
+
+## Report structure
+
+```markdown
+## Design Review Summary
+[Positive opening + overall assessment]
+
+### 🚫 Blockers
+[Critical issues — must fix]
+
+### ⚠️ High Priority
+[Significant issues — should fix]
+
+### 💡 Suggestions
+[Improvements for follow-up]
+
+### ✨ Nitpicks
+[Minor aesthetic details]
+
+### Testing Evidence
+[Screenshots: Desktop, Tablet, Mobile]
+
+### Next Steps
+1. [Fix blockers]
+2. [Address high-priority]
+
+**Overall: [Ready to merge | Needs revisions]**
+```
+
+
+## Visual QA with browser automation
+
+When Playwright MCP or browser tools are available, use them for automated visual verification:
+
+### Before/After comparison
+
+1. **Capture baseline** — screenshot before changes at all 3 viewports.
+2. **Apply changes** — deploy or hot-reload.
+3. **Capture after** — screenshot at the same viewports and states.
+4. **Compare** — visually diff the screenshots, flag regressions.
+
+### State-based verification
+
+Don't just screenshot the default state. Capture:
+
+| State | How to trigger |
+|---|---|
+| Empty | Remove data, check empty state UI |
+| Loading | Throttle network, capture skeleton/spinner |
+| Error | Force an error response, check error UI |
+| Overflow | Add very long text, many items |
+| Interactive | Hover, focus, open dropdowns |
+
+### Mockup-to-code verification
+
+When implementing from a design mockup or screenshot:
+
+1. **Open the mockup** — use the provided image/screenshot.
+2. **Implement** — build the UI component.
+3. **Side-by-side** — compare mockup vs. implementation at the same viewport.
+4. **Flag deviations** — spacing, colors, typography, alignment differences.
+
+This is especially useful when the user provides a screenshot or Figma export as a reference.
+
+## Output format
+
+1. Design review report following the Report structure section
+2. Severity-rated findings (blocker, suggestion, nit)
+3. Accessibility and responsive compliance summary
+
+## Auto-trigger keywords
+
+- design review
+- UI review
+- UX audit
+- accessibility
+- WCAG
+- responsive
+
+## Gotcha
+
+- Don't review design without understanding the user's constraints (time, resources, scope).
+- The model tends to suggest accessibility improvements that break the existing design system.
+- "Best practice" is not always the right choice — sometimes "good enough" ships faster.
+
+## Do NOT
+
+- Do NOT skip accessibility testing — it's not optional.
+- Do NOT report issues without evidence (screenshots, specific elements).
+- Do NOT prescribe solutions — describe problems and impact.
+- Do NOT block PRs on nitpicks.
+- Do NOT test only at desktop resolution.