[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71RM8MDNY73227JRGPW7XMF":3,"skill-same:01M71RM8MDNY73227JRGPW7XMF":224},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":27,"publishedAt":41,"linkOnly":42,"markdownContent":43,"markdownBody":44,"frontMatter":45,"refName":46,"commitSha":47,"skillDirectory":48,"forksCount":49,"repositoryHtmlUrl":50,"repositoryHomepageUrl":51,"ownerHtmlUrl":52,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":53,"install":54,"resources":67},"01M71RM8MDNY73227JRGPW7XMF","ui-ux-pro-max",null,"UI\u002FUX design intelligence with searchable database","gongiskhan\u002Fagent-garrison","gongiskhan","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F1997392?v=4","01M71RKMFR53TKXE308C22QTNZ","01M71RKMJA57KZHNDCBNKTWZRR",1,"MIT","https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002FSKILL.md",[17,22],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":25,"taxonomyTypeDesc":26},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[28,29,30,31,32,33,34,35,36,37,38,39,40],"ux","ui","ui ux pro max","max","pro","ui ux","design","database","intelligence","with","ux design","design intelligence","ui\u002Fux","2026-11-10 13:02:02",false,"---\nname: ui-ux-pro-max\ndescription: UI\u002FUX design intelligence with searchable database\n---\n# ui-ux-pro-max\n\nComprehensive design guide for web, mobile, and desktop applications. Contains 67 styles, 161 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 22 technology stacks. Searchable database with priority-based recommendations.\n\n## When to Apply\n\n当任务涉及 **UI 结构、视觉设计决策、交互模式或用户体验质量控制** 时，应使用此 Skill。\n\n### Primary Use Cases\n\n在以下情况此 Skill 最为有用：\n\n- 设计新的页面（Landing Page、Dashboard、Admin、SaaS、Mobile App）\n- 创建或重构 UI 组件（按钮、弹窗、表单、表格、图表等）\n- 选择配色方案、字体系统、间距规范或布局体系\n- 审查 UI 代码的用户体验、可访问性或视觉一致性\n- 实现导航结构、动效或响应式行为\n- 做产品层级的设计决策（风格、信息层级、品牌表达）\n- 提升界面的感知质量、清晰度或可用性\n\n### Recommended\n\n在以下情况建议使用此 Skill：\n\n- UI 看起来\"不够专业\"，但原因不明确\n- 收到可用性或体验方面的反馈\n- 准备上线前的 UI 质量优化\n- 需要对齐跨平台设计（Web \u002F iOS \u002F Android）\n- 构建设计系统或可复用组件库\n\n### Skip\n\n在以下情况无需使用此 Skill：\n\n- 纯后端逻辑开发\n- 仅涉及 API 或数据库设计\n- 与界面无关的性能优化\n- 基础设施或 DevOps 工作\n- 非视觉类脚本或自动化任务\n\n**判断准则**：如果任务会改变某个功能 **看起来如何、使用起来如何、如何运动或如何被交互**，就应该使用此 Skill。\n\n## Rule Categories by Priority\n\n*供人工\u002FAI 查阅：按 1→10 决定先关注哪类规则；需要细则时用 `--domain \u003CDomain>` 查询。脚本不读取本表。*\n\n| Priority | Category | Impact | Domain | Key Checks (Must Have) | Anti-Patterns (Avoid) |\n|----------|----------|--------|--------|------------------------|------------------------|\n| 1 | Accessibility | CRITICAL | `ux` | Contrast 4.5:1, Alt text, Keyboard nav, Aria-labels | Removing focus rings, Icon-only buttons without labels |\n| 2 | Touch & Interaction | CRITICAL | `ux` | Min size 44×44px, 8px+ spacing, Loading feedback | Reliance on hover only, Instant state changes (0ms) |\n| 3 | Performance | HIGH | `ux` | WebP\u002FAVIF, Lazy loading, Reserve space (CLS < 0.1) | Layout thrashing, Cumulative Layout Shift |\n| 4 | Style Selection | HIGH | `style`, `product` | Match product type, Consistency, SVG icons (no emoji) | Mixing flat & skeuomorphic randomly, Emoji as icons |\n| 5 | Layout & Responsive | HIGH | `ux` | Mobile-first breakpoints, Viewport meta, No horizontal scroll | Horizontal scroll, Fixed px container widths, Disable zoom |\n| 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 |\n| 7 | Animation | MEDIUM | `ux` | Duration 150–300ms, Motion conveys meaning, Spatial continuity | Decorative-only animation, Animating width\u002Fheight, No reduced-motion |\n| 8 | Forms & Feedback | MEDIUM | `ux` | Visible labels, Error near field, Helper text, Progressive disclosure | Placeholder-only label, Errors only at top, Overwhelm upfront |\n| 9 | Navigation Patterns | HIGH | `ux` | Predictable back, Bottom nav ≤5, Deep linking | Overloaded nav, Broken back behavior, No deep links |\n| 10 | Charts & Data | LOW | `chart` | Legends, Tooltips, Accessible colors | Relying on color alone to convey meaning |\n\n## Quick Reference\n\n### 1. Accessibility (CRITICAL)\n\n- `color-contrast` - Minimum 4.5:1 ratio for normal text (large text 3:1); Material Design\n- `focus-states` - Visible focus rings on interactive elements (2–4px; Apple HIG, MD)\n- `alt-text` - Descriptive alt text for meaningful images\n- `aria-labels` - aria-label for icon-only buttons; accessibilityLabel in native (Apple HIG)\n- `keyboard-nav` - Tab order matches visual order; full keyboard support (Apple HIG)\n- `form-labels` - Use label with for attribute\n- `skip-links` - Skip to main content for keyboard users\n- `heading-hierarchy` - Sequential h1→h6, no level skip\n- `color-not-only` - Don't convey info by color alone (add icon\u002Ftext)\n- `dynamic-type` - Support system text scaling; avoid truncation as text grows (Apple Dynamic Type, MD)\n- `reduced-motion` - Respect prefers-reduced-motion; reduce\u002Fdisable animations when requested (Apple Reduced Motion API, MD)\n- `voiceover-sr` - Meaningful accessibilityLabel\u002FaccessibilityHint; logical reading order for VoiceOver\u002Fscreen readers (Apple HIG, MD)\n- `escape-routes` - Provide cancel\u002Fback in modals and multi-step flows (Apple HIG)\n- `keyboard-shortcuts` - Preserve system and a11y shortcuts; offer keyboard alternatives for drag-and-drop (Apple HIG)\n\n### 2. Touch & Interaction (CRITICAL)\n\n- `touch-target-size` - Min 44×44pt (Apple) \u002F 48×48dp (Material); extend hit area beyond visual bounds if needed\n- `touch-spacing` - Minimum 8px\u002F8dp gap between touch targets (Apple HIG, MD)\n- `hover-vs-tap` - Use click\u002Ftap for primary interactions; don't rely on hover alone\n- `loading-buttons` - Disable button during async operations; show spinner or progress\n- `error-feedback` - Clear error messages near problem\n- `cursor-pointer` - Add cursor-pointer to clickable elements (Web)\n- `gesture-conflicts` - Avoid horizontal swipe on main content; prefer vertical scroll\n- `tap-delay` - Use touch-action: manipulation to reduce 300ms delay (Web)\n- `standard-gestures` - Use platform standard gestures consistently; don't redefine (e.g. swipe-back, pinch-zoom) (Apple HIG)\n- `system-gestures` - Don't block system gestures (Control Center, back swipe, etc.) (Apple HIG)\n- `press-feedback` - Visual feedback on press (ripple\u002Fhighlight; MD state layers)\n- `haptic-feedback` - Use haptic for confirmations and important actions; avoid overuse (Apple HIG)\n- `gesture-alternative` - Don't rely on gesture-only interactions; always provide visible controls for critical actions\n- `safe-area-awareness` - Keep primary touch targets away from notch, Dynamic Island, gesture bar and screen edges\n- `no-precision-required` - Avoid requiring pixel-perfect taps on small icons or thin edges\n- `swipe-clarity` - Swipe actions must show clear affordance or hint (chevron, label, tutorial)\n- `drag-threshold` - Use a movement threshold before starting drag to avoid accidental drags\n\n### 3. Performance (HIGH)\n\n- `image-optimization` - Use WebP\u002FAVIF, responsive images (srcset\u002Fsizes), lazy load non-critical assets\n- `image-dimension` - Declare width\u002Fheight or use aspect-ratio to prevent layout shift (Core Web Vitals: CLS)\n- `font-loading` - Use font-display: swap\u002Foptional to avoid invisible text (FOIT); reserve space to reduce layout shift (MD)\n- `font-preload` - Preload only critical fonts; avoid overusing preload on every variant\n- `critical-css` - Prioritize above-the-fold CSS (inline critical CSS or early-loaded stylesheet)\n- `lazy-loading` - Lazy load non-hero components via dynamic import \u002F route-level splitting\n- `bundle-splitting` - Split code by route\u002Ffeature (React Suspense \u002F Next.js dynamic) to reduce initial load and TTI\n- `third-party-scripts` - Load third-party scripts async\u002Fdefer; audit and remove unnecessary ones (MD)\n- `reduce-reflows` - Avoid frequent layout reads\u002Fwrites; batch DOM reads then writes\n- `content-jumping` - Reserve space for async content to avoid layout jumps (Core Web Vitals: CLS)\n- `lazy-load-below-fold` - Use loading=\"lazy\" for below-the-fold images and heavy media\n- `virtualize-lists` - Virtualize lists with 50+ items to improve memory efficiency and scroll performance\n- `main-thread-budget` - Keep per-frame work under ~16ms for 60fps; move heavy tasks off main thread (HIG, MD)\n- `progressive-loading` - Use skeleton screens \u002F shimmer instead of long blocking spinners for >1s operations (Apple HIG)\n- `input-latency` - Keep input latency under ~100ms for taps\u002Fscrolls (Material responsiveness standard)\n- `tap-feedback-speed` - Provide visual feedback within 100ms of tap (Apple HIG)\n- `debounce-throttle` - Use debounce\u002Fthrottle for high-frequency events (scroll, resize, input)\n- `offline-support` - Provide offline state messaging and basic fallback (PWA \u002F mobile)\n- `network-fallback` - Offer degraded modes for slow networks (lower-res images, fewer animations)\n\n### 4. Style Selection (HIGH)\n\n- `style-match` - Match style to product type (use `--design-system` for recommendations)\n- `consistency` - Use same style across all pages\n- `no-emoji-icons` - Use SVG icons (Heroicons, Lucide), not emojis\n- `color-palette-from-product` - Choose palette from product\u002Findustry (search `--domain color`)\n- `effects-match-style` - Shadows, blur, radius aligned with chosen style (glass \u002F flat \u002F clay etc.)\n- `platform-adaptive` - Respect platform idioms (iOS HIG vs Material): navigation, controls, typography, motion\n- `state-clarity` - Make hover\u002Fpressed\u002Fdisabled states visually distinct while staying on-style (Material state layers)\n- `elevation-consistent` - Use a consistent elevation\u002Fshadow scale for cards, sheets, modals; avoid random shadow values\n- `dark-mode-pairing` - Design light\u002Fdark variants together to keep brand, contrast, and style consistent\n- `icon-style-consistent` - Use one icon set\u002Fvisual language (stroke width, corner radius) across the product\n- `system-controls` - Prefer native\u002Fsystem controls over fully custom ones; only customize when branding requires it (Apple HIG)\n- `blur-purpose` - Use blur to indicate background dismissal (modals, sheets), not as decoration (Apple HIG)\n- `primary-action` - Each screen should have only one primary CTA; secondary actions visually subordinate (Apple HIG)\n\n### 5. Layout & Responsive (HIGH)\n\n- `viewport-meta` - width=device-width initial-scale=1 (never disable zoom)\n- `mobile-first` - Design mobile-first, then scale up to tablet and desktop\n- `breakpoint-consistency` - Use systematic breakpoints (e.g. 375 \u002F 768 \u002F 1024 \u002F 1440)\n- `readable-font-size` - Minimum 16px body text on mobile (avoids iOS auto-zoom)\n- `line-length-control` - Mobile 35–60 chars per line; desktop 60–75 chars\n- `horizontal-scroll` - No horizontal scroll on mobile; ensure content fits viewport width\n- `spacing-scale` - Use 4pt\u002F8dp incremental spacing system (Material Design)\n- `touch-density` - Keep component spacing comfortable for touch: not cramped, not causing mis-taps\n- `container-width` - Consistent max-width on desktop (max-w-6xl \u002F 7xl)\n- `z-index-management` - Define layered z-index scale (e.g. 0 \u002F 10 \u002F 20 \u002F 40 \u002F 100 \u002F 1000)\n- `fixed-element-offset` - Fixed navbar\u002Fbottom bar must reserve safe padding for underlying content\n- `scroll-behavior` - Avoid nested scroll regions that interfere with the main scroll experience\n- `viewport-units` - Prefer min-h-dvh over 100vh on mobile\n- `orientation-support` - Keep layout readable and operable in landscape mode\n- `content-priority` - Show core content first on mobile; fold or hide secondary content\n- `visual-hierarchy` - Establish hierarchy via size, spacing, contrast — not color alone\n\n### 6. Typography & Color (MEDIUM)\n\n- `line-height` - Use 1.5-1.75 for body text\n- `line-length` - Limit to 65-75 characters per line\n- `font-pairing` - Match heading\u002Fbody font personalities\n- `font-scale` - Consistent type scale (e.g. 12 14 16 18 24 32)\n- `contrast-readability` - Darker text on light backgrounds (e.g. slate-900 on white)\n- `text-styles-system` - Use platform type system: iOS 11 Dynamic Type styles \u002F Material 5 type roles (display, headline, title, body, label) (HIG, MD)\n- `weight-hierarchy` - Use font-weight to reinforce hierarchy: Bold headings (600–700), Regular body (400), Medium labels (500) (MD)\n- `color-semantic` - Define semantic color tokens (primary, secondary, error, surface, on-surface) not raw hex in components (Material color system)\n- `color-dark-mode` - Dark mode uses desaturated \u002F lighter tonal variants, not inverted colors; test contrast separately (HIG, MD)\n- `color-accessible-pairs` - Foreground\u002Fbackground pairs must meet 4.5:1 (AA) or 7:1 (AAA); use tools to verify (WCAG, MD)\n- `color-not-decorative-only` - Functional color (error red, success green) must include icon\u002Ftext; avoid color-only meaning (HIG, MD)\n- `truncation-strategy` - Prefer wrapping over truncation; when truncating use ellipsis and provide full text via tooltip\u002Fexpand (Apple HIG)\n- `letter-spacing` - Respect default letter-spacing per platform; avoid tight tracking on body text (HIG, MD)\n- `number-tabular` - Use tabular\u002Fmonospaced figures for data columns, prices, and timers to prevent layout shift\n- `whitespace-balance` - Use whitespace intentionally to group related items and separate sections; avoid visual clutter (Apple HIG)\n\n### 7. Animation (MEDIUM)\n\n- `duration-timing` - Use 150–300ms for micro-interactions; complex transitions ≤400ms; avoid >500ms (MD)\n- `transform-performance` - Use transform\u002Fopacity only; avoid animating width\u002Fheight\u002Ftop\u002Fleft\n- `loading-states` - Show skeleton or progress indicator when loading exceeds 300ms\n- `excessive-motion` - Animate 1-2 key elements per view max\n- `easing` - Use ease-out for entering, ease-in for exiting; avoid linear for UI transitions\n- `motion-meaning` - Every animation must express a cause-effect relationship, not just be decorative (Apple HIG)\n- `state-transition` - State changes (hover \u002F active \u002F expanded \u002F collapsed \u002F modal) should animate smoothly, not snap\n- `continuity` - Page\u002Fscreen transitions should maintain spatial continuity (shared element, directional slide) (Apple HIG)\n- `parallax-subtle` - Use parallax sparingly; must respect reduced-motion and not cause disorientation (Apple HIG)\n- `spring-physics` - Prefer spring\u002Fphysics-based curves over linear or cubic-bezier for natural feel (Apple HIG fluid animations)\n- `exit-faster-than-enter` - Exit animations shorter than enter (~60–70% of enter duration) to feel responsive (MD motion)\n- `stagger-sequence` - Stagger list\u002Fgrid item entrance by 30–50ms per item; avoid all-at-once or too-slow reveals (MD)\n- `shared-element-transition` - Use shared element \u002F hero transitions for visual continuity between screens (MD, HIG)\n- `interruptible` - Animations must be interruptible; user tap\u002Fgesture cancels in-progress animation immediately (Apple HIG)\n- `no-blocking-animation` - Never block user input during an animation; UI must stay interactive (Apple HIG)\n- `fade-crossfade` - Use crossfade for content replacement within the same container (MD)\n- `scale-feedback` - Subtle scale (0.95–1.05) on press for tappable cards\u002Fbuttons; restore on release (HIG, MD)\n- `gesture-feedback` - Drag, swipe, and pinch must provide real-time visual response tracking the finger (MD Motion)\n- `hierarchy-motion` - Use translate\u002Fscale direction to express hierarchy: enter from below = deeper, exit upward = back (MD)\n- `motion-consistency` - Unify duration\u002Feasing tokens globally; all animations share the same rhythm and feel\n- `opacity-threshold` - Fading elements should not linger below opacity 0.2; either fade fully or remain visible\n- `modal-motion` - Modals\u002Fsheets should animate from their trigger source (scale+fade or slide-in) for spatial context (HIG, MD)\n- `navigation-direction` - Forward navigation animates left\u002Fup; backward animates right\u002Fdown — keep direction logically consistent (HIG)\n- `layout-shift-avoid` - Animations must not cause layout reflow or CLS; use transform for position changes\n\n### 8. Forms & Feedback (MEDIUM)\n\n- `input-labels` - Visible label per input (not placeholder-only)\n- `error-placement` - Show error below the related field\n- `submit-feedback` - Loading then success\u002Ferror state on submit\n- `required-indicators` - Mark required fields (e.g. asterisk)\n- `empty-states` - Helpful message and action when no content\n- `toast-dismiss` - Auto-dismiss toasts in 3-5s\n- `confirmation-dialogs` - Confirm before destructive actions\n- `input-helper-text` - Provide persistent helper text below complex inputs, not just placeholder (Material Design)\n- `disabled-states` - Disabled elements use reduced opacity (0.38–0.5) + cursor change + semantic attribute (MD)\n- `progressive-disclosure` - Reveal complex options progressively; don't overwhelm users upfront (Apple HIG)\n- `inline-validation` - Validate on blur (not keystroke); show error only after user finishes input (MD)\n- `input-type-keyboard` - Use semantic input types (email, tel, number) to trigger the correct mobile keyboard (HIG, MD)\n- `password-toggle` - Provide show\u002Fhide toggle for password fields (MD)\n- `autofill-support` - Use autocomplete \u002F textContentType attributes so the system can autofill (HIG, MD)\n- `undo-support` - Allow undo for destructive or bulk actions (e.g. \"Undo delete\" toast) (Apple HIG)\n- `success-feedback` - Confirm completed actions with brief visual feedback (checkmark, toast, color flash) (MD)\n- `error-recovery` - Error messages must include a clear recovery path (retry, edit, help link) (HIG, MD)\n- `multi-step-progress` - Multi-step flows show step indicator or progress bar; allow back navigation (MD)\n- `form-autosave` - Long forms should auto-save drafts to prevent data loss on accidental dismissal (Apple HIG)\n- `sheet-dismiss-confirm` - Confirm before dismissing a sheet\u002Fmodal with unsaved changes (Apple HIG)\n- `error-clarity` - Error messages must state cause + how to fix (not just \"Invalid input\") (HIG, MD)\n- `field-grouping` - Group related fields logically (fieldset\u002Flegend or visual grouping) (MD)\n- `read-only-distinction` - Read-only state should be visually and semantically different from disabled (MD)\n- `focus-management` - After submit error, auto-focus the first invalid field (WCAG, MD)\n- `error-summary` - For multiple errors, show summary at top with anchor links to each field (WCAG)\n- `touch-friendly-input` - Mobile input height ≥44px to meet touch target requirements (Apple HIG)\n- `destructive-emphasis` - Destructive actions use semantic danger color (red) and are visually separated from primary actions (HIG, MD)\n- `toast-accessibility` - Toasts must not steal focus; use aria-live=\"polite\" for screen reader announcement (WCAG)\n- `aria-live-errors` - Form errors use aria-live region or role=\"alert\" to notify screen readers (WCAG)\n- `contrast-feedback` - Error and success state colors must meet 4.5:1 contrast ratio (WCAG, MD)\n- `timeout-feedback` - Request timeout must show clear feedback with retry option (MD)\n\n### 9. Navigation Patterns (HIGH)\n\n- `bottom-nav-limit` - Bottom navigation max 5 items; use labels with icons (Material Design)\n- `drawer-usage` - Use drawer\u002Fsidebar for secondary navigation, not primary actions (Material Design)\n- `back-behavior` - Back navigation must be predictable and consistent; preserve scroll\u002Fstate (Apple HIG, MD)\n- `deep-linking` - All key screens must be reachable via deep link \u002F URL for sharing and notifications (Apple HIG, MD)\n- `tab-bar-ios` - iOS: use bottom Tab Bar for top-level navigation (Apple HIG)\n- `top-app-bar-android` - Android: use Top App Bar with navigation icon for primary structure (Material Design)\n- `nav-label-icon` - Navigation items must have both icon and text label; icon-only nav harms discoverability (MD)\n- `nav-state-active` - Current location must be visually highlighted (color, weight, indicator) in navigation (HIG, MD)\n- `nav-hierarchy` - Primary nav (tabs\u002Fbottom bar) vs secondary nav (drawer\u002Fsettings) must be clearly separated (MD)\n- `modal-escape` - Modals and sheets must offer a clear close\u002Fdismiss affordance; swipe-down to dismiss on mobile (Apple HIG)\n- `search-accessible` - Search must be easily reachable (top bar or tab); provide recent\u002Fsuggested queries (MD)\n- `breadcrumb-web` - Web: use breadcrumbs for 3+ level deep hierarchies to aid orientation (MD)\n- `state-preservation` - Navigating back must restore previous scroll position, filter state, and input (HIG, MD)\n- `gesture-nav-support` - Support system gesture navigation (iOS swipe-back, Android predictive back) without conflict (HIG, MD)\n- `tab-badge` - Use badges on nav items sparingly to indicate unread\u002Fpending; clear after user visits (HIG, MD)\n- `overflow-menu` - When actions exceed available space, use overflow\u002Fmore menu instead of cramming (MD)\n- `bottom-nav-top-level` - Bottom nav is for top-level screens only; never nest sub-navigation inside it (MD)\n- `adaptive-navigation` - Large screens (≥1024px) prefer sidebar; small screens use bottom\u002Ftop nav (Material Adaptive)\n- `back-stack-integrity` - Never silently reset the navigation stack or unexpectedly jump to home (HIG, MD)\n- `navigation-consistency` - Navigation placement must stay the same across all pages; don't change by page type\n- `avoid-mixed-patterns` - Don't mix Tab + Sidebar + Bottom Nav at the same hierarchy level\n- `modal-vs-navigation` - Modals must not be used for primary navigation flows; they break the user's path (HIG)\n- `focus-on-route-change` - After page transition, move focus to main content region for screen reader users (WCAG)\n- `persistent-nav` - Core navigation must remain reachable from deep pages; don't hide it entirely in sub-flows (HIG, MD)\n- `destructive-nav-separation` - Dangerous actions (delete account, logout) must be visually and spatially separated from normal nav items (HIG, MD)\n- `empty-nav-state` - When a nav destination is unavailable, explain why instead of silently hiding it (MD)\n\n### 10. Charts & Data (LOW)\n\n- `chart-type` - Match chart type to data type (trend → line, comparison → bar, proportion → pie\u002Fdonut)\n- `color-guidance` - Use accessible color palettes; avoid red\u002Fgreen only pairs for colorblind users (WCAG, MD)\n- `data-table` - Provide table alternative for accessibility; charts alone are not screen-reader friendly (WCAG)\n- `pattern-texture` - Supplement color with patterns, textures, or shapes so data is distinguishable without color (WCAG, MD)\n- `legend-visible` - Always show legend; position near the chart, not detached below a scroll fold (MD)\n- `tooltip-on-interact` - Provide tooltips\u002Fdata labels on hover (Web) or tap (mobile) showing exact values (HIG, MD)\n- `axis-labels` - Label axes with units and readable scale; avoid truncated or rotated labels on mobile\n- `responsive-chart` - Charts must reflow or simplify on small screens (e.g. horizontal bar instead of vertical, fewer ticks)\n- `empty-data-state` - Show meaningful empty state when no data exists (\"No data yet\" + guidance), not a blank chart (MD)\n- `loading-chart` - Use skeleton or shimmer placeholder while chart data loads; don't show an empty axis frame\n- `animation-optional` - Chart entrance animations must respect prefers-reduced-motion; data should be readable immediately (HIG)\n- `large-dataset` - For 1000+ data points, aggregate or sample; provide drill-down for detail instead of rendering all (MD)\n- `number-formatting` - Use locale-aware formatting for numbers, dates, currencies on axes and labels (HIG, MD)\n- `touch-target-chart` - Interactive chart elements (points, segments) must have ≥44pt tap area or expand on touch (Apple HIG)\n- `no-pie-overuse` - Avoid pie\u002Fdonut for >5 categories; switch to bar chart for clarity\n- `contrast-data` - Data lines\u002Fbars vs background ≥3:1; data text labels ≥4.5:1 (WCAG)\n- `legend-interactive` - Legends should be clickable to toggle series visibility (MD)\n- `direct-labeling` - For small datasets, label values directly on the chart to reduce eye travel\n- `tooltip-keyboard` - Tooltip content must be keyboard-reachable and not rely on hover alone (WCAG)\n- `sortable-table` - Data tables must support sorting with aria-sort indicating current sort state (WCAG)\n- `axis-readability` - Axis ticks must not be cramped; maintain readable spacing, auto-skip on small screens\n- `data-density` - Limit information density per chart to avoid cognitive overload; split into multiple charts if needed\n- `trend-emphasis` - Emphasize data trends over decoration; avoid heavy gradients\u002Fshadows that obscure the data\n- `gridline-subtle` - Grid lines should be low-contrast (e.g. gray-200) so they don't compete with data\n- `focusable-elements` - Interactive chart elements (points, bars, slices) must be keyboard-navigable (WCAG)\n- `screen-reader-summary` - Provide a text summary or aria-label describing the chart's key insight for screen readers (WCAG)\n- `error-state-chart` - Data load failure must show error message with retry action, not a broken\u002Fempty chart\n- `export-option` - For data-heavy products, offer CSV\u002Fimage export of chart data\n- `drill-down-consistency` - Drill-down interactions must maintain a clear back-path and hierarchy breadcrumb\n- `time-scale-clarity` - Time series charts must clearly label time granularity (day\u002Fweek\u002Fmonth) and allow switching\n\n## How to Use\n\nSearch specific domains using the CLI tool below.\n\n---\n# Prerequisites\n\nThe bundled scripts require Python 3 (standard library only — no third-party packages, no network access). Check if it is available:\n\n```bash\npython3 --version || python --version\n```\n\nIf Python is not installed, **do not install it yourself**. Stop and ask the user to install Python 3 using their preferred method (e.g. from [python.org](https:\u002F\u002Fwww.python.org\u002Fdownloads\u002F) or their OS package manager), then continue once it is available. Never run package-manager or system-modifying commands (`sudo`, `brew`, `apt`, `winget`, etc.) on the user's machine for this skill.\n\nIf the user prefers not to install Python, skip the CLI searches and rely on the Quick Reference sections above.\n\n> **Note:** On Windows, use `python` instead of `python3` to run scripts (e.g., `python scripts\u002Fsearch.py` instead of `python3 scripts\u002Fsearch.py`).\n\n---\n\n## How to Use This Skill\n\nUse this skill when the user requests any of the following:\n\n| Scenario | Trigger Examples | Start From |\n|----------|-----------------|------------|\n| **New project \u002F page** | \"做一个 landing page\"、\"Build a dashboard\" | Step 1 → Step 2 (design system) |\n| **New component** | \"Create a pricing card\"、\"Add a modal\" | Step 3 (domain search: style, ux) |\n| **Choose style \u002F color \u002F font** | \"What style fits a fintech app?\"、\"推荐配色\" | Step 2 (design system) |\n| **Review existing UI** | \"Review this page for UX issues\"、\"检查无障碍\" | Quick Reference checklist above |\n| **Fix a UI bug** | \"Button hover is broken\"、\"Layout shifts on load\" | Quick Reference → relevant section |\n| **Improve \u002F optimize** | \"Make this faster\"、\"Improve mobile experience\" | Step 3 (domain search: ux, react) |\n| **Implement dark mode** | \"Add dark mode support\" | Step 3 (domain: style \"dark mode\") |\n| **Add charts \u002F data viz** | \"Add an analytics dashboard chart\" | Step 3 (domain: chart) |\n| **Stack best practices** | \"React performance tips\"、\"SwiftUI navigation\" | Step 4 (stack search) |\n\nFollow this workflow:\n\n### Step 1: Analyze User Requirements\n\nExtract key information from user request:\n- **Product type**: Entertainment (social, video, music, gaming), Tool (scanner, editor, converter), Productivity (task manager, notes, calendar), or hybrid\n- **Target audience**: C-end consumer users; consider age group, usage context (commute, leisure, work)\n- **Style keywords**: playful, vibrant, minimal, dark mode, content-first, immersive, etc.\n- **Stack**: React Native (this project's only tech stack)\n\n### Step 2: Generate Design System (REQUIRED)\n\n**Always start with `--design-system`** to get comprehensive recommendations with reasoning:\n\n```bash\npython3 skills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"\u003Cproduct_type> \u003Cindustry> \u003Ckeywords>\" --design-system [-p \"Project Name\"]\n```\n\nThis command:\n1. Searches domains in parallel (product, style, color, landing, typography)\n2. Applies reasoning rules from `ui-reasoning.csv` to select best matches\n3. Returns complete design system: pattern, style, colors, typography, effects\n4. Includes anti-patterns to avoid\n\n**Example:**\n```bash\npython3 skills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"beauty spa wellness service\" --design-system -p \"Serenity Spa\"\n```\n\n### Step 2b: Persist Design System (Master + Overrides Pattern)\n\nTo save the design system for **hierarchical retrieval across sessions**, add `--persist`:\n\n```bash\npython3 skills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"\u003Cquery>\" --design-system --persist -p \"Project Name\"\n```\n\nThis creates:\n- `design-system\u002FMASTER.md` — Global Source of Truth with all design rules\n- `design-system\u002Fpages\u002F` — Folder for page-specific overrides\n\n**With page-specific override:**\n```bash\npython3 skills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"\u003Cquery>\" --design-system --persist -p \"Project Name\" --page \"dashboard\"\n```\n\nThis also creates:\n- `design-system\u002Fpages\u002Fdashboard.md` — Page-specific deviations from Master\n\n**How hierarchical retrieval works:**\n1. When building a specific page (e.g., \"Checkout\"), first check `design-system\u002Fpages\u002Fcheckout.md`\n2. If the page file exists, its rules **override** the Master file\n3. If not, use `design-system\u002FMASTER.md` exclusively\n\n**Context-aware retrieval prompt:**\n```\nI am building the [Page Name] page. Please read design-system\u002FMASTER.md.\nAlso check if design-system\u002Fpages\u002F[page-name].md exists.\nIf the page file exists, prioritize its rules.\nIf not, use the Master rules exclusively.\nNow, generate the code...\n```\n\n### Step 2c: Design Dials (optional)\n\nThree optional 1-10 sliders that tune `--design-system` output without changing your query. Add any combination of them to the same command:\n\n```bash\npython3 skills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"\u003Cquery>\" --design-system --variance \u003C1-10> --motion \u003C1-10> --density \u003C1-10>\n```\n\n| Dial | Low (1-3) | Mid (4-7) | High (8-10) |\n|------|-----------|-----------|-------------|\n| `--variance` | Centered \u002F minimal (biases toward Minimalism-style categories) | Balanced \u002F modern | Bold \u002F asymmetric (biases toward Brutalism, Bento Grids) |\n| `--motion` | Subtle micro-interactions | Standard scroll\u002Fstagger motion | Complex choreography (pin, Flip, SplitText) |\n| `--density` | Spacious (24-96px spacing scale) | Standard (16-64px, current default) | Dense\u002Fdashboard (8-32px spacing scale) |\n\n- `--motion` attaches a ready-to-use GSAP snippet (with framework notes, Do\u002FDon't, and performance notes) pulled from `--domain gsap`, matched to the resolved tier (Subtle\u002FStandard\u002FComplex).\n- `--density` overrides the `--space-*` CSS variable table in the ASCII\u002Fmarkdown\u002FMASTER.md output — use it for dashboards (high) vs. marketing pages (low) without hand-editing tokens.\n- Leaving a dial unset keeps that part of the output exactly as it was before (no behavior change).\n\n**Example:**\n```bash\npython3 skills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"internal analytics dashboard\" --design-system --variance 8 --motion 7 --density 8 -p \"Ops Console\"\n```\n\n### Step 3: Supplement with Detailed Searches (as needed)\n\nAfter getting the design system, use domain searches to get additional details:\n\n```bash\npython3 skills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"\u003Ckeyword>\" --domain \u003Cdomain> [-n \u003Cmax_results>]\n```\n\n**When to use detailed searches:**\n\n| Need | Domain | Example |\n|------|--------|---------|\n| Product type patterns | `product` | `--domain product \"entertainment social\"` |\n| More style options | `style` | `--domain style \"glassmorphism dark\"` |\n| Color palettes | `color` | `--domain color \"entertainment vibrant\"` |\n| Font pairings | `typography` | `--domain typography \"playful modern\"` |\n| Chart recommendations | `chart` | `--domain chart \"real-time dashboard\"` |\n| UX best practices | `ux` | `--domain ux \"animation accessibility\"` |\n| Landing structure | `landing` | `--domain landing \"hero social-proof\"` |\n| React Native perf | `react` | `--domain react \"rerender memo list\"` |\n| App interface a11y | `web` | `--domain web \"accessibilityLabel touch safe-areas\"` |\n| AI prompt \u002F CSS keywords | `prompt` | `--domain prompt \"minimalism\"` |\n\n### Step 4: Stack Guidelines\n\nGet implementation-specific best practices for the user's stack:\n\n```bash\npython3 skills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"\u003Ckeyword>\" --stack \u003Cstack>\n```\n\n---\n\n## Search Reference\n\n### Available Domains\n\n| Domain | Use For | Example Keywords |\n|--------|---------|------------------|\n| `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service |\n| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism |\n| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern |\n| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service |\n| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof |\n| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie |\n| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading |\n| `gsap` | GSAP animation skeletons by intensity tier | scroll reveal, stagger, magnetic cursor, page transition |\n| `react` | React\u002FNext.js performance | waterfall, bundle, suspense, memo, rerender, cache |\n| `web` | App interface guidelines (iOS\u002FAndroid\u002FReact Native) | accessibilityLabel, touch targets, safe areas, Dynamic Type |\n| `prompt` | AI prompts, CSS keywords | (style name) |\n\n### Available Stacks\n\n| Stack | Focus |\n|-------|-------|\n| `react-native` | Components, Navigation, Lists |\n| `javafx` | Enterprise desktop apps, AtlantaFX themes, FXML, CSS, Controls, Binding, Threading, Packaging |\n\n**JavaFX enterprise examples:**\n\n```bash\npython3 skills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"atlantafx primer enterprise theme\" --stack javafx\npython3 skills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"enterprise tableview density permission\" --stack javafx\n```\n\n---\n\n## Example Workflow\n\n**User request:** \"Make an AI search homepage。\"\n\n### Step 1: Analyze Requirements\n- Product type: Tool (AI search engine)\n- Target audience: C-end users looking for fast, intelligent search\n- Style keywords: modern, minimal, content-first, dark mode\n- Stack: React Native\n\n### Step 2: Generate Design System (REQUIRED)\n\n```bash\npython3 skills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"AI search tool modern minimal\" --design-system -p \"AI Search\"\n```\n\n**Output:** Complete design system with pattern, style, colors, typography, effects, and anti-patterns.\n\n### Step 3: Supplement with Detailed Searches (as needed)\n\n```bash\n# Get style options for a modern tool product\npython3 skills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"minimalism dark mode\" --domain style\n\n# Get UX best practices for search interaction and loading\npython3 skills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"search loading animation\" --domain ux\n```\n\n### Step 4: Stack Guidelines\n\n```bash\npython3 skills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"list performance navigation\" --stack react-native\n```\n\n**Then:** Synthesize design system + detailed searches and implement the design.\n\n---\n\n## Output Formats\n\nThe `--design-system` flag supports two output formats:\n\n```bash\n# ASCII box (default) - best for terminal display\npython3 skills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"fintech crypto\" --design-system\n\n# Markdown - best for documentation\npython3 skills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"fintech crypto\" --design-system -f markdown\n```\n\n---\n\n## Tips for Better Results\n\n### Query Strategy\n\n- Use **multi-dimensional keywords** — combine product + industry + tone + density: `\"entertainment social vibrant content-dense\"` not just `\"app\"`\n- Try different keywords for the same need: `\"playful neon\"` → `\"vibrant dark\"` → `\"content-first minimal\"`\n- Use `--design-system` first for full recommendations, then `--domain` to deep-dive any dimension you're unsure about\n- Add `--stack \u003Cstack>` for implementation-specific guidance when the target stack is known\n\n### Common Sticking Points\n\n| Problem | What to Do |\n|---------|------------|\n| Can't decide on style\u002Fcolor | Re-run `--design-system` with different keywords |\n| Dark mode contrast issues | Quick Reference §6: `color-dark-mode` + `color-accessible-pairs` |\n| Animations feel unnatural | Quick Reference §7: `spring-physics` + `easing` + `exit-faster-than-enter` |\n| Form UX is poor | Quick Reference §8: `inline-validation` + `error-clarity` + `focus-management` |\n| Navigation feels confusing | Quick Reference §9: `nav-hierarchy` + `bottom-nav-limit` + `back-behavior` |\n| Layout breaks on small screens | Quick Reference §5: `mobile-first` + `breakpoint-consistency` |\n| Performance \u002F jank | Quick Reference §3: `virtualize-lists` + `main-thread-budget` + `debounce-throttle` |\n\n### Pre-Delivery Checklist\n\n- Run `--domain ux \"animation accessibility z-index loading\"` as a UX validation pass before implementation\n- Run through Quick Reference **§1–§3** (CRITICAL + HIGH) as a final review\n- Test on 375px (small phone) and landscape orientation\n- Verify behavior with **reduced-motion** enabled and **Dynamic Type** at largest size\n- Check dark mode contrast independently (don't assume light mode values work)\n- Confirm all touch targets ≥44pt and no content hidden behind safe areas\n\n---\n\n## Common Rules for Professional UI\n\nThese are frequently overlooked issues that make UI look unprofessional:\nScope notice: The rules below are for App UI (iOS\u002FAndroid\u002FReact Native\u002FFlutter), not desktop-web interaction patterns.\n\n### Icons & Visual Elements\n\n- 默认图标库使用 **Phosphor (`@phosphor-icons\u002Freact`)**。`src\u002Fui-ux-pro-max\u002Fdata\u002Ficons.csv` 中列出的只是常用推荐图标，不是完整集合。\n- 当推荐表中找不到合适的图标时：\n  - **优先继续从 Phosphor 的完整图标集中选择任何语义更贴切的图标**；\n  - 如果 Phosphor 也没有理想选项，可以使用 **Heroicons (`@heroicons\u002Freact`)** 作为备选，注意保持风格一致（线性\u002F填充、笔画粗细、圆角风格）。\n\n| Rule | Standard | Avoid | Why It Matters |\n|------|----------|--------|----------------|\n| **No Emoji as Structural Icons** | Use vector-based icons (e.g., Phosphor `@phosphor-icons\u002Freact`, Heroicons `@heroicons\u002Freact`, react-native-vector-icons, @expo\u002Fvector-icons). | Using emojis (🎨 🚀 ⚙️) for navigation, settings, or system controls. | Emojis are font-dependent, inconsistent across platforms, and cannot be controlled via design tokens. |\n| **Vector-Only Assets** | Use SVG or platform vector icons that scale cleanly and support theming. | Raster PNG icons that blur or pixelate. | Ensures scalability, crisp rendering, and dark\u002Flight mode adaptability. |\n| **Stable Interaction States** | Use color, opacity, or elevation transitions for press states without changing layout bounds. | Layout-shifting transforms that move surrounding content or trigger visual jitter. | Prevents unstable interactions and preserves smooth motion\u002Fperceived quality on mobile. |\n| **Correct Brand Logos** | Use official brand assets and follow their usage guidelines (spacing, color, clear space). | Guessing logo paths, recoloring unofficially, or modifying proportions. | Prevents brand misuse and ensures legal\u002Fplatform compliance. |\n| **Consistent Icon Sizing** | Define icon sizes as design tokens (e.g., icon-sm, icon-md = 24pt, icon-lg). | Mixing arbitrary values like 20pt \u002F 24pt \u002F 28pt randomly. | Maintains rhythm and visual hierarchy across the interface. |\n| **Stroke Consistency** | Use a consistent stroke width within the same visual layer (e.g., 1.5px or 2px). | Mixing thick and thin stroke styles arbitrarily. | Inconsistent strokes reduce perceived polish and cohesion. |\n| **Filled vs Outline Discipline** | Use one icon style per hierarchy level. | Mixing filled and outline icons at the same hierarchy level. | Maintains semantic clarity and stylistic coherence. |\n| **Touch Target Minimum** | Minimum 44×44pt interactive area (use hitSlop if icon is smaller). | Small icons without expanded tap area. | Meets accessibility and platform usability standards. |\n| **Icon Alignment** | Align icons to text baseline and maintain consistent padding. | Misaligned icons or inconsistent spacing around them. | Prevents subtle visual imbalance that reduces perceived quality. |\n| **Icon Contrast** | Follow WCAG contrast standards: 4.5:1 for small elements, 3:1 minimum for larger UI glyphs. | Low-contrast icons that blend into the background. | Ensures accessibility in both light and dark modes. |\n\n\n### Interaction (App)\n\n| Rule | Do | Don't |\n|------|----|----- |\n| **Tap feedback** | Provide clear pressed feedback (ripple\u002Fopacity\u002Felevation) within 80-150ms | No visual response on tap |\n| **Animation timing** | Keep micro-interactions around 150-300ms with platform-native easing | Instant transitions or slow animations (>500ms) |\n| **Accessibility focus** | Ensure screen reader focus order matches visual order and labels are descriptive | Unlabeled controls or confusing focus traversal |\n| **Disabled state clarity** | Use disabled semantics (`disabled`\u002Fnative disabled props), reduced emphasis, and no tap action | Controls that look tappable but do nothing |\n| **Touch target minimum** | Keep tap areas >=44x44pt (iOS) or >=48x48dp (Android), expand hit area when icon is smaller | Tiny tap targets or icon-only hit areas without padding |\n| **Gesture conflict prevention** | Keep one primary gesture per region and avoid nested tap\u002Fdrag conflicts | Overlapping gestures causing accidental actions |\n| **Semantic native controls** | Prefer native interactive primitives (`Button`, `Pressable`, platform equivalents) with proper accessibility roles | Generic containers used as primary controls without semantics |\n\n### Light\u002FDark Mode Contrast\n\n| Rule | Do | Don't |\n|------|----|----- |\n| **Surface readability (light)** | Keep cards\u002Fsurfaces clearly separated from background with sufficient opacity\u002Felevation | Overly transparent surfaces that blur hierarchy |\n| **Text contrast (light)** | Maintain body text contrast >=4.5:1 against light surfaces | Low-contrast gray body text |\n| **Text contrast (dark)** | Maintain primary text contrast >=4.5:1 and secondary text >=3:1 on dark surfaces | Dark mode text that blends into background |\n| **Border and divider visibility** | Ensure separators are visible in both themes (not just light mode) | Theme-specific borders disappearing in one mode |\n| **State contrast parity** | Keep pressed\u002Ffocused\u002Fdisabled states equally distinguishable in light and dark themes | Defining interaction states for one theme only |\n| **Token-driven theming** | Use semantic color tokens mapped per theme across app surfaces\u002Ftext\u002Ficons | Hardcoded per-screen hex values |\n| **Scrim and modal legibility** | Use a modal scrim strong enough to isolate foreground content (typically 40-60% black) | Weak scrim that leaves background visually competing |\n\n### Layout & Spacing\n\n| Rule | Do | Don't |\n|------|----|----- |\n| **Safe-area compliance** | Respect top\u002Fbottom safe areas for all fixed headers, tab bars, and CTA bars | Placing fixed UI under notch, status bar, or gesture area |\n| **System bar clearance** | Add spacing for status\u002Fnavigation bars and gesture home indicator | Let tappable content collide with OS chrome |\n| **Consistent content width** | Keep predictable content width per device class (phone\u002Ftablet) | Mixing arbitrary widths between screens |\n| **8dp spacing rhythm** | Use a consistent 4\u002F8dp spacing system for padding\u002Fgaps\u002Fsection spacing | Random spacing increments with no rhythm |\n| **Readable text measure** | Keep long-form text readable on large devices (avoid edge-to-edge paragraphs on tablets) | Full-width long text that hurts readability |\n| **Section spacing hierarchy** | Define clear vertical rhythm tiers (e.g., 16\u002F24\u002F32\u002F48) by hierarchy | Similar UI levels with inconsistent spacing |\n| **Adaptive gutters by breakpoint** | Increase horizontal insets on larger widths and in landscape | Same narrow gutter on all device sizes\u002Forientations |\n| **Scroll and fixed element coexistence** | Add bottom\u002Ftop content insets so lists are not hidden behind fixed bars | Scroll content obscured by sticky headers\u002Ffooters |\n\n---\n\n## Pre-Delivery Checklist\n\nBefore delivering UI code, verify these items:\nScope notice: This checklist is for App UI (iOS\u002FAndroid\u002FReact Native\u002FFlutter).\n\n### Visual Quality\n- [ ] No emojis used as icons (use SVG instead)\n- [ ] All icons come from a consistent icon family and style\n- [ ] Official brand assets are used with correct proportions and clear space\n- [ ] Pressed-state visuals do not shift layout bounds or cause jitter\n- [ ] Semantic theme tokens are used consistently (no ad-hoc per-screen hardcoded colors)\n\n### Interaction\n- [ ] All tappable elements provide clear pressed feedback (ripple\u002Fopacity\u002Felevation)\n- [ ] Touch targets meet minimum size (>=44x44pt iOS, >=48x48dp Android)\n- [ ] Micro-interaction timing stays in the 150-300ms range with native-feeling easing\n- [ ] Disabled states are visually clear and non-interactive\n- [ ] Screen reader focus order matches visual order, and interactive labels are descriptive\n- [ ] Gesture regions avoid nested\u002Fconflicting interactions (tap\u002Fdrag\u002Fback-swipe conflicts)\n\n### Light\u002FDark Mode\n- [ ] Primary text contrast >=4.5:1 in both light and dark mode\n- [ ] Secondary text contrast >=3:1 in both light and dark mode\n- [ ] Dividers\u002Fborders and interaction states are distinguishable in both modes\n- [ ] Modal\u002Fdrawer scrim opacity is strong enough to preserve foreground legibility (typically 40-60% black)\n- [ ] Both themes are tested before delivery (not inferred from a single theme)\n\n### Layout\n- [ ] Safe areas are respected for headers, tab bars, and bottom CTA bars\n- [ ] Scroll content is not hidden behind fixed\u002Fsticky bars\n- [ ] Verified on small phone, large phone, and tablet (portrait + landscape)\n- [ ] Horizontal insets\u002Fgutters adapt correctly by device size and orientation\n- [ ] 4\u002F8dp spacing rhythm is maintained across component, section, and page levels\n- [ ] Long-form text measure remains readable on larger devices (no edge-to-edge paragraphs)\n\n### Accessibility\n- [ ] All meaningful images\u002Ficons have accessibility labels\n- [ ] Form fields have labels, hints, and clear error messages\n- [ ] Color is not the only indicator\n- [ ] Reduced motion and dynamic text size are supported without layout breakage\n- [ ] Accessibility traits\u002Froles\u002Fstates (selected, disabled, expanded) are announced correctly\n","# ui-ux-pro-max\n\nComprehensive design guide for web, mobile, and desktop applications. Contains 67 styles, 161 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 22 technology stacks. Searchable database with priority-based recommendations.\n\n## When to Apply\n\n当任务涉及 **UI 结构、视觉设计决策、交互模式或用户体验质量控制** 时，应使用此 Skill。\n\n### Primary Use Cases\n\n在以下情况此 Skill 最为有用：\n\n- 设计新的页面（Landing Page、Dashboard、Admin、SaaS、Mobile App）\n- 创建或重构 UI 组件（按钮、弹窗、表单、表格、图表等）\n- 选择配色方案、字体系统、间距规范或布局体系\n- 审查 UI 代码的用户体验、可访问性或视觉一致性\n- 实现导航结构、动效或响应式行为\n- 做产品层级的设计决策（风格、信息层级、品牌表达）\n- 提升界面的感知质量、清晰度或可用性\n\n### Recommended\n\n在以下情况建议使用此 Skill：\n\n- UI 看起来\"不够专业\"，但原因不明确\n- 收到可用性或体验方面的反馈\n- 准备上线前的 UI 质量优化\n- 需要对齐跨平台设计（Web \u002F iOS \u002F Android）\n- 构建设计系统或可复用组件库\n\n### Skip\n\n在以下情况无需使用此 Skill：\n\n- 纯后端逻辑开发\n- 仅涉及 API 或数据库设计\n- 与界面无关的性能优化\n- 基础设施或 DevOps 工作\n- 非视觉类脚本或自动化任务\n\n**判断准则**：如果任务会改变某个功能 **看起来如何、使用起来如何、如何运动或如何被交互**，就应该使用此 Skill。\n\n## Rule Categories by Priority\n\n*供人工\u002FAI 查阅：按 1→10 决定先关注哪类规则；需要细则时用 `--domain \u003CDomain>` 查询。脚本不读取本表。*\n\n| Priority | Category | Impact | Domain | Key Checks (Must Have) | Anti-Patterns (Avoid) |\n|----------|----------|--------|--------|------------------------|------------------------|\n| 1 | Accessibility | CRITICAL | `ux` | Contrast 4.5:1, Alt text, Keyboard nav, Aria-labels | Removing focus rings, Icon-only buttons without labels |\n| 2 | Touch & Interaction | CRITICAL | `ux` | Min size 44×44px, 8px+ spacing, Loading feedback | Reliance on hover only, Instant state changes (0ms) |\n| 3 | Performance | HIGH | `ux` | WebP\u002FAVIF, Lazy loading, Reserve space (CLS < 0.1) | Layout thrashing, Cumulative Layout Shift |\n| 4 | Style Selection | HIGH | `style`, `product` | Match product type, Consistency, SVG icons (no emoji) | Mixing flat & skeuomorphic randomly, Emoji as icons |\n| 5 | Layout & Responsive | HIGH | `ux` | Mobile-first breakpoints, Viewport meta, No horizontal scroll | Horizontal scroll, Fixed px container widths, Disable zoom |\n| 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 |\n| 7 | Animation | MEDIUM | `ux` | Duration 150–300ms, Motion conveys meaning, Spatial continuity | Decorative-only animation, Animating width\u002Fheight, No reduced-motion |\n| 8 | Forms & Feedback | MEDIUM | `ux` | Visible labels, Error near field, Helper text, Progressive disclosure | Placeholder-only label, Errors only at top, Overwhelm upfront |\n| 9 | Navigation Patterns | HIGH | `ux` | Predictable back, Bottom nav ≤5, Deep linking | Overloaded nav, Broken back behavior, No deep links |\n| 10 | Charts & Data | LOW | `chart` | Legends, Tooltips, Accessible colors | Relying on color alone to convey meaning |\n\n## Quick Reference\n\n### 1. Accessibility (CRITICAL)\n\n- `color-contrast` - Minimum 4.5:1 ratio for normal text (large text 3:1); Material Design\n- `focus-states` - Visible focus rings on interactive elements (2–4px; Apple HIG, MD)\n- `alt-text` - Descriptive alt text for meaningful images\n- `aria-labels` - aria-label for icon-only buttons; accessibilityLabel in native (Apple HIG)\n- `keyboard-nav` - Tab order matches visual order; full keyboard support (Apple HIG)\n- `form-labels` - Use label with for attribute\n- `skip-links` - Skip to main content for keyboard users\n- `heading-hierarchy` - Sequential h1→h6, no level skip\n- `color-not-only` - Don't convey info by color alone (add icon\u002Ftext)\n- `dynamic-type` - Support system text scaling; avoid truncation as text grows (Apple Dynamic Type, MD)\n- `reduced-motion` - Respect prefers-reduced-motion; reduce\u002Fdisable animations when requested (Apple Reduced Motion API, MD)\n- `voiceover-sr` - Meaningful accessibilityLabel\u002FaccessibilityHint; logical reading order for VoiceOver\u002Fscreen readers (Apple HIG, MD)\n- `escape-routes` - Provide cancel\u002Fback in modals and multi-step flows (Apple HIG)\n- `keyboard-shortcuts` - Preserve system and a11y shortcuts; offer keyboard alternatives for drag-and-drop (Apple HIG)\n\n### 2. Touch & Interaction (CRITICAL)\n\n- `touch-target-size` - Min 44×44pt (Apple) \u002F 48×48dp (Material); extend hit area beyond visual bounds if needed\n- `touch-spacing` - Minimum 8px\u002F8dp gap between touch targets (Apple HIG, MD)\n- `hover-vs-tap` - Use click\u002Ftap for primary interactions; don't rely on hover alone\n- `loading-buttons` - Disable button during async operations; show spinner or progress\n- `error-feedback` - Clear error messages near problem\n- `cursor-pointer` - Add cursor-pointer to clickable elements (Web)\n- `gesture-conflicts` - Avoid horizontal swipe on main content; prefer vertical scroll\n- `tap-delay` - Use touch-action: manipulation to reduce 300ms delay (Web)\n- `standard-gestures` - Use platform standard gestures consistently; don't redefine (e.g. swipe-back, pinch-zoom) (Apple HIG)\n- `system-gestures` - Don't block system gestures (Control Center, back swipe, etc.) (Apple HIG)\n- `press-feedback` - Visual feedback on press (ripple\u002Fhighlight; MD state layers)\n- `haptic-feedback` - Use haptic for confirmations and important actions; avoid overuse (Apple HIG)\n- `gesture-alternative` - Don't rely on gesture-only interactions; always provide visible controls for critical actions\n- `safe-area-awareness` - Keep primary touch targets away from notch, Dynamic Island, gesture bar and screen edges\n- `no-precision-required` - Avoid requiring pixel-perfect taps on small icons or thin edges\n- `swipe-clarity` - Swipe actions must show clear affordance or hint (chevron, label, tutorial)\n- `drag-threshold` - Use a movement threshold before starting drag to avoid accidental drags\n\n### 3. Performance (HIGH)\n\n- `image-optimization` - Use WebP\u002FAVIF, responsive images (srcset\u002Fsizes), lazy load non-critical assets\n- `image-dimension` - Declare width\u002Fheight or use aspect-ratio to prevent layout shift (Core Web Vitals: CLS)\n- `font-loading` - Use font-display: swap\u002Foptional to avoid invisible text (FOIT); reserve space to reduce layout shift (MD)\n- `font-preload` - Preload only critical fonts; avoid overusing preload on every variant\n- `critical-css` - Prioritize above-the-fold CSS (inline critical CSS or early-loaded stylesheet)\n- `lazy-loading` - Lazy load non-hero components via dynamic import \u002F route-level splitting\n- `bundle-splitting` - Split code by route\u002Ffeature (React Suspense \u002F Next.js dynamic) to reduce initial load and TTI\n- `third-party-scripts` - Load third-party scripts async\u002Fdefer; audit and remove unnecessary ones (MD)\n- `reduce-reflows` - Avoid frequent layout reads\u002Fwrites; batch DOM reads then writes\n- `content-jumping` - Reserve space for async content to avoid layout jumps (Core Web Vitals: CLS)\n- `lazy-load-below-fold` - Use loading=\"lazy\" for below-the-fold images and heavy media\n- `virtualize-lists` - Virtualize lists with 50+ items to improve memory efficiency and scroll performance\n- `main-thread-budget` - Keep per-frame work under ~16ms for 60fps; move heavy tasks off main thread (HIG, MD)\n- `progressive-loading` - Use skeleton screens \u002F shimmer instead of long blocking spinners for >1s operations (Apple HIG)\n- `input-latency` - Keep input latency under ~100ms for taps\u002Fscrolls (Material responsiveness standard)\n- `tap-feedback-speed` - Provide visual feedback within 100ms of tap (Apple HIG)\n- `debounce-throttle` - Use debounce\u002Fthrottle for high-frequency events (scroll, resize, input)\n- `offline-support` - Provide offline state messaging and basic fallback (PWA \u002F mobile)\n- `network-fallback` - Offer degraded modes for slow networks (lower-res images, fewer animations)\n\n### 4. Style Selection (HIGH)\n\n- `style-match` - Match style to product type (use `--design-system` for recommendations)\n- `consistency` - Use same style across all pages\n- `no-emoji-icons` - Use SVG icons (Heroicons, Lucide), not emojis\n- `color-palette-from-product` - Choose palette from product\u002Findustry (search `--domain color`)\n- `effects-match-style` - Shadows, blur, radius aligned with chosen style (glass \u002F flat \u002F clay etc.)\n- `platform-adaptive` - Respect platform idioms (iOS HIG vs Material): navigation, controls, typography, motion\n- `state-clarity` - Make hover\u002Fpressed\u002Fdisabled states visually distinct while staying on-style (Material state layers)\n- `elevation-consistent` - Use a consistent elevation\u002Fshadow scale for cards, sheets, modals; avoid random shadow values\n- `dark-mode-pairing` - Design light\u002Fdark variants together to keep brand, contrast, and style consistent\n- `icon-style-consistent` - Use one icon set\u002Fvisual language (stroke width, corner radius) across the product\n- `system-controls` - Prefer native\u002Fsystem controls over fully custom ones; only customize when branding requires it (Apple HIG)\n- `blur-purpose` - Use blur to indicate background dismissal (modals, sheets), not as decoration (Apple HIG)\n- `primary-action` - Each screen should have only one primary CTA; secondary actions visually subordinate (Apple HIG)\n\n### 5. Layout & Responsive (HIGH)\n\n- `viewport-meta` - width=device-width initial-scale=1 (never disable zoom)\n- `mobile-first` - Design mobile-first, then scale up to tablet and desktop\n- `breakpoint-consistency` - Use systematic breakpoints (e.g. 375 \u002F 768 \u002F 1024 \u002F 1440)\n- `readable-font-size` - Minimum 16px body text on mobile (avoids iOS auto-zoom)\n- `line-length-control` - Mobile 35–60 chars per line; desktop 60–75 chars\n- `horizontal-scroll` - No horizontal scroll on mobile; ensure content fits viewport width\n- `spacing-scale` - Use 4pt\u002F8dp incremental spacing system (Material Design)\n- `touch-density` - Keep component spacing comfortable for touch: not cramped, not causing mis-taps\n- `container-width` - Consistent max-width on desktop (max-w-6xl \u002F 7xl)\n- `z-index-management` - Define layered z-index scale (e.g. 0 \u002F 10 \u002F 20 \u002F 40 \u002F 100 \u002F 1000)\n- `fixed-element-offset` - Fixed navbar\u002Fbottom bar must reserve safe padding for underlying content\n- `scroll-behavior` - Avoid nested scroll regions that interfere with the main scroll experience\n- `viewport-units` - Prefer min-h-dvh over 100vh on mobile\n- `orientation-support` - Keep layout readable and operable in landscape mode\n- `content-priority` - Show core content first on mobile; fold or hide secondary content\n- `visual-hierarchy` - Establish hierarchy via size, spacing, contrast — not color alone\n\n### 6. Typography & Color (MEDIUM)\n\n- `line-height` - Use 1.5-1.75 for body text\n- `line-length` - Limit to 65-75 characters per line\n- `font-pairing` - Match heading\u002Fbody font personalities\n- `font-scale` - Consistent type scale (e.g. 12 14 16 18 24 32)\n- `contrast-readability` - Darker text on light backgrounds (e.g. slate-900 on white)\n- `text-styles-system` - Use platform type system: iOS 11 Dynamic Type styles \u002F Material 5 type roles (display, headline, title, body, label) (HIG, MD)\n- `weight-hierarchy` - Use font-weight to reinforce hierarchy: Bold headings (600–700), Regular body (400), Medium labels (500) (MD)\n- `color-semantic` - Define semantic color tokens (primary, secondary, error, surface, on-surface) not raw hex in components (Material color system)\n- `color-dark-mode` - Dark mode uses desaturated \u002F lighter tonal variants, not inverted colors; test contrast separately (HIG, MD)\n- `color-accessible-pairs` - Foreground\u002Fbackground pairs must meet 4.5:1 (AA) or 7:1 (AAA); use tools to verify (WCAG, MD)\n- `color-not-decorative-only` - Functional color (error red, success green) must include icon\u002Ftext; avoid color-only meaning (HIG, MD)\n- `truncation-strategy` - Prefer wrapping over truncation; when truncating use ellipsis and provide full text via tooltip\u002Fexpand (Apple HIG)\n- `letter-spacing` - Respect default letter-spacing per platform; avoid tight tracking on body text (HIG, MD)\n- `number-tabular` - Use tabular\u002Fmonospaced figures for data columns, prices, and timers to prevent layout shift\n- `whitespace-balance` - Use whitespace intentionally to group related items and separate sections; avoid visual clutter (Apple HIG)\n\n### 7. Animation (MEDIUM)\n\n- `duration-timing` - Use 150–300ms for micro-interactions; complex transitions ≤400ms; avoid >500ms (MD)\n- `transform-performance` - Use transform\u002Fopacity only; avoid animating width\u002Fheight\u002Ftop\u002Fleft\n- `loading-states` - Show skeleton or progress indicator when loading exceeds 300ms\n- `excessive-motion` - Animate 1-2 key elements per view max\n- `easing` - Use ease-out for entering, ease-in for exiting; avoid linear for UI transitions\n- `motion-meaning` - Every animation must express a cause-effect relationship, not just be decorative (Apple HIG)\n- `state-transition` - State changes (hover \u002F active \u002F expanded \u002F collapsed \u002F modal) should animate smoothly, not snap\n- `continuity` - Page\u002Fscreen transitions should maintain spatial continuity (shared element, directional slide) (Apple HIG)\n- `parallax-subtle` - Use parallax sparingly; must respect reduced-motion and not cause disorientation (Apple HIG)\n- `spring-physics` - Prefer spring\u002Fphysics-based curves over linear or cubic-bezier for natural feel (Apple HIG fluid animations)\n- `exit-faster-than-enter` - Exit animations shorter than enter (~60–70% of enter duration) to feel responsive (MD motion)\n- `stagger-sequence` - Stagger list\u002Fgrid item entrance by 30–50ms per item; avoid all-at-once or too-slow reveals (MD)\n- `shared-element-transition` - Use shared element \u002F hero transitions for visual continuity between screens (MD, HIG)\n- `interruptible` - Animations must be interruptible; user tap\u002Fgesture cancels in-progress animation immediately (Apple HIG)\n- `no-blocking-animation` - Never block user input during an animation; UI must stay interactive (Apple HIG)\n- `fade-crossfade` - Use crossfade for content replacement within the same container (MD)\n- `scale-feedback` - Subtle scale (0.95–1.05) on press for tappable cards\u002Fbuttons; restore on release (HIG, MD)\n- `gesture-feedback` - Drag, swipe, and pinch must provide real-time visual response tracking the finger (MD Motion)\n- `hierarchy-motion` - Use translate\u002Fscale direction to express hierarchy: enter from below = deeper, exit upward = back (MD)\n- `motion-consistency` - Unify duration\u002Feasing tokens globally; all animations share the same rhythm and feel\n- `opacity-threshold` - Fading elements should not linger below opacity 0.2; either fade fully or remain visible\n- `modal-motion` - Modals\u002Fsheets should animate from their trigger source (scale+fade or slide-in) for spatial context (HIG, MD)\n- `navigation-direction` - Forward navigation animates left\u002Fup; backward animates right\u002Fdown — keep direction logically consistent (HIG)\n- `layout-shift-avoid` - Animations must not cause layout reflow or CLS; use transform for position changes\n\n### 8. Forms & Feedback (MEDIUM)\n\n- `input-labels` - Visible label per input (not placeholder-only)\n- `error-placement` - Show error below the related field\n- `submit-feedback` - Loading then success\u002Ferror state on submit\n- `required-indicators` - Mark required fields (e.g. asterisk)\n- `empty-states` - Helpful message and action when no content\n- `toast-dismiss` - Auto-dismiss toasts in 3-5s\n- `confirmation-dialogs` - Confirm before destructive actions\n- `input-helper-text` - Provide persistent helper text below complex inputs, not just placeholder (Material Design)\n- `disabled-states` - Disabled elements use reduced opacity (0.38–0.5) + cursor change + semantic attribute (MD)\n- `progressive-disclosure` - Reveal complex options progressively; don't overwhelm users upfront (Apple HIG)\n- `inline-validation` - Validate on blur (not keystroke); show error only after user finishes input (MD)\n- `input-type-keyboard` - Use semantic input types (email, tel, number) to trigger the correct mobile keyboard (HIG, MD)\n- `password-toggle` - Provide show\u002Fhide toggle for password fields (MD)\n- `autofill-support` - Use autocomplete \u002F textContentType attributes so the system can autofill (HIG, MD)\n- `undo-support` - Allow undo for destructive or bulk actions (e.g. \"Undo delete\" toast) (Apple HIG)\n- `success-feedback` - Confirm completed actions with brief visual feedback (checkmark, toast, color flash) (MD)\n- `error-recovery` - Error messages must include a clear recovery path (retry, edit, help link) (HIG, MD)\n- `multi-step-progress` - Multi-step flows show step indicator or progress bar; allow back navigation (MD)\n- `form-autosave` - Long forms should auto-save drafts to prevent data loss on accidental dismissal (Apple HIG)\n- `sheet-dismiss-confirm` - Confirm before dismissing a sheet\u002Fmodal with unsaved changes (Apple HIG)\n- `error-clarity` - Error messages must state cause + how to fix (not just \"Invalid input\") (HIG, MD)\n- `field-grouping` - Group related fields logically (fieldset\u002Flegend or visual grouping) (MD)\n- `read-only-distinction` - Read-only state should be visually and semantically different from disabled (MD)\n- `focus-management` - After submit error, auto-focus the first invalid field (WCAG, MD)\n- `error-summary` - For multiple errors, show summary at top with anchor links to each field (WCAG)\n- `touch-friendly-input` - Mobile input height ≥44px to meet touch target requirements (Apple HIG)\n- `destructive-emphasis` - Destructive actions use semantic danger color (red) and are visually separated from primary actions (HIG, MD)\n- `toast-accessibility` - Toasts must not steal focus; use aria-live=\"polite\" for screen reader announcement (WCAG)\n- `aria-live-errors` - Form errors use aria-live region or role=\"alert\" to notify screen readers (WCAG)\n- `contrast-feedback` - Error and success state colors must meet 4.5:1 contrast ratio (WCAG, MD)\n- `timeout-feedback` - Request timeout must show clear feedback with retry option (MD)\n\n### 9. Navigation Patterns (HIGH)\n\n- `bottom-nav-limit` - Bottom navigation max 5 items; use labels with icons (Material Design)\n- `drawer-usage` - Use drawer\u002Fsidebar for secondary navigation, not primary actions (Material Design)\n- `back-behavior` - Back navigation must be predictable and consistent; preserve scroll\u002Fstate (Apple HIG, MD)\n- `deep-linking` - All key screens must be reachable via deep link \u002F URL for sharing and notifications (Apple HIG, MD)\n- `tab-bar-ios` - iOS: use bottom Tab Bar for top-level navigation (Apple HIG)\n- `top-app-bar-android` - Android: use Top App Bar with navigation icon for primary structure (Material Design)\n- `nav-label-icon` - Navigation items must have both icon and text label; icon-only nav harms discoverability (MD)\n- `nav-state-active` - Current location must be visually highlighted (color, weight, indicator) in navigation (HIG, MD)\n- `nav-hierarchy` - Primary nav (tabs\u002Fbottom bar) vs secondary nav (drawer\u002Fsettings) must be clearly separated (MD)\n- `modal-escape` - Modals and sheets must offer a clear close\u002Fdismiss affordance; swipe-down to dismiss on mobile (Apple HIG)\n- `search-accessible` - Search must be easily reachable (top bar or tab); provide recent\u002Fsuggested queries (MD)\n- `breadcrumb-web` - Web: use breadcrumbs for 3+ level deep hierarchies to aid orientation (MD)\n- `state-preservation` - Navigating back must restore previous scroll position, filter state, and input (HIG, MD)\n- `gesture-nav-support` - Support system gesture navigation (iOS swipe-back, Android predictive back) without conflict (HIG, MD)\n- `tab-badge` - Use badges on nav items sparingly to indicate unread\u002Fpending; clear after user visits (HIG, MD)\n- `overflow-menu` - When actions exceed available space, use overflow\u002Fmore menu instead of cramming (MD)\n- `bottom-nav-top-level` - Bottom nav is for top-level screens only; never nest sub-navigation inside it (MD)\n- `adaptive-navigation` - Large screens (≥1024px) prefer sidebar; small screens use bottom\u002Ftop nav (Material Adaptive)\n- `back-stack-integrity` - Never silently reset the navigation stack or unexpectedly jump to home (HIG, MD)\n- `navigation-consistency` - Navigation placement must stay the same across all pages; don't change by page type\n- `avoid-mixed-patterns` - Don't mix Tab + Sidebar + Bottom Nav at the same hierarchy level\n- `modal-vs-navigation` - Modals must not be used for primary navigation flows; they break the user's path (HIG)\n- `focus-on-route-change` - After page transition, move focus to main content region for screen reader users (WCAG)\n- `persistent-nav` - Core navigation must remain reachable from deep pages; don't hide it entirely in sub-flows (HIG, MD)\n- `destructive-nav-separation` - Dangerous actions (delete account, logout) must be visually and spatially separated from normal nav items (HIG, MD)\n- `empty-nav-state` - When a nav destination is unavailable, explain why instead of silently hiding it (MD)\n\n### 10. Charts & Data (LOW)\n\n- `chart-type` - Match chart type to data type (trend → line, comparison → bar, proportion → pie\u002Fdonut)\n- `color-guidance` - Use accessible color palettes; avoid red\u002Fgreen only pairs for colorblind users (WCAG, MD)\n- `data-table` - Provide table alternative for accessibility; charts alone are not screen-reader friendly (WCAG)\n- `pattern-texture` - Supplement color with patterns, textures, or shapes so data is distinguishable without color (WCAG, MD)\n- `legend-visible` - Always show legend; position near the chart, not detached below a scroll fold (MD)\n- `tooltip-on-interact` - Provide tooltips\u002Fdata labels on hover (Web) or tap (mobile) showing exact values (HIG, MD)\n- `axis-labels` - Label axes with units and readable scale; avoid truncated or rotated labels on mobile\n- `responsive-chart` - Charts must reflow or simplify on small screens (e.g. horizontal bar instead of vertical, fewer ticks)\n- `empty-data-state` - Show meaningful empty state when no data exists (\"No data yet\" + guidance), not a blank chart (MD)\n- `loading-chart` - Use skeleton or shimmer placeholder while chart data loads; don't show an empty axis frame\n- `animation-optional` - Chart entrance animations must respect prefers-reduced-motion; data should be readable immediately (HIG)\n- `large-dataset` - For 1000+ data points, aggregate or sample; provide drill-down for detail instead of rendering all (MD)\n- `number-formatting` - Use locale-aware formatting for numbers, dates, currencies on axes and labels (HIG, MD)\n- `touch-target-chart` - Interactive chart elements (points, segments) must have ≥44pt tap area or expand on touch (Apple HIG)\n- `no-pie-overuse` - Avoid pie\u002Fdonut for >5 categories; switch to bar chart for clarity\n- `contrast-data` - Data lines\u002Fbars vs background ≥3:1; data text labels ≥4.5:1 (WCAG)\n- `legend-interactive` - Legends should be clickable to toggle series visibility (MD)\n- `direct-labeling` - For small datasets, label values directly on the chart to reduce eye travel\n- `tooltip-keyboard` - Tooltip content must be keyboard-reachable and not rely on hover alone (WCAG)\n- `sortable-table` - Data tables must support sorting with aria-sort indicating current sort state (WCAG)\n- `axis-readability` - Axis ticks must not be cramped; maintain readable spacing, auto-skip on small screens\n- `data-density` - Limit information density per chart to avoid cognitive overload; split into multiple charts if needed\n- `trend-emphasis` - Emphasize data trends over decoration; avoid heavy gradients\u002Fshadows that obscure the data\n- `gridline-subtle` - Grid lines should be low-contrast (e.g. gray-200) so they don't compete with data\n- `focusable-elements` - Interactive chart elements (points, bars, slices) must be keyboard-navigable (WCAG)\n- `screen-reader-summary` - Provide a text summary or aria-label describing the chart's key insight for screen readers (WCAG)\n- `error-state-chart` - Data load failure must show error message with retry action, not a broken\u002Fempty chart\n- `export-option` - For data-heavy products, offer CSV\u002Fimage export of chart data\n- `drill-down-consistency` - Drill-down interactions must maintain a clear back-path and hierarchy breadcrumb\n- `time-scale-clarity` - Time series charts must clearly label time granularity (day\u002Fweek\u002Fmonth) and allow switching\n\n## How to Use\n\nSearch specific domains using the CLI tool below.\n\n---\n# Prerequisites\n\nThe bundled scripts require Python 3 (standard library only — no third-party packages, no network access). Check if it is available:\n\n```bash\npython3 --version || python --version\n```\n\nIf Python is not installed, **do not install it yourself**. Stop and ask the user to install Python 3 using their preferred method (e.g. from [python.org](https:\u002F\u002Fwww.python.org\u002Fdownloads\u002F) or their OS package manager), then continue once it is available. Never run package-manager or system-modifying commands (`sudo`, `brew`, `apt`, `winget`, etc.) on the user's machine for this skill.\n\nIf the user prefers not to install Python, skip the CLI searches and rely on the Quick Reference sections above.\n\n> **Note:** On Windows, use `python` instead of `python3` to run scripts (e.g., `python scripts\u002Fsearch.py` instead of `python3 scripts\u002Fsearch.py`).\n\n---\n\n## How to Use This Skill\n\nUse this skill when the user requests any of the following:\n\n| Scenario | Trigger Examples | Start From |\n|----------|-----------------|------------|\n| **New project \u002F page** | \"做一个 landing page\"、\"Build a dashboard\" | Step 1 → Step 2 (design system) |\n| **New component** | \"Create a pricing card\"、\"Add a modal\" | Step 3 (domain search: style, ux) |\n| **Choose style \u002F color \u002F font** | \"What style fits a fintech app?\"、\"推荐配色\" | Step 2 (design system) |\n| **Review existing UI** | \"Review this page for UX issues\"、\"检查无障碍\" | Quick Reference checklist above |\n| **Fix a UI bug** | \"Button hover is broken\"、\"Layout shifts on load\" | Quick Reference → relevant section |\n| **Improve \u002F optimize** | \"Make this faster\"、\"Improve mobile experience\" | Step 3 (domain search: ux, react) |\n| **Implement dark mode** | \"Add dark mode support\" | Step 3 (domain: style \"dark mode\") |\n| **Add charts \u002F data viz** | \"Add an analytics dashboard chart\" | Step 3 (domain: chart) |\n| **Stack best practices** | \"React performance tips\"、\"SwiftUI navigation\" | Step 4 (stack search) |\n\nFollow this workflow:\n\n### Step 1: Analyze User Requirements\n\nExtract key information from user request:\n- **Product type**: Entertainment (social, video, music, gaming), Tool (scanner, editor, converter), Productivity (task manager, notes, calendar), or hybrid\n- **Target audience**: C-end consumer users; consider age group, usage context (commute, leisure, work)\n- **Style keywords**: playful, vibrant, minimal, dark mode, content-first, immersive, etc.\n- **Stack**: React Native (this project's only tech stack)\n\n### Step 2: Generate Design System (REQUIRED)\n\n**Always start with `--design-system`** to get comprehensive recommendations with reasoning:\n\n```bash\npython3 skills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"\u003Cproduct_type> \u003Cindustry> \u003Ckeywords>\" --design-system [-p \"Project Name\"]\n```\n\nThis command:\n1. Searches domains in parallel (product, style, color, landing, typography)\n2. Applies reasoning rules from `ui-reasoning.csv` to select best matches\n3. Returns complete design system: pattern, style, colors, typography, effects\n4. Includes anti-patterns to avoid\n\n**Example:**\n```bash\npython3 skills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"beauty spa wellness service\" --design-system -p \"Serenity Spa\"\n```\n\n### Step 2b: Persist Design System (Master + Overrides Pattern)\n\nTo save the design system for **hierarchical retrieval across sessions**, add `--persist`:\n\n```bash\npython3 skills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"\u003Cquery>\" --design-system --persist -p \"Project Name\"\n```\n\nThis creates:\n- `design-system\u002FMASTER.md` — Global Source of Truth with all design rules\n- `design-system\u002Fpages\u002F` — Folder for page-specific overrides\n\n**With page-specific override:**\n```bash\npython3 skills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"\u003Cquery>\" --design-system --persist -p \"Project Name\" --page \"dashboard\"\n```\n\nThis also creates:\n- `design-system\u002Fpages\u002Fdashboard.md` — Page-specific deviations from Master\n\n**How hierarchical retrieval works:**\n1. When building a specific page (e.g., \"Checkout\"), first check `design-system\u002Fpages\u002Fcheckout.md`\n2. If the page file exists, its rules **override** the Master file\n3. If not, use `design-system\u002FMASTER.md` exclusively\n\n**Context-aware retrieval prompt:**\n```\nI am building the [Page Name] page. Please read design-system\u002FMASTER.md.\nAlso check if design-system\u002Fpages\u002F[page-name].md exists.\nIf the page file exists, prioritize its rules.\nIf not, use the Master rules exclusively.\nNow, generate the code...\n```\n\n### Step 2c: Design Dials (optional)\n\nThree optional 1-10 sliders that tune `--design-system` output without changing your query. Add any combination of them to the same command:\n\n```bash\npython3 skills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"\u003Cquery>\" --design-system --variance \u003C1-10> --motion \u003C1-10> --density \u003C1-10>\n```\n\n| Dial | Low (1-3) | Mid (4-7) | High (8-10) |\n|------|-----------|-----------|-------------|\n| `--variance` | Centered \u002F minimal (biases toward Minimalism-style categories) | Balanced \u002F modern | Bold \u002F asymmetric (biases toward Brutalism, Bento Grids) |\n| `--motion` | Subtle micro-interactions | Standard scroll\u002Fstagger motion | Complex choreography (pin, Flip, SplitText) |\n| `--density` | Spacious (24-96px spacing scale) | Standard (16-64px, current default) | Dense\u002Fdashboard (8-32px spacing scale) |\n\n- `--motion` attaches a ready-to-use GSAP snippet (with framework notes, Do\u002FDon't, and performance notes) pulled from `--domain gsap`, matched to the resolved tier (Subtle\u002FStandard\u002FComplex).\n- `--density` overrides the `--space-*` CSS variable table in the ASCII\u002Fmarkdown\u002FMASTER.md output — use it for dashboards (high) vs. marketing pages (low) without hand-editing tokens.\n- Leaving a dial unset keeps that part of the output exactly as it was before (no behavior change).\n\n**Example:**\n```bash\npython3 skills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"internal analytics dashboard\" --design-system --variance 8 --motion 7 --density 8 -p \"Ops Console\"\n```\n\n### Step 3: Supplement with Detailed Searches (as needed)\n\nAfter getting the design system, use domain searches to get additional details:\n\n```bash\npython3 skills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"\u003Ckeyword>\" --domain \u003Cdomain> [-n \u003Cmax_results>]\n```\n\n**When to use detailed searches:**\n\n| Need | Domain | Example |\n|------|--------|---------|\n| Product type patterns | `product` | `--domain product \"entertainment social\"` |\n| More style options | `style` | `--domain style \"glassmorphism dark\"` |\n| Color palettes | `color` | `--domain color \"entertainment vibrant\"` |\n| Font pairings | `typography` | `--domain typography \"playful modern\"` |\n| Chart recommendations | `chart` | `--domain chart \"real-time dashboard\"` |\n| UX best practices | `ux` | `--domain ux \"animation accessibility\"` |\n| Landing structure | `landing` | `--domain landing \"hero social-proof\"` |\n| React Native perf | `react` | `--domain react \"rerender memo list\"` |\n| App interface a11y | `web` | `--domain web \"accessibilityLabel touch safe-areas\"` |\n| AI prompt \u002F CSS keywords | `prompt` | `--domain prompt \"minimalism\"` |\n\n### Step 4: Stack Guidelines\n\nGet implementation-specific best practices for the user's stack:\n\n```bash\npython3 skills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"\u003Ckeyword>\" --stack \u003Cstack>\n```\n\n---\n\n## Search Reference\n\n### Available Domains\n\n| Domain | Use For | Example Keywords |\n|--------|---------|------------------|\n| `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service |\n| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism |\n| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern |\n| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service |\n| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof |\n| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie |\n| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading |\n| `gsap` | GSAP animation skeletons by intensity tier | scroll reveal, stagger, magnetic cursor, page transition |\n| `react` | React\u002FNext.js performance | waterfall, bundle, suspense, memo, rerender, cache |\n| `web` | App interface guidelines (iOS\u002FAndroid\u002FReact Native) | accessibilityLabel, touch targets, safe areas, Dynamic Type |\n| `prompt` | AI prompts, CSS keywords | (style name) |\n\n### Available Stacks\n\n| Stack | Focus |\n|-------|-------|\n| `react-native` | Components, Navigation, Lists |\n| `javafx` | Enterprise desktop apps, AtlantaFX themes, FXML, CSS, Controls, Binding, Threading, Packaging |\n\n**JavaFX enterprise examples:**\n\n```bash\npython3 skills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"atlantafx primer enterprise theme\" --stack javafx\npython3 skills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"enterprise tableview density permission\" --stack javafx\n```\n\n---\n\n## Example Workflow\n\n**User request:** \"Make an AI search homepage。\"\n\n### Step 1: Analyze Requirements\n- Product type: Tool (AI search engine)\n- Target audience: C-end users looking for fast, intelligent search\n- Style keywords: modern, minimal, content-first, dark mode\n- Stack: React Native\n\n### Step 2: Generate Design System (REQUIRED)\n\n```bash\npython3 skills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"AI search tool modern minimal\" --design-system -p \"AI Search\"\n```\n\n**Output:** Complete design system with pattern, style, colors, typography, effects, and anti-patterns.\n\n### Step 3: Supplement with Detailed Searches (as needed)\n\n```bash\n# Get style options for a modern tool product\npython3 skills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"minimalism dark mode\" --domain style\n\n# Get UX best practices for search interaction and loading\npython3 skills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"search loading animation\" --domain ux\n```\n\n### Step 4: Stack Guidelines\n\n```bash\npython3 skills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"list performance navigation\" --stack react-native\n```\n\n**Then:** Synthesize design system + detailed searches and implement the design.\n\n---\n\n## Output Formats\n\nThe `--design-system` flag supports two output formats:\n\n```bash\n# ASCII box (default) - best for terminal display\npython3 skills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"fintech crypto\" --design-system\n\n# Markdown - best for documentation\npython3 skills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py \"fintech crypto\" --design-system -f markdown\n```\n\n---\n\n## Tips for Better Results\n\n### Query Strategy\n\n- Use **multi-dimensional keywords** — combine product + industry + tone + density: `\"entertainment social vibrant content-dense\"` not just `\"app\"`\n- Try different keywords for the same need: `\"playful neon\"` → `\"vibrant dark\"` → `\"content-first minimal\"`\n- Use `--design-system` first for full recommendations, then `--domain` to deep-dive any dimension you're unsure about\n- Add `--stack \u003Cstack>` for implementation-specific guidance when the target stack is known\n\n### Common Sticking Points\n\n| Problem | What to Do |\n|---------|------------|\n| Can't decide on style\u002Fcolor | Re-run `--design-system` with different keywords |\n| Dark mode contrast issues | Quick Reference §6: `color-dark-mode` + `color-accessible-pairs` |\n| Animations feel unnatural | Quick Reference §7: `spring-physics` + `easing` + `exit-faster-than-enter` |\n| Form UX is poor | Quick Reference §8: `inline-validation` + `error-clarity` + `focus-management` |\n| Navigation feels confusing | Quick Reference §9: `nav-hierarchy` + `bottom-nav-limit` + `back-behavior` |\n| Layout breaks on small screens | Quick Reference §5: `mobile-first` + `breakpoint-consistency` |\n| Performance \u002F jank | Quick Reference §3: `virtualize-lists` + `main-thread-budget` + `debounce-throttle` |\n\n### Pre-Delivery Checklist\n\n- Run `--domain ux \"animation accessibility z-index loading\"` as a UX validation pass before implementation\n- Run through Quick Reference **§1–§3** (CRITICAL + HIGH) as a final review\n- Test on 375px (small phone) and landscape orientation\n- Verify behavior with **reduced-motion** enabled and **Dynamic Type** at largest size\n- Check dark mode contrast independently (don't assume light mode values work)\n- Confirm all touch targets ≥44pt and no content hidden behind safe areas\n\n---\n\n## Common Rules for Professional UI\n\nThese are frequently overlooked issues that make UI look unprofessional:\nScope notice: The rules below are for App UI (iOS\u002FAndroid\u002FReact Native\u002FFlutter), not desktop-web interaction patterns.\n\n### Icons & Visual Elements\n\n- 默认图标库使用 **Phosphor (`@phosphor-icons\u002Freact`)**。`src\u002Fui-ux-pro-max\u002Fdata\u002Ficons.csv` 中列出的只是常用推荐图标，不是完整集合。\n- 当推荐表中找不到合适的图标时：\n  - **优先继续从 Phosphor 的完整图标集中选择任何语义更贴切的图标**；\n  - 如果 Phosphor 也没有理想选项，可以使用 **Heroicons (`@heroicons\u002Freact`)** 作为备选，注意保持风格一致（线性\u002F填充、笔画粗细、圆角风格）。\n\n| Rule | Standard | Avoid | Why It Matters |\n|------|----------|--------|----------------|\n| **No Emoji as Structural Icons** | Use vector-based icons (e.g., Phosphor `@phosphor-icons\u002Freact`, Heroicons `@heroicons\u002Freact`, react-native-vector-icons, @expo\u002Fvector-icons). | Using emojis (🎨 🚀 ⚙️) for navigation, settings, or system controls. | Emojis are font-dependent, inconsistent across platforms, and cannot be controlled via design tokens. |\n| **Vector-Only Assets** | Use SVG or platform vector icons that scale cleanly and support theming. | Raster PNG icons that blur or pixelate. | Ensures scalability, crisp rendering, and dark\u002Flight mode adaptability. |\n| **Stable Interaction States** | Use color, opacity, or elevation transitions for press states without changing layout bounds. | Layout-shifting transforms that move surrounding content or trigger visual jitter. | Prevents unstable interactions and preserves smooth motion\u002Fperceived quality on mobile. |\n| **Correct Brand Logos** | Use official brand assets and follow their usage guidelines (spacing, color, clear space). | Guessing logo paths, recoloring unofficially, or modifying proportions. | Prevents brand misuse and ensures legal\u002Fplatform compliance. |\n| **Consistent Icon Sizing** | Define icon sizes as design tokens (e.g., icon-sm, icon-md = 24pt, icon-lg). | Mixing arbitrary values like 20pt \u002F 24pt \u002F 28pt randomly. | Maintains rhythm and visual hierarchy across the interface. |\n| **Stroke Consistency** | Use a consistent stroke width within the same visual layer (e.g., 1.5px or 2px). | Mixing thick and thin stroke styles arbitrarily. | Inconsistent strokes reduce perceived polish and cohesion. |\n| **Filled vs Outline Discipline** | Use one icon style per hierarchy level. | Mixing filled and outline icons at the same hierarchy level. | Maintains semantic clarity and stylistic coherence. |\n| **Touch Target Minimum** | Minimum 44×44pt interactive area (use hitSlop if icon is smaller). | Small icons without expanded tap area. | Meets accessibility and platform usability standards. |\n| **Icon Alignment** | Align icons to text baseline and maintain consistent padding. | Misaligned icons or inconsistent spacing around them. | Prevents subtle visual imbalance that reduces perceived quality. |\n| **Icon Contrast** | Follow WCAG contrast standards: 4.5:1 for small elements, 3:1 minimum for larger UI glyphs. | Low-contrast icons that blend into the background. | Ensures accessibility in both light and dark modes. |\n\n\n### Interaction (App)\n\n| Rule | Do | Don't |\n|------|----|----- |\n| **Tap feedback** | Provide clear pressed feedback (ripple\u002Fopacity\u002Felevation) within 80-150ms | No visual response on tap |\n| **Animation timing** | Keep micro-interactions around 150-300ms with platform-native easing | Instant transitions or slow animations (>500ms) |\n| **Accessibility focus** | Ensure screen reader focus order matches visual order and labels are descriptive | Unlabeled controls or confusing focus traversal |\n| **Disabled state clarity** | Use disabled semantics (`disabled`\u002Fnative disabled props), reduced emphasis, and no tap action | Controls that look tappable but do nothing |\n| **Touch target minimum** | Keep tap areas >=44x44pt (iOS) or >=48x48dp (Android), expand hit area when icon is smaller | Tiny tap targets or icon-only hit areas without padding |\n| **Gesture conflict prevention** | Keep one primary gesture per region and avoid nested tap\u002Fdrag conflicts | Overlapping gestures causing accidental actions |\n| **Semantic native controls** | Prefer native interactive primitives (`Button`, `Pressable`, platform equivalents) with proper accessibility roles | Generic containers used as primary controls without semantics |\n\n### Light\u002FDark Mode Contrast\n\n| Rule | Do | Don't |\n|------|----|----- |\n| **Surface readability (light)** | Keep cards\u002Fsurfaces clearly separated from background with sufficient opacity\u002Felevation | Overly transparent surfaces that blur hierarchy |\n| **Text contrast (light)** | Maintain body text contrast >=4.5:1 against light surfaces | Low-contrast gray body text |\n| **Text contrast (dark)** | Maintain primary text contrast >=4.5:1 and secondary text >=3:1 on dark surfaces | Dark mode text that blends into background |\n| **Border and divider visibility** | Ensure separators are visible in both themes (not just light mode) | Theme-specific borders disappearing in one mode |\n| **State contrast parity** | Keep pressed\u002Ffocused\u002Fdisabled states equally distinguishable in light and dark themes | Defining interaction states for one theme only |\n| **Token-driven theming** | Use semantic color tokens mapped per theme across app surfaces\u002Ftext\u002Ficons | Hardcoded per-screen hex values |\n| **Scrim and modal legibility** | Use a modal scrim strong enough to isolate foreground content (typically 40-60% black) | Weak scrim that leaves background visually competing |\n\n### Layout & Spacing\n\n| Rule | Do | Don't |\n|------|----|----- |\n| **Safe-area compliance** | Respect top\u002Fbottom safe areas for all fixed headers, tab bars, and CTA bars | Placing fixed UI under notch, status bar, or gesture area |\n| **System bar clearance** | Add spacing for status\u002Fnavigation bars and gesture home indicator | Let tappable content collide with OS chrome |\n| **Consistent content width** | Keep predictable content width per device class (phone\u002Ftablet) | Mixing arbitrary widths between screens |\n| **8dp spacing rhythm** | Use a consistent 4\u002F8dp spacing system for padding\u002Fgaps\u002Fsection spacing | Random spacing increments with no rhythm |\n| **Readable text measure** | Keep long-form text readable on large devices (avoid edge-to-edge paragraphs on tablets) | Full-width long text that hurts readability |\n| **Section spacing hierarchy** | Define clear vertical rhythm tiers (e.g., 16\u002F24\u002F32\u002F48) by hierarchy | Similar UI levels with inconsistent spacing |\n| **Adaptive gutters by breakpoint** | Increase horizontal insets on larger widths and in landscape | Same narrow gutter on all device sizes\u002Forientations |\n| **Scroll and fixed element coexistence** | Add bottom\u002Ftop content insets so lists are not hidden behind fixed bars | Scroll content obscured by sticky headers\u002Ffooters |\n\n---\n\n## Pre-Delivery Checklist\n\nBefore delivering UI code, verify these items:\nScope notice: This checklist is for App UI (iOS\u002FAndroid\u002FReact Native\u002FFlutter).\n\n### Visual Quality\n- [ ] No emojis used as icons (use SVG instead)\n- [ ] All icons come from a consistent icon family and style\n- [ ] Official brand assets are used with correct proportions and clear space\n- [ ] Pressed-state visuals do not shift layout bounds or cause jitter\n- [ ] Semantic theme tokens are used consistently (no ad-hoc per-screen hardcoded colors)\n\n### Interaction\n- [ ] All tappable elements provide clear pressed feedback (ripple\u002Fopacity\u002Felevation)\n- [ ] Touch targets meet minimum size (>=44x44pt iOS, >=48x48dp Android)\n- [ ] Micro-interaction timing stays in the 150-300ms range with native-feeling easing\n- [ ] Disabled states are visually clear and non-interactive\n- [ ] Screen reader focus order matches visual order, and interactive labels are descriptive\n- [ ] Gesture regions avoid nested\u002Fconflicting interactions (tap\u002Fdrag\u002Fback-swipe conflicts)\n\n### Light\u002FDark Mode\n- [ ] Primary text contrast >=4.5:1 in both light and dark mode\n- [ ] Secondary text contrast >=3:1 in both light and dark mode\n- [ ] Dividers\u002Fborders and interaction states are distinguishable in both modes\n- [ ] Modal\u002Fdrawer scrim opacity is strong enough to preserve foreground legibility (typically 40-60% black)\n- [ ] Both themes are tested before delivery (not inferred from a single theme)\n\n### Layout\n- [ ] Safe areas are respected for headers, tab bars, and bottom CTA bars\n- [ ] Scroll content is not hidden behind fixed\u002Fsticky bars\n- [ ] Verified on small phone, large phone, and tablet (portrait + landscape)\n- [ ] Horizontal insets\u002Fgutters adapt correctly by device size and orientation\n- [ ] 4\u002F8dp spacing rhythm is maintained across component, section, and page levels\n- [ ] Long-form text measure remains readable on larger devices (no edge-to-edge paragraphs)\n\n### Accessibility\n- [ ] All meaningful images\u002Ficons have accessibility labels\n- [ ] Form fields have labels, hints, and clear error messages\n- [ ] Color is not the only indicator\n- [ ] Reduced motion and dynamic text size are supported without layout breakage\n- [ ] Accessibility traits\u002Froles\u002Fstates (selected, disabled, expanded) are announced correctly\n",{"name":5,"description":7},"main","31458d7e0e08a7b3494c27bf2b912ed41c87a138",".codex\u002Fskills\u002Fui-ux-pro-max",0,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison","https:\u002F\u002Fgongiskhan.github.io\u002Fagent-garrison\u002F","https:\u002F\u002Fgithub.com\u002Fgongiskhan","2026-11-07 05:27:23",{"source":8,"skillName":5,"commands":55,"prompt":65,"zipAvailable":66},[56,59,62],{"tool":57,"command":58},"npx","npx skills add gongiskhan\u002Fagent-garrison --skill ui-ux-pro-max",{"tool":60,"command":61},"bunx","bunx skills add gongiskhan\u002Fagent-garrison --skill ui-ux-pro-max",{"tool":63,"command":64},"pnpm","pnpm dlx skills add gongiskhan\u002Fagent-garrison --skill ui-ux-pro-max","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002FSKILL.md",true,[68,74,78,82,86,90,94,98,102,106,110,114,118,122,126,130,134,138,142,146,150,154,158,162,166,170,174,178,182,186,190,194,198,202,206,210,216,220],{"path":69,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":72,"sourceHtmlUrl":73},"data\u002Fapp-interface.csv","ASSET","资产文件",9743,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fapp-interface.csv",{"path":75,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":76,"sourceHtmlUrl":77},"data\u002Fcharts.csv",19365,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fcharts.csv",{"path":79,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":80,"sourceHtmlUrl":81},"data\u002Fcolors.csv",38668,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fcolors.csv",{"path":83,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":84,"sourceHtmlUrl":85},"data\u002Fgoogle-fonts.csv",743272,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fgoogle-fonts.csv",{"path":87,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":88,"sourceHtmlUrl":89},"data\u002Ficons.csv",20637,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Ficons.csv",{"path":91,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":92,"sourceHtmlUrl":93},"data\u002Flanding.csv",16685,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Flanding.csv",{"path":95,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":96,"sourceHtmlUrl":97},"data\u002Fmotion.csv",10500,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fmotion.csv",{"path":99,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":100,"sourceHtmlUrl":101},"data\u002Fproducts.csv",73485,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fproducts.csv",{"path":103,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":104,"sourceHtmlUrl":105},"data\u002Freact-performance.csv",14822,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Freact-performance.csv",{"path":107,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":108,"sourceHtmlUrl":109},"data\u002Fstacks\u002Fangular.csv",18137,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fangular.csv",{"path":111,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":112,"sourceHtmlUrl":113},"data\u002Fstacks\u002Fastro.csv",11870,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fastro.csv",{"path":115,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":116,"sourceHtmlUrl":117},"data\u002Fstacks\u002Favalonia.csv",25626,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Favalonia.csv",{"path":119,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":120,"sourceHtmlUrl":121},"data\u002Fstacks\u002Fflutter.csv",10416,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fflutter.csv",{"path":123,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":124,"sourceHtmlUrl":125},"data\u002Fstacks\u002Fhtml-tailwind.csv",11305,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fhtml-tailwind.csv",{"path":127,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":128,"sourceHtmlUrl":129},"data\u002Fstacks\u002Fjavafx.csv",30871,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fjavafx.csv",{"path":131,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":132,"sourceHtmlUrl":133},"data\u002Fstacks\u002Fjetpack-compose.csv",8195,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fjetpack-compose.csv",{"path":135,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":136,"sourceHtmlUrl":137},"data\u002Fstacks\u002Flaravel.csv",18519,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Flaravel.csv",{"path":139,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":140,"sourceHtmlUrl":141},"data\u002Fstacks\u002Fnextjs.csv",12493,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fnextjs.csv",{"path":143,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":144,"sourceHtmlUrl":145},"data\u002Fstacks\u002Fnuxt-ui.csv",21230,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fnuxt-ui.csv",{"path":147,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":148,"sourceHtmlUrl":149},"data\u002Fstacks\u002Fnuxtjs.csv",16539,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fnuxtjs.csv",{"path":151,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":152,"sourceHtmlUrl":153},"data\u002Fstacks\u002Freact-native.csv",9983,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Freact-native.csv",{"path":155,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":156,"sourceHtmlUrl":157},"data\u002Fstacks\u002Freact.csv",12962,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Freact.csv",{"path":159,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":160,"sourceHtmlUrl":161},"data\u002Fstacks\u002Fshadcn.csv",15921,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fshadcn.csv",{"path":163,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":164,"sourceHtmlUrl":165},"data\u002Fstacks\u002Fsvelte.csv",11009,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fsvelte.csv",{"path":167,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":168,"sourceHtmlUrl":169},"data\u002Fstacks\u002Fswiftui.csv",10821,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fswiftui.csv",{"path":171,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":172,"sourceHtmlUrl":173},"data\u002Fstacks\u002Fthreejs.csv",44787,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fthreejs.csv",{"path":175,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":176,"sourceHtmlUrl":177},"data\u002Fstacks\u002Funo.csv",27471,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Funo.csv",{"path":179,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":180,"sourceHtmlUrl":181},"data\u002Fstacks\u002Fuwp.csv",22867,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fuwp.csv",{"path":183,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":184,"sourceHtmlUrl":185},"data\u002Fstacks\u002Fvue.csv",11006,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fvue.csv",{"path":187,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":188,"sourceHtmlUrl":189},"data\u002Fstacks\u002Fwinui.csv",25152,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fwinui.csv",{"path":191,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":192,"sourceHtmlUrl":193},"data\u002Fstacks\u002Fwpf.csv",22538,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstacks\u002Fwpf.csv",{"path":195,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":196,"sourceHtmlUrl":197},"data\u002Fstyles.csv",142602,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fstyles.csv",{"path":199,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":200,"sourceHtmlUrl":201},"data\u002Ftypography.csv",49830,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Ftypography.csv",{"path":203,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":204,"sourceHtmlUrl":205},"data\u002Fui-reasoning.csv",52908,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fui-reasoning.csv",{"path":207,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":208,"sourceHtmlUrl":209},"data\u002Fux-guidelines.csv",18667,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fdata\u002Fux-guidelines.csv",{"path":211,"resourceType":212,"resourceTypeDesc":213,"sizeBytes":214,"sourceHtmlUrl":215},"scripts\u002Fcore.py","SCRIPT","脚本",13231,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fcore.py",{"path":217,"resourceType":212,"resourceTypeDesc":213,"sizeBytes":218,"sourceHtmlUrl":219},"scripts\u002Fdesign_system.py",57828,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fdesign_system.py",{"path":221,"resourceType":212,"resourceTypeDesc":213,"sizeBytes":222,"sourceHtmlUrl":223},"scripts\u002Fsearch.py",6681,"https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002F.codex\u002Fskills\u002Fui-ux-pro-max\u002Fscripts\u002Fsearch.py",[225,237,247,258,270,299],{"skillNo":226,"name":227,"nameZh":6,"description":228,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":229,"categories":230,"keywords":231,"publishedAt":41},"01M71RTFA0HD83YBE1TE7DCE6B","pinned-helper","An owned skill the human has pinned so the Improver must not touch it.","https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002Ftests\u002Ffixtures\u002Fimprover\u002Fskills\u002Fpinned-helper\u002FSKILL.md",[],[232,233,234,235,236],"pinned helper","helper","human","touch","it",{"skillNo":238,"name":239,"nameZh":6,"description":240,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":241,"categories":242,"keywords":243,"publishedAt":41},"01M71RTDKBG0WQHPHKFZKFWDHF","legacy-helper","A rarely used helper kept around from an earlier workflow.","https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002Ftests\u002Ffixtures\u002Fimprover\u002Fskills\u002Flegacy-helper\u002FSKILL.md",[],[244,233,245,246],"Legacy","legacy helper","workflow",{"skillNo":248,"name":249,"nameZh":6,"description":250,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":251,"categories":252,"keywords":253,"publishedAt":41},"01M71RTCC6ZVVJ9MHHESXPHWA6","human-notes","A human-authored skill not deployed by APM (loose, not in the lock).","https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002Ftests\u002Ffixtures\u002Fimprover\u002Fskills\u002Fhuman-notes\u002FSKILL.md",[],[254,234,255,256,257],"notes","human notes","lock","apm",{"skillNo":259,"name":260,"nameZh":6,"description":261,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":262,"categories":263,"keywords":264,"publishedAt":41},"01M71RTB83ZP6VK6XH19Z93FAC","garrison-helper","Helps compose and station Garrison Fittings into Faculty role slots.","https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002Ftests\u002Ffixtures\u002Fimprover\u002Fskills\u002Fgarrison-helper\u002FSKILL.md",[],[233,265,266,267,268,269],"garrison","garrison helper","slots","role","compose",{"skillNo":271,"name":272,"nameZh":6,"description":273,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":274,"categories":275,"keywords":279,"publishedAt":41},"01M71RT6MBGJC4QQZBGHF4H1M8","walkthrough","Record a short, narrated, captioned video walkthrough that proves a finished coding task and shows how it behaves, then self-verify the video via vision on extracted frames and publish it as one scrubbable Tailscale link. Use after completing a change\u002Ffix\u002Ffeature on a web project (Next.js\u002FReact etc.) when the user wants visual proof of work, a demo of a user flow, or to avoid manually retesting and watching a long raw screen recording. Triggers on requests like \"record a walkthrough\", \"show me it working\", \"make a demo video of this\", \"prove the feature\", or finishing a UI\u002Froute\u002Fform\u002FAPI change worth demonstrating. Not for walking through a full from-scratch project build.","https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002Ffittings\u002Fseed\u002Fwalkthrough\u002F.apm\u002Fskills\u002Fwalkthrough\u002FSKILL.md",[276],{"categoryNo":277,"categoryName":278,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000016","图像与多媒体",[272,280,281,282,283,284,285,286,287,288,289,290,291,292,293,294,295,296,297,298],"when","project","project build","api","react","change","demo video","publish","recording","Video","show me","work","short","fix","show","route","me","next","self",{"skillNo":300,"name":301,"nameZh":6,"description":302,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":303,"categories":304,"keywords":305,"publishedAt":41},"01M71RT54T0SQS42XEP5FVQ28K","Trello","Manage tasks via Trello REST API.","https:\u002F\u002Fgithub.com\u002Fgongiskhan\u002Fagent-garrison\u002Fblob\u002Fmain\u002Ffittings\u002Fseed\u002Ftrello\u002F.apm\u002Fskills\u002Ftrello\u002FSKILL.md",[],[306,307,308,283,309,310,311],"trello","tasks","REST","manage","rest api","via"]