@jack200714/mafw 4.5.1

package/.opencode/skills/ui-ux-pro-max/SKILL.md

@@ -0,0 +1,388 @@
+---
+name: ui-ux-pro-max
+description: UI/UX design intelligence with searchable database
+---
+# ui-ux-pro-max
+
+Comprehensive 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.
+
+# Prerequisites
+
+The bundled scripts require Python 3 (standard library only — no third-party packages, no network access). Check if it is available:
+
+```bash
+python3 --version || python --version
+```
+
+If 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://www.python.org/downloads/) 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.
+
+If the user prefers not to install Python, skip the CLI searches and rely on the Quick Reference sections above.
+
+> **Note:** On Windows, use `python` instead of `python3` to run scripts (e.g., `python scripts/search.py` instead of `python3 scripts/search.py`).
+
+---
+
+## How to Use This Skill
+
+Use this skill when the user requests any of the following:
+
+| Scenario | Trigger Examples | Start From |
+|----------|-----------------|------------|
+| **New project / page** | "做一个 landing page"、"Build a dashboard" | Step 1 → Step 2 (design system) |
+| **New component** | "Create a pricing card"、"Add a modal" | Step 3 (domain search: style, ux) |
+| **Choose style / color / font** | "What style fits a fintech app?"、"推荐配色" | Step 2 (design system) |
+| **Review existing UI** | "Review this page for UX issues"、"检查无障碍" | Quick Reference checklist above |
+| **Fix a UI bug** | "Button hover is broken"、"Layout shifts on load" | Quick Reference → relevant section |
+| **Improve / optimize** | "Make this faster"、"Improve mobile experience" | Step 3 (domain search: ux, react) |
+| **Implement dark mode** | "Add dark mode support" | Step 3 (domain: style "dark mode") |
+| **Add charts / data viz** | "Add an analytics dashboard chart" | Step 3 (domain: chart) |
+| **Stack best practices** | "React performance tips"、"SwiftUI navigation" | Step 4 (stack search) |
+
+Follow this workflow:
+
+### Step 1: Analyze User Requirements
+
+Extract key information from user request:
+- **Product type**: Entertainment (social, video, music, gaming), Tool (scanner, editor, converter), Productivity (task manager, notes, calendar), or hybrid
+- **Target audience**: C-end consumer users; consider age group, usage context (commute, leisure, work)
+- **Style keywords**: playful, vibrant, minimal, dark mode, content-first, immersive, etc.
+- **Stack**: whatever the user is actually building with — infer it from the project
+  (package.json, existing files, explicit request) or ask. Then load its rules with
+  `--stack <name>` (see "Available Stacks"). Do not assume React Native.
+- **Platform**: web or native app. Several sections below are scoped to App UI
+  (iOS/Android/React Native/Flutter) and do not apply to desktop-web work —
+  safe areas, haptics, bottom nav and Dynamic Type are mobile-only concerns.
+
+### Step 2: Generate Design System (REQUIRED)
+
+**Always start with `--design-system`** to get comprehensive recommendations with reasoning:
+
+```bash
+python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
+```
+
+This command:
+1. Searches domains in parallel (product, style, color, landing, typography)
+2. Applies reasoning rules from `ui-reasoning.csv` to select best matches
+3. Returns complete design system: pattern, style, colors, typography, effects
+4. Includes anti-patterns to avoid
+
+**Example:**
+```bash
+python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
+```
+
+### Step 2b: Persist Design System (Master + Overrides Pattern)
+
+To save the design system for **hierarchical retrieval across sessions**, add `--persist`:
+
+```bash
+python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"
+```
+
+This creates:
+- `design-system/MASTER.md` — Global Source of Truth with all design rules
+- `design-system/pages/` — Folder for page-specific overrides
+
+**With page-specific override:**
+```bash
+python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"
+```
+
+This also creates:
+- `design-system/pages/dashboard.md` — Page-specific deviations from Master
+
+**How hierarchical retrieval works:**
+1. When building a specific page (e.g., "Checkout"), first check `design-system/pages/checkout.md`
+2. If the page file exists, its rules **override** the Master file
+3. If not, use `design-system/MASTER.md` exclusively
+
+**Context-aware retrieval prompt:**
+```
+I am building the [Page Name] page. Please read design-system/MASTER.md.
+Also check if design-system/pages/[page-name].md exists.
+If the page file exists, prioritize its rules.
+If not, use the Master rules exclusively.
+Now, generate the code...
+```
+
+### Step 2c: Design Dials (optional)
+
+Three optional 1-10 sliders that tune `--design-system` output without changing your query. Add any combination of them to the same command:
+
+```bash
+python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --variance <1-10> --motion <1-10> --density <1-10>
+```
+
+| Dial | Low (1-3) | Mid (4-7) | High (8-10) |
+|------|-----------|-----------|-------------|
+| `--variance` | Centered / minimal (biases toward Minimalism-style categories) | Balanced / modern | Bold / asymmetric (biases toward Brutalism, Bento Grids) |
+| `--motion` | Subtle micro-interactions | Standard scroll/stagger motion | Complex choreography (pin, Flip, SplitText) |
+| `--density` | Spacious (24-96px spacing scale) | Standard (16-64px, current default) | Dense/dashboard (8-32px spacing scale) |
+
+- `--motion` attaches a ready-to-use GSAP snippet (with framework notes, Do/Don't, and performance notes) pulled from `--domain gsap`, matched to the resolved tier (Subtle/Standard/Complex).
+- `--density` overrides the `--space-*` CSS variable table in the ASCII/markdown/MASTER.md output — use it for dashboards (high) vs. marketing pages (low) without hand-editing tokens.
+- Leaving a dial unset keeps that part of the output exactly as it was before (no behavior change).
+
+**Example:**
+```bash
+python3 skills/ui-ux-pro-max/scripts/search.py "internal analytics dashboard" --design-system --variance 8 --motion 7 --density 8 -p "Ops Console"
+```
+
+### Step 3: Supplement with Detailed Searches (as needed)
+
+After getting the design system, use domain searches to get additional details:
+
+```bash
+python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
+```
+
+**When to use detailed searches:**
+
+| Need | Domain | Example |
+|------|--------|---------|
+| Product type patterns | `product` | `--domain product "entertainment social"` |
+| More style options | `style` | `--domain style "glassmorphism dark"` |
+| Color palettes | `color` | `--domain color "entertainment vibrant"` |
+| Font pairings | `typography` | `--domain typography "playful modern"` |
+| Chart recommendations | `chart` | `--domain chart "real-time dashboard"` |
+| UX best practices | `ux` | `--domain ux "animation accessibility"` |
+| Landing structure | `landing` | `--domain landing "hero social-proof"` |
+| React Native perf | `react` | `--domain react "rerender memo list"` |
+| App interface a11y | `web` | `--domain web "accessibilityLabel touch safe-areas"` |
+| Icon suggestions | `icons` | `--domain icons "navigation arrows"` |
+| Individual Google Fonts | `google-fonts` | `--domain google-fonts "variable sans serif"` |
+| GSAP animation snippets | `gsap` | `--domain gsap "scroll reveal stagger"` |
+
+### Step 4: Stack Guidelines
+
+Get implementation-specific best practices for the user's stack:
+
+```bash
+python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack <stack>
+```
+
+---
+
+## Search Reference
+
+### Available Domains
+
+| Domain | Use For | Example Keywords |
+|--------|---------|------------------|
+| `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service |
+| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism |
+| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern |
+| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service |
+| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof |
+| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie |
+| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading |
+| `gsap` | GSAP animation skeletons by intensity tier | scroll reveal, stagger, magnetic cursor, page transition |
+| `react` | React/Next.js performance | waterfall, bundle, suspense, memo, rerender, cache |
+| `web` | App interface guidelines (iOS/Android/React Native) | accessibilityLabel, touch targets, safe areas, Dynamic Type |
+| `icons` | Icon recommendations with import code | arrow, navigation, lucide, phosphor |
+| `google-fonts` | Individual Google Fonts lookup | sans serif, monospace, japanese, variable font, popular |
+
+### Available Stacks
+
+`react`, `nextjs`, `vue`, `svelte`, `astro`, `swiftui`, `react-native`, `flutter`, `nuxtjs`, `nuxt-ui`, `html-tailwind`, `shadcn`, `jetpack-compose`, `threejs`, `angular`, `laravel`, `javafx`, `wpf`, `winui`, `avalonia`, `uno`, `uwp`
+
+**JavaFX enterprise examples:**
+
+```bash
+python3 skills/ui-ux-pro-max/scripts/search.py "atlantafx primer enterprise theme" --stack javafx
+python3 skills/ui-ux-pro-max/scripts/search.py "enterprise tableview density permission" --stack javafx
+```
+
+---
+
+## Example Workflow
+
+**User request:** "Make an AI search homepage。"
+
+### Step 1: Analyze Requirements
+- Product type: Tool (AI search engine)
+- Target audience: C-end users looking for fast, intelligent search
+- Style keywords: modern, minimal, content-first, dark mode
+- Stack: React Native
+
+### Step 2: Generate Design System (REQUIRED)
+
+```bash
+python3 skills/ui-ux-pro-max/scripts/search.py "AI search tool modern minimal" --design-system -p "AI Search"
+```
+
+**Output:** Complete design system with pattern, style, colors, typography, effects, and anti-patterns.
+
+### Step 3: Supplement with Detailed Searches (as needed)
+
+```bash
+# Get style options for a modern tool product
+python3 skills/ui-ux-pro-max/scripts/search.py "minimalism dark mode" --domain style
+
+# Get UX best practices for search interaction and loading
+python3 skills/ui-ux-pro-max/scripts/search.py "search loading animation" --domain ux
+```
+
+### Step 4: Stack Guidelines
+
+```bash
+python3 skills/ui-ux-pro-max/scripts/search.py "list performance navigation" --stack react-native
+```
+
+**Then:** Synthesize design system + detailed searches and implement the design.
+
+---
+
+## Output Formats
+
+The `--design-system` flag supports two output formats:
+
+```bash
+# ASCII box (default) - best for terminal display
+python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
+
+# Markdown - best for documentation
+python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown
+```
+
+---
+
+## Tips for Better Results
+
+### Query Strategy
+
+- Use **multi-dimensional keywords** — combine product + industry + tone + density: `"entertainment social vibrant content-dense"` not just `"app"`
+- Try different keywords for the same need: `"playful neon"` → `"vibrant dark"` → `"content-first minimal"`
+- Use `--design-system` first for full recommendations, then `--domain` to deep-dive any dimension you're unsure about
+- Add `--stack <stack>` for implementation-specific guidance when the target stack is known
+
+### Common Sticking Points
+
+| Problem | What to Do |
+|---------|------------|
+| Can't decide on style/color | Re-run `--design-system` with different keywords |
+| Dark mode contrast issues | Quick Reference §6: `color-dark-mode` + `color-accessible-pairs` |
+| Animations feel unnatural | Quick Reference §7: `spring-physics` + `easing` + `exit-faster-than-enter` |
+| Form UX is poor | Quick Reference §8: `inline-validation` + `error-clarity` + `focus-management` |
+| Navigation feels confusing | Quick Reference §9: `nav-hierarchy` + `bottom-nav-limit` + `back-behavior` |
+| Layout breaks on small screens | Quick Reference §5: `mobile-first` + `breakpoint-consistency` |
+| Performance / jank | Quick Reference §3: `virtualize-lists` + `main-thread-budget` + `debounce-throttle` |
+
+### Pre-Delivery Checklist
+
+- Run `--domain ux "animation accessibility z-index loading"` as a UX validation pass before implementation
+- Run through Quick Reference **§1–§3** (CRITICAL + HIGH) as a final review
+- Test on 375px (small phone) and landscape orientation
+- Verify behavior with **reduced-motion** enabled and **Dynamic Type** at largest size
+- Check dark mode contrast independently (don't assume light mode values work)
+- Confirm all touch targets ≥44pt and no content hidden behind safe areas
+
+---
+
+## Common Rules for Professional UI
+
+These are frequently overlooked issues that make UI look unprofessional:
+Scope notice: The rules below are for App UI (iOS/Android/React Native/Flutter), not desktop-web interaction patterns.
+
+### Icons & Visual Elements
+
+- 默认图标库使用 **Phosphor (`@phosphor-icons/react`)**。`src/ui-ux-pro-max/data/icons.csv` 中列出的只是常用推荐图标，不是完整集合。
+- 当推荐表中找不到合适的图标时：
+  - **优先继续从 Phosphor 的完整图标集中选择任何语义更贴切的图标**；
+  - 如果 Phosphor 也没有理想选项，可以使用 **Heroicons (`@heroicons/react`)** 作为备选，注意保持风格一致（线性/填充、笔画粗细、圆角风格）。
+
+| Rule | Standard | Avoid | Why It Matters |
+|------|----------|--------|----------------|
+| **No Emoji as Structural Icons** | Use vector-based icons (e.g., Phosphor `@phosphor-icons/react`, Heroicons `@heroicons/react`, react-native-vector-icons, @expo/vector-icons). | Using emojis (🎨 🚀 ⚙️) for navigation, settings, or system controls. | Emojis are font-dependent, inconsistent across platforms, and cannot be controlled via design tokens. |
+| **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/light mode adaptability. |
+| **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/perceived quality on mobile. |
+| **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/platform compliance. |
+| **Consistent Icon Sizing** | Define icon sizes as design tokens (e.g., icon-sm, icon-md = 24pt, icon-lg). | Mixing arbitrary values like 20pt / 24pt / 28pt randomly. | Maintains rhythm and visual hierarchy across the interface. |
+| **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. |
+| **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. |
+| **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. |
+| **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. |
+| **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. |
+
+
+### Interaction (App)
+
+| Rule | Do | Don't |
+|------|----|----- |
+| **Tap feedback** | Provide clear pressed feedback (ripple/opacity/elevation) within 80-150ms | No visual response on tap |
+| **Animation timing** | Keep micro-interactions around 150-300ms with platform-native easing | Instant transitions or slow animations (>500ms) |
+| **Accessibility focus** | Ensure screen reader focus order matches visual order and labels are descriptive | Unlabeled controls or confusing focus traversal |
+| **Disabled state clarity** | Use disabled semantics (`disabled`/native disabled props), reduced emphasis, and no tap action | Controls that look tappable but do nothing |
+| **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 |
+| **Gesture conflict prevention** | Keep one primary gesture per region and avoid nested tap/drag conflicts | Overlapping gestures causing accidental actions |
+| **Semantic native controls** | Prefer native interactive primitives (`Button`, `Pressable`, platform equivalents) with proper accessibility roles | Generic containers used as primary controls without semantics |
+
+### Light/Dark Mode Contrast
+
+| Rule | Do | Don't |
+|------|----|----- |
+| **Surface readability (light)** | Keep cards/surfaces clearly separated from background with sufficient opacity/elevation | Overly transparent surfaces that blur hierarchy |
+| **Text contrast (light)** | Maintain body text contrast >=4.5:1 against light surfaces | Low-contrast gray body text |
+| **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 |
+| **Border and divider visibility** | Ensure separators are visible in both themes (not just light mode) | Theme-specific borders disappearing in one mode |
+| **State contrast parity** | Keep pressed/focused/disabled states equally distinguishable in light and dark themes | Defining interaction states for one theme only |
+| **Token-driven theming** | Use semantic color tokens mapped per theme across app surfaces/text/icons | Hardcoded per-screen hex values |
+| **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 |
+
+### Layout & Spacing
+
+| Rule | Do | Don't |
+|------|----|----- |
+| **Safe-area compliance** | Respect top/bottom safe areas for all fixed headers, tab bars, and CTA bars | Placing fixed UI under notch, status bar, or gesture area |
+| **System bar clearance** | Add spacing for status/navigation bars and gesture home indicator | Let tappable content collide with OS chrome |
+| **Consistent content width** | Keep predictable content width per device class (phone/tablet) | Mixing arbitrary widths between screens |
+| **8dp spacing rhythm** | Use a consistent 4/8dp spacing system for padding/gaps/section spacing | Random spacing increments with no rhythm |
+| **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 |
+| **Section spacing hierarchy** | Define clear vertical rhythm tiers (e.g., 16/24/32/48) by hierarchy | Similar UI levels with inconsistent spacing |
+| **Adaptive gutters by breakpoint** | Increase horizontal insets on larger widths and in landscape | Same narrow gutter on all device sizes/orientations |
+| **Scroll and fixed element coexistence** | Add bottom/top content insets so lists are not hidden behind fixed bars | Scroll content obscured by sticky headers/footers |
+
+---
+
+## Pre-Delivery Checklist
+
+Before delivering UI code, verify these items:
+Scope notice: This checklist is for App UI (iOS/Android/React Native/Flutter).
+
+### Visual Quality
+- [ ] No emojis used as icons (use SVG instead)
+- [ ] All icons come from a consistent icon family and style
+- [ ] Official brand assets are used with correct proportions and clear space
+- [ ] Pressed-state visuals do not shift layout bounds or cause jitter
+- [ ] Semantic theme tokens are used consistently (no ad-hoc per-screen hardcoded colors)
+
+### Interaction
+- [ ] All tappable elements provide clear pressed feedback (ripple/opacity/elevation)
+- [ ] Touch targets meet minimum size (>=44x44pt iOS, >=48x48dp Android)
+- [ ] Micro-interaction timing stays in the 150-300ms range with native-feeling easing
+- [ ] Disabled states are visually clear and non-interactive
+- [ ] Screen reader focus order matches visual order, and interactive labels are descriptive
+- [ ] Gesture regions avoid nested/conflicting interactions (tap/drag/back-swipe conflicts)
+
+### Light/Dark Mode
+- [ ] Primary text contrast >=4.5:1 in both light and dark mode
+- [ ] Secondary text contrast >=3:1 in both light and dark mode
+- [ ] Dividers/borders and interaction states are distinguishable in both modes
+- [ ] Modal/drawer scrim opacity is strong enough to preserve foreground legibility (typically 40-60% black)
+- [ ] Both themes are tested before delivery (not inferred from a single theme)
+
+### Layout
+- [ ] Safe areas are respected for headers, tab bars, and bottom CTA bars
+- [ ] Scroll content is not hidden behind fixed/sticky bars
+- [ ] Verified on small phone, large phone, and tablet (portrait + landscape)
+- [ ] Horizontal insets/gutters adapt correctly by device size and orientation
+- [ ] 4/8dp spacing rhythm is maintained across component, section, and page levels
+- [ ] Long-form text measure remains readable on larger devices (no edge-to-edge paragraphs)
+
+### Accessibility
+- [ ] All meaningful images/icons have accessibility labels
+- [ ] Form fields have labels, hints, and clear error messages
+- [ ] Color is not the only indicator
+- [ ] Reduced motion and dynamic text size are supported without layout breakage
+- [ ] Accessibility traits/roles/states (selected, disabled, expanded) are announced correctly

package/.opencode/skills/ui-ux-pro-max/data/app-interface.csv

@@ -0,0 +1,31 @@
+No,Category,Issue,Keywords,Platform,Description,Do,Don't,Code Example Good,Code Example Bad,Severity
+1,Accessibility,Icon Button Labels,icon button accessibilityLabel,iOS/Android/React Native,Icon-only buttons must expose an accessible label,Set accessibilityLabel or label prop on icon buttons,Icon buttons without accessible names,"<Pressable accessibilityLabel=""Close""><XIcon /></Pressable>","<Pressable><XIcon /></Pressable>",Critical
+2,Accessibility,Form Control Labels,form input label accessibilityLabel,iOS/Android/React Native,All inputs must have a visible label and an accessibility label,Pair Text label with input and set accessibilityLabel,Inputs with placeholder only,"<View><Text>Email</Text><TextInput accessibilityLabel=""Email address"" /></View>","<TextInput placeholder=""Email"" /></View>",Critical
+3,Accessibility,Role & Traits,accessibilityRole accessibilityTraits,iOS/Android/React Native,Interactive elements must expose correct roles/traits,Use accessibilityRole/button/link/checkbox etc.,Rely on generic views with no roles,"<Pressable accessibilityRole=""button"">Submit</Pressable>","<View onTouchStart={submit}>Submit</View>",High
+4,Accessibility,Dynamic Updates,accessibilityLiveRegion announce,iOS/Android/React Native,Async status updates should be announced to screen readers,Use accessibilityLiveRegion or announceForAccessibility,Update text silently with no announcement,"<Text accessibilityLiveRegion=""polite"">{status}</Text>","<Text>{status}</Text>",Medium
+5,Accessibility,Decorative Icons,accessible={false} importantForAccessibility,iOS/Android/React Native,Decorative icons should be hidden from screen readers,Mark decorative icons as not accessible,Have screen reader read every icon,"<Icon accessible={false} importantForAccessibility=""no"" />","<Icon />",Medium
+6,Touch,Touch Target Size,touch 44x44 hitSlop,iOS/Android/React Native,Primary touch targets must be at least 44x44pt,Increase hitSlop or padding to meet minimum,Small icons with tiny touch area,"<Pressable hitSlop={10}><Icon /></Pressable>","<Pressable><Icon style={{ width: 16, height: 16 }} /></Pressable>",Critical
+7,Touch,Touch Spacing,touch spacing gap 8px,iOS/Android/React Native,Adjacent touch targets need enough spacing,Keep at least 8dp spacing between touchables,Cluster many buttons with no gap,"<View style={{ gap: 8 }}><Button ... /><Button ... /></View>","<View><Button ... /><Button ... /></View>",Medium
+8,Touch,Gesture Conflicts,scroll swipe back gesture,iOS/Android/React Native,Custom gestures must not break system scroll/back,Reserve horizontal swipes for carousels,Full-screen custom swipe conflicting with back,"HorizontalPager inside vertical ScrollView","PanResponder on full screen blocking back",High
+9,Navigation,Back Behavior,back handler navigation stack,iOS/Android/React Native,Back navigation should be predictable and preserve state,Use navigation.goBack and keep screen state,Reset stack or exit app unexpectedly,onPress={() => navigation.goBack()},"BackHandler.exitApp() on first press",Critical
+10,Navigation,Bottom Tabs,tab bar max items,iOS/Android/React Native,Bottom tab bar should have at most 5 primary items,Use 3–5 tabs and move extras to More/Settings,Overloaded tab bar with many icons,Home/Explore/Profile/Settings,"Home/Explore/Shop/Cart/Profile/Settings/More",Medium
+11,Navigation,Modal Escape,modal dismiss close affordance,iOS/Android/React Native,Modals/sheets must have clear close actions,Provide close button and swipe-down where platform expects,Trapping users in modal with no obvious exit,"<Modal><Button title=""Close"" onPress={onClose} /></Modal>","<Modal><View>{children}</View></Modal>",High
+12,State,Preserve Screen State,navigation preserve state,iOS/Android/React Native,Returning to a screen should restore its scroll and form state,Keep components mounted or persist state,Reset list scroll and form inputs on every visit,"<Tab.Navigator screenOptions={{ unmountOnBlur: false }}>","<Tab.Screen options={{ unmountOnBlur: true }} />",Medium
+13,Feedback,Loading Indicators,activity indicator skeleton,iOS/Android/React Native,Show visible feedback during network operations,Use ActivityIndicator or skeleton for >300ms operations,Leave button and screen frozen,"{loading ? <ActivityIndicator /> : <Button title=""Save"" />}", "<Button title=""Save"" onPress={submit} /> // no loading",High
+14,Feedback,Success Feedback,toast checkmark banner,iOS/Android/React Native,Confirm successful actions with brief feedback,Show toast/checkmark or banner,Complete actions silently with no confirmation,"showToast('Saved successfully')","// silently update state only",Medium
+15,Feedback,Error Feedback,inline error banner,iOS/Android/React Native,Show clear error messages near the problem,input-level error + summary banner,Only change border color with no explanation,"<TextInput ... /><Text style={{color:'red'}}>{error}</Text>","<TextInput style={{borderColor:'red'}} />",High
+16,Forms,Inline Validation,onBlur validation,iOS/Android/React Native,Validate inputs on blur or submit with clear messaging,Validate onBlur and onSubmit,Validate on every keystroke causing jank,"onBlur={() => validateEmail(value)}","onChangeText={v => validateEmail(v)} // every char",Medium
+17,Forms,Keyboard Type,keyboardType returnKeyType,iOS/Android/React Native,Use appropriate keyboardType and returnKeyType,Match email/tel/number/search types,Use default keyboard for all inputs,"<TextInput keyboardType=""email-address"" />","<TextInput keyboardType=""default"" />",Medium
+18,Forms,Auto Focus & Next,autoFocus blurOnSubmit onSubmitEditing,iOS/Android/React Native,Guide users through form fields with Next/Done flows,Use onSubmitEditing to focus next input,Force users to tap each field manually,"onSubmitEditing={() => nextRef.current?.focus()}","// no onSubmitEditing, manual tap only",Low
+19,Forms,Password Visibility,secureTextEntry toggle,iOS/Android/React Native,Allow toggling password visibility securely,Provide Show/Hide icon toggling secureTextEntry,Force users to type blind with no option,"<TextInput secureTextEntry={secure} /><Icon onPress={toggle} />","<TextInput secureTextEntry /> // no toggle",Medium
+20,Performance,Virtualize Long Lists,FlatList SectionList virtualization,iOS/Android/React Native,Use FlatList/SectionList for lists over ~50 items,Use keyExtractor and initialNumToRender appropriately,Render hundreds of items with ScrollView,"<FlatList data={items} renderItem={...} />","<ScrollView>{items.map(renderItem)}</ScrollView>",High
+21,Performance,Image Size & Cache,Image resize cache,iOS/Android/React Native,Use correctly sized and cached images,Use Image component with proper resizeMode and caching,Load full-resolution images everywhere,"<Image source={{uri}} resizeMode=""cover"" />","<Image source={require('4k.png')} /> // small avatar",Medium
+22,Performance,Debounce High-Freq Events,debounce scroll search,iOS/Android/React Native,Debounce scroll/search callbacks to avoid jank,Wrap handlers with debounce/throttle,Run heavy logic on every event,"onScroll={debouncedHandleScroll}","onScroll={handleScrollHeavy}",Medium
+23,Animation,Duration & Easing,animation duration easing,iOS/Android/React Native,Micro-interactions should be 150–300ms with native-like easing,Use ease-out for enter/ease-in for exit,Use long or linear animations for core UI,"Animated.timing(..., { duration: 200, easing: Easing.out(Easing.quad) })","Animated.timing(..., { duration: 800, easing: Easing.linear })",Medium
+24,Animation,Respect Reduced Motion,reduced motion accessibility,iOS/Android/React Native,Respect OS reduced-motion accessibility setting,Check reduceMotionEnabled and simplify animations,Ignore user motion preferences,"if (reduceMotionEnabled) skipAnimation()","Always run complex parallax animations",Critical
+25,Animation,Limited Continuous Motion,loop animation loader,iOS/Android/React Native,Reserve infinite animations for loaders and live data,Use looping only where necessary,Keep decorative elements looping forever,"Animated.loop(loaderAnim) for ActivityIndicator","Animated.loop(bounceAnim) on background icons",Medium
+26,Typography,Base Font Size,fontScale dynamic type,iOS/Android/React Native,Body text must be readable and support Dynamic Type,Use platform fontScale and at least 14–16pt base,Render critical text below 12pt,"<Text style={{ fontSize: 16 }}>Body</Text>","<Text style={{ fontSize: 10 }}>Body</Text>",High
+27,Typography,Dynamic Type Support,allowFontScaling adjustsFontSizeToFit,iOS/Android/React Native,Support system text scaling without breaking layout,Set allowFontScaling and test large text,Disable scaling on all text globally,"<Text allowFontScaling>{label}</Text>","<Text allowFontScaling={false}>{label}</Text>",High
+28,Safe Areas,Safe Area Insets,safe area insets notch gesture,iOS/Android/React Native,Content must not overlap notches/gesture bars,Wrap screens in SafeAreaView or apply insets,Place tappable content under system bars,"<SafeAreaView style={{ flex: 1 }}><Screen /></SafeAreaView>","<View style={{ flex: 1 }}><Screen /></View>",High
+29,Theming,Light/Dark Contrast,dark mode contrast tokens,iOS/Android/React Native,Ensure sufficient contrast in both light and dark themes,Use semantic tokens and test both themes,Reuse light-theme grays directly in dark mode,"colors.textPrimaryDark = '#F9FAFB'","colors.textPrimaryDark = '#9CA3AF' on '#111827'",High
+30,Anti-Pattern,No Gesture-Only Actions,gesture only hidden controls,iOS/Android/React Native,Don't rely solely on hidden gestures for core actions,Provide visible buttons in addition to gestures,Rely on swipe/shake only with no UI affordance,"Swipe to delete + visible Delete button","Only shake device to undo with no UI",Critical

package/.opencode/skills/ui-ux-pro-max/data/charts.csv

@@ -0,0 +1,26 @@
+No,Data Type,Keywords,Best Chart Type,Secondary Options,When to Use,When NOT to Use,Data Volume Threshold,Color Guidance,Accessibility Grade,Accessibility Notes,A11y Fallback,Library Recommendation,Interactive Level
+1,Trend Over Time,"trend, time-series, line, growth, timeline, progress",Line Chart,"Area Chart, Smooth Area","Data has a time axis; user needs to observe rise/fall trends or rate of change over a continuous period","Fewer than 4 data points (use stat card); more than 6 series (visual noise); no time dimension exists","<1000 pts: SVG; ≥1000 pts: Canvas + downsampling; >10000: aggregate to intervals","Primary: #0080FF. Multiple series: distinct colors + distinct line styles. Fill: 20% opacity",AA,"Differentiate series by line style (solid/dashed/dotted) not color alone. Add pattern overlays for colorblind users.","Dashed/dotted lines per series; togglable data table with timestamps and values","Chart.js, Recharts, ApexCharts",Hover + Zoom
+2,Compare Categories,"compare, categories, bar, comparison, ranking",Bar Chart (Horizontal or Vertical),"Column Chart, Grouped Bar","Comparing discrete categories by magnitude; ranking or ordering is the core insight; categories ≤ 15","Categories > 15 (use table or search); data has time dimension (use line); showing proportions (use waffle/stacked)","<20 categories: vertical bar; 20–50: horizontal bar; >50: paginated table","Each bar: distinct color. Grouped: same hue family. Always sort descending by value",AAA,"Value labels on each bar by default. Sort control for user reordering.","Value labels always visible; provide CSV export","Chart.js, Recharts, D3.js",Hover + Sort
+3,Part-to-Whole,"part-to-whole, pie, donut, percentage, proportion, share",Pie Chart or Donut,"Stacked Bar, Waffle Chart","≤5 categories; one dominant segment vs rest; emphasis on visual proportion over exact values","Categories > 5; slice differences < 5% (visually indistinguishable); user needs precise values; accessibility-first context","Max 6 slices; beyond that switch to stacked bar 100%","5–6 max colors. Contrasting palette. Largest slice at 12 o'clock. Always label slices with %",C,"Pie charts fail WCAG for colorblind users. Slices rely on color alone. Avoid as primary chart in a11y contexts.","Must provide stacked bar alternative + percentage data table as mandatory fallback","Chart.js, Recharts, D3.js",Hover + Drill
+4,Correlation / Distribution,"correlation, distribution, scatter, relationship, pattern, cluster",Scatter Plot or Bubble Chart,"Heat Map, Matrix","Exploring relationship between two continuous variables; identifying clusters or outliers in a dataset","Variables are categorical (use grouped bar); fewer than 20 points (patterns aren't meaningful); mobile-primary context","<500 pts: SVG; 500–5000: Canvas at 0.6–0.8 opacity; >5000: hexbin or aggregate first","Color axis: gradient (blue → red). Bubble size: relative to 3rd variable. Opacity: 0.6–0.8 to show density",B,"Provide data table alternative. Combine color + shape distinction for colorblind users.","Data table with correlation coefficient annotation; shape markers (circle/square/triangle) per group","D3.js, Plotly, Recharts",Hover + Brush
+5,Heatmap / Intensity,"heatmap, heat-map, intensity, density, matrix, calendar",Heat Map or Choropleth,"Grid Heat Map, Bubble Heat","Showing intensity/density across a 2D grid; time-based patterns (e.g., activity by hour × day)","Fewer than 20 cells (use bar); user needs to read exact values; colorblind users without pattern fallback","Up to 10,000 cells efficiently; beyond that aggregate; calendar heatmap: 365 cells max per SVG","Gradient: Cool (blue) to Hot (red). Divergent scale for ±data. Always include numeric color legend",B,"Pattern overlay for colorblind users. Numerical value on hover. Legend must include scale ticks.","Numerical overlay on hover; downloadable grid table with row/column labels","D3.js, Plotly, ApexCharts",Hover + Zoom
+6,Geographic Data,"geographic, map, location, region, geo, spatial, choropleth",Choropleth Map or Bubble Map,Geographic Heat Map,"Data has a regional/location dimension; spatial distribution is the core insight for the user","Regions have very different sizes making visual comparison misleading (use bar); mobile-primary context","<1000 regions: SVG; ≥1000: Canvas/WebGL (Deck.gl); global maps: tile-based rendering","Single color gradient per region group. Categorized colors for discrete types. Legend with clear scale breaks",B,"Include text labels for major regions. Provide keyboard navigation between regions.","Region text labels; sortable data table by region name and value; keyboard-navigable regions","D3.js, Mapbox, Leaflet",Pan + Zoom + Drill
+7,Funnel / Flow,"funnel, flow, conversion, drop-off, pipeline, stages",Funnel Chart or Sankey,Waterfall (for flows),"Sequential multi-stage process; showing conversion or drop-off rates between defined stages","Stages aren't sequential; values don't decrease monotonically (use bar); fewer than 3 stages","3–8 stages optimal; beyond 8 stages group minor steps into 'Other'","Stages: single color gradient (start → end). Show conversion % between each stage. Highlight biggest drop",AA,"Explicit conversion % as text per stage. Stage labels always visible. Linear list view as fallback.","Provide linear list view with stage name + count + drop-off %; keyboard traversal","D3.js, Recharts, Custom SVG",Hover + Drill
+8,Performance vs Target,"performance, target, kpi, gauge, goal, threshold, progress",Gauge Chart or Bullet Chart,"Dial, Thermometer","Single KPI measured against a defined target or threshold; dashboard summary context","No target or benchmark exists; comparing multiple KPIs at once (use bullet chart grid)","Single metric per gauge; for 3+ KPIs use bullet chart grid layout","Performance: Red → Yellow → Green gradient. Target: marker line. Threshold zones clearly differentiated",AA,"Always show numerical value + % of target as text beside chart. Never rely on color position alone.","Numerical value + % of target shown as visible text; ARIA live region for real-time updates","D3.js, ApexCharts, Custom SVG",Hover
+9,Time-Series Forecast,"forecast, prediction, confidence, band, projection, estimate",Line with Confidence Band,Ribbon Chart,"Historical data + model predictions; communicating uncertainty range to non-technical stakeholders","No historical baseline; prediction confidence is too low to be useful; audience is not data-literate","Keep historical window to 30–90 days for readability; forecast horizon ≤ 30% of visible x-axis range","Actual: solid line #0080FF. Forecast: dashed #FF9500. Confidence band: 15% opacity fill same hue",AA,"Toggle between actual-only and forecast views. Legend must distinguish lines beyond color (solid vs dashed).","Toggle actual/forecast independently; legend labels must include line-style description","Chart.js, ApexCharts, Plotly",Hover + Toggle
+10,Anomaly Detection,"anomaly, outlier, spike, alert, detection, monitoring, deviation",Line Chart with Highlights,Scatter with Alert,"Monitoring a time-series for outliers; alerting users to unexpected spikes or dips in operational data","Anomalies are predefined categories (use bar with highlight); real-time context without a pause control","Stream at ≤60fps with Canvas; batch: up to 10,000 pts; mark anomalies as a separate data layer","Normal: #0080FF solid line. Anomaly marker: #FF0000 circle + filled. Alert band: #FFF3CD background zone",AA,"Use shape marker (not color only) for anomaly points. Add text annotation per anomaly event.","Text alert annotation per anomaly; anomaly summary list panel alongside chart","D3.js, Plotly, ApexCharts",Hover + Alert
+11,Hierarchical / Nested Data,"hierarchy, nested, treemap, parent, children, breakdown, drill",Treemap,"Sunburst, Nested Donut, Icicle","Showing size relationships within a hierarchy; overview of proportional structure (e.g., budget breakdown)","Hierarchy depth > 3 levels (too complex to read); user needs to compare sibling values precisely","<200 nodes: SVG; 200–1000: Canvas; >1000: paginate or pre-filter before rendering","Parent nodes: distinct hues. Children: lighter shades of same hue. White separator borders: 2–3px",C,"Poor baseline accessibility. Always provide table alternative as primary view. Label all large areas.","Collapsible tree table as primary view; treemap as supplementary visual only","D3.js, Recharts, ApexCharts",Hover + Drilldown
+12,Flow / Process Data,"flow, process, sankey, distribution, source, target, transfer",Sankey Diagram,"Alluvial, Chord Diagram","Showing how quantities flow between nodes; multi-source multi-target distribution","Flow directions form loops (use network graph); fewer than 3 source-target pairs; mobile-primary context","<50 flows: SVG; ≥50: Canvas; >200 flows: aggregate minor flows into 'Other' node","Gradient from source to target color. Flow opacity: 0.4–0.6. Node labels always visible",C,"Structural flow charts cannot be conveyed by color alone. Provide flow table. Avoid on mobile.","Flow table (Source → Target → Value); keyboard-traversable node list with tab stops","D3.js (d3-sankey), Plotly",Hover + Drilldown
+13,Cumulative Changes,"waterfall, cumulative, variance, incremental, bridge, delta",Waterfall Chart,"Stacked Bar, Cascade","Showing how individual positive/negative components add up to a final total (e.g., P&L, budget variance)","Changes are not additive; more than 12 bars (readability breaks); audience expects a simple total","4–12 bars optimal; beyond 12 aggregate minor items into a single 'Other' bar","Increases: #4CAF50. Decreases: #F44336. Start total: #2196F3. End total: #0D47A1. Running total line: dashed",AA,"Color + directional arrow icon per bar (not color alone). Labels on every bar.","Table with running total column; directional arrow icons per row","ApexCharts, Highcharts, Plotly",Hover
+14,Multi-Variable Comparison,"radar, spider, multi-variable, attributes, dimensions, comparison",Radar / Spider Chart,"Parallel Coordinates, Grouped Bar","Comparing multiple entities across the same fixed set of attributes (e.g., product feature comparison)","Axes > 8 (unreadable); values need precise comparison (use grouped bar); audience unfamiliar with radar charts","2–3 datasets maximum per chart; 5–8 axes; beyond 8 axes switch to parallel coordinates","Single dataset: #0080FF at 20% fill. Multiple: distinct hues with 30% fill. Border: full opacity",B,"Limit axes to 5–8. Always provide grouped bar chart alternative for precise reading.","Grouped bar chart as mandatory alternative; include raw data table","Chart.js, Recharts, ApexCharts",Hover + Toggle
+15,Stock / Trading OHLC,"stock, trading, ohlc, candlestick, finance, price, volume",Candlestick Chart,"OHLC Bar, Heikin-Ashi","Financial time-series with Open/High/Low/Close data; trading or investment product context only","Non-financial audience; no OHLC data available (use line chart); accessibility-first context","Real-time: Canvas required. Historical: paginate by time range. Max 500 candles visible at once","Bullish: #26A69A. Bearish: #EF5350. Volume bars: 40% opacity below. Body fill vs hollow for OHLC style",B,"Provide OHLC data table. Colorblind: use fill vs outline pattern (bullish = filled, bearish = hollow).","OHLC data table with sortable columns; numeric summary panel (daily change %)","Lightweight Charts (TradingView), ApexCharts",Real-time + Hover + Zoom
+16,Relationship / Connection Data,"network, graph, nodes, edges, connections, relationships, force",Network Graph,"Hierarchical Tree, Adjacency Matrix","Mapping connections between entities; network topology or social graph exploration context","Node count > 500 without clustering pre-applied; user needs precise connection counts; mobile context","≤100 nodes: SVG; 101–500: Canvas; >500: must apply clustering/LOD before rendering","Node types: categorical colors. Edges: #90A4AE at 60% opacity. Highlight path: #F59E0B",D,"Fundamentally inaccessible without alternative. Never use as sole representation. Always provide list alternative.","Adjacency list table (Node A → Node B → Weight); hierarchical tree view when structure allows","D3.js (d3-force), Vis.js, Cytoscape.js",Drilldown + Hover + Drag
+17,Distribution / Statistical,"distribution, statistical, spread, median, outlier, quartile, boxplot",Box Plot,"Violin Plot, Beeswarm","Showing spread, median, and outliers of a dataset; comparing distributions across multiple groups","Fewer than 20 data points per group (distribution is not meaningful); audience unfamiliar with statistical charts","Any sample size; aggregated representation so rendering is ⚡ Excellent at any volume","Box fill: #BBDEFB. Border: #1976D2. Median line: #D32F2F bold. Outlier dots: #F44336",AA,"Include stats summary table. Annotate outlier count in chart subtitle.","Stats summary table (min / Q1 / median / Q3 / max / mean); outlier count annotation","Plotly, D3.js, Chart.js (plugin)",Hover
+18,Performance vs Target (Compact),"bullet, compact, kpi, dashboard, target, benchmark, range",Bullet Chart,"Gauge, Progress Bar","Dashboard with multiple KPIs side by side; space-constrained contexts where a gauge is too large","Single KPI with emphasis (use gauge); data has no defined target range; fewer than 3 KPIs","Ideal for 3–10 bullet charts in a grid; scales to any count efficiently","Qualitative ranges: #FFCDD2 / #FFF9C4 / #C8E6C9 (bad/ok/good). Performance bar: #1976D2. Target: black 3px marker",AAA,"All values always visible as text. Color ranges are labeled with text thresholds not color alone.","Numerical values always visible (not hover-only); color ranges labeled with threshold text","D3.js, Plotly, Custom SVG",Hover
+19,Proportional / Percentage,"waffle, percentage, proportion, progress, filled, grid",Waffle Chart,"Pictogram, Stacked Bar 100%","Showing what fraction of a whole is filled; percentage progress in a visually engaging and accessible format","More than 5 categories (use stacked bar); exact values matter over visual proportion; very tight space","10×10 grid standard (100 cells); for > 5 categories switch to stacked 100% bar","3–5 categories max. 2–3px gap between cells. Each category a distinct accessible color pair",AA,"Better than pie for accessibility. Percentage text label always visible. Each cell has aria-label.","Percentage text always visible; grid cells labeled with aria-label value; provide legend","D3.js, React-Waffle, Custom CSS Grid",Hover
+20,Hierarchical Proportional,"sunburst, hierarchy, nested, proportion, radial, circle",Sunburst Chart,"Treemap, Icicle, Circle Packing","Exploring nested proportions where both hierarchy and relative size matter (e.g., org spend breakdown)","More than 3 hierarchy levels (outer rings become unreadable); precision matters over overview; mobile","<100 nodes: SVG; 100–500: Canvas; >500: filter to top N before rendering","Center to outer: darker to lighter hue. Each level 15–20% lighter. Contrasting border between sectors",C,"Poor accessibility beyond 2 levels. Mandatory table alternative required for any production use.","Collapsible indented list with percentages; breadcrumb trail for current drill-down state","D3.js (d3-hierarchy), Recharts, ApexCharts",Drilldown + Hover
+21,Root Cause Analysis,"root cause, decomposition, tree, hierarchy, drill-down, ai-split, attribution",Decomposition Tree,"Decision Tree, Flow Chart","Decomposing a metric into contributing factors; AI-assisted analysis or BI drill-down scenarios","No clear parent-child causal relationship; audience expects a summary rather than exploration","Up to 5 levels deep; limit visible nodes to 20 per level for readability; lazy-load deeper levels","Positive impact nodes: #2563EB. Negative impact nodes: #EF4444. Neutral connectors: #94A3B8",AA,"Keyboard-navigable expand/collapse. Screen reader announces node value and % contribution.","Keyboard expand/collapse tree; screen reader announces node label + value + % impact","Power BI (native), React-Flow, Custom D3.js",Drill + Expand
+22,3D Spatial Data,"3d, spatial, immersive, terrain, molecular, volumetric, point-cloud",3D Scatter / Surface Plot,"Volumetric Rendering, Point Cloud","Scientific/engineering context where Z-axis carries essential info not expressible in 2D","2D projection conveys the same insight; mobile context; accessibility-required environments; standard business dashboards","WebGL required. Deck.gl: up to 1M points. Three.js: LOD required beyond 50,000 pts","Depth cues: lighting and shading. Z-axis: color gradient (cool → warm). Transparent overlapping: opacity 0.4",D,"3D spatial charts are fundamentally inaccessible. Must not be used as primary chart type in any product UI.","Mandatory 2D projection view + data table; do not use as primary chart type in product UI","Three.js, Deck.gl, Plotly 3D",Rotate + Zoom + VR
+23,Real-Time Streaming,"streaming, real-time, ticker, live, velocity, pulse, monitoring",Streaming Area Chart,"Ticker Tape, Moving Gauge","Live monitoring dashboards; IoT/ops data updating at ≥1 Hz; user needs current value at a glance","Update frequency < 1/min (use periodic-refresh line chart); flashing content without reduced-motion support","Canvas/WebGL required. Buffer last 60–300s of data. Downsample older data on scroll","Current pulse: #00FF00 (dark theme) or #0080FF (light theme). History: fading opacity. Grid: dark background",B,"Pause/resume control required. Current value as large visible text KPI. Respect prefers-reduced-motion.","Pause/resume button required; current value shown as large text KPI; prefers-reduced-motion: freeze animation","Smoothed D3.js, CanvasJS",Real-time + Pause + Zoom
+24,Sentiment / Emotion,"sentiment, emotion, nlp, opinion, feeling, text-analysis",Word Cloud with Sentiment,"Sentiment Arc, Radar Chart","NLP output visualization; exploratory analysis of text corpus sentiment; frequency-weighted keyword overview","Precise values matter (word size is inherently imprecise); screen-reader context; corpus < 50 items","50–5000 terms optimal. Beyond 5000: apply top-N filtering before render. Avoid on mobile","Positive: #22C55E. Negative: #EF4444. Neutral: #94A3B8. Word size maps to frequency",C,"Word clouds fail screen readers. Never use as sole output of NLP analysis. Always pair with list view.","Sortable list view by frequency with sentiment label column; word cloud as supplementary only","D3-cloud, Highcharts, Nivo",Hover + Filter
+25,Process Mining,"process, mining, variants, path, bottleneck, log, event",Process Map / Graph,"Directed Acyclic Graph (DAG), Petri Net","Analyzing event logs to visualize actual process flows; identifying bottlenecks and deviations in ops/product funnels","No event log data available; audience expects a static flowchart (use diagram tool); node count > 100 without pre-filtering","<30 nodes: SVG; 30–100: Canvas; >100: apply variant filtering (top 80% of cases) before rendering","Happy path: #10B981 thick line. Deviations: #F59E0B thin line. Bottleneck nodes: #EF4444 fill",B,"Complex graphs are hard to navigate. Provide path summary text. Highlight top 3 bottlenecks as annotations.","Path summary table (variant → frequency → avg duration); top 3 bottlenecks as text annotation panel","React-Flow, Cytoscape.js, Recharts",Drag + Node-Click