ceo-orchestration 1.0.0

package/.claude/skills/frontend/accessibility-and-wcag/reference/charts-accessibility.yaml

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

package/.claude/skills/frontend/code-quality-and-typescript/SKILL.md

@@ -0,0 +1,167 @@
+---
+name: Code Quality & TypeScript
+description: TypeScript strict mode governance, ESLint rule strategy, type assertion audit, dead code detection, circular dependency prevention, `:any` evaluation criteria, naming conventions, and code review quality gates for the {{PROJECT_NAME}} frontend. Use when reviewing TypeScript health, configuring ESLint rules, auditing type assertions, cleaning dead code, enforcing naming conventions, or when any code needs quality review before merge.
+owner: Frontend Quality Lead (archetype) + Staff Code Reviewer (archetype)
+veto: Frontend Quality Lead VETO — any merge (quality gate final)
+# --- smart-loading fields (PLAN-083 Wave 0b sub-agent 0.7b) ---
+domain: frontend
+priority: 4
+risk_class: medium
+stack: [typescript, eslint]
+context_budget_tokens: 1200
+inactive_but_retained: false
+repo_profile_binding:
+  frontend: {active: true, priority: 2}
+  engine: {active: true, priority: 6}
+  fintech: {active: true, priority: 6}
+  trading-readonly: {active: true, priority: 7}
+  generic: {active: true, priority: 5}
+activation_triggers:
+  - {event: file-edit, glob: "**/*.ts"}
+  - {event: file-edit, glob: "**/*.tsx"}
+  - {event: file-edit, glob: "**/tsconfig.json"}
+  - {event: file-edit, glob: "**/.eslintrc*"}
+  - {event: help-me-invoked, regex: "(?i)typescript|eslint|any.?type|lint|tsconfig"}
+---
+
+# Code Quality & TypeScript — {{PROJECT_NAME}} Frontend
+
+> **Owners:** Frontend Quality Lead (archetype) + Staff Code Reviewer (archetype)
+> **Scope:** `{{FRONTEND_REPO_PATH}}/src/` — the codebase
+> **VETO:** Frontend Quality Lead vetoes any merge that fails quality gates
+
+## Quality Lead Profile
+
+**Background:** 13 years in type systems and code quality. At Google, led the TypeScript migration of 2M+ lines from Closure Compiler. At Airbnb, built the eslint-config-airbnb used by 500K+ repos. Believes type safety is not overhead — it's documentation that the compiler verifies.
+
+**Superpower:** Reads a type assertion and knows if it's hiding a bug or working around a library gap. Distinguishes "necessary cast" from "lazy cast" in 2 seconds.
+
+**Mantra:** *"Every `:any` is a hole in your safety net. Every `as` is a promise the compiler can't verify."*
+
+## Quality Gates (MUST pass before merge)
+
+1. `npx tsc --noEmit` — 0 errors
+2. `npx vitest run` — 0 failures
+3. `npx eslint src/` — 0 errors (warnings tracked, reduced over time)
+4. No new `:any` types without justification comment
+5. No new `as unknown as` double-casts
+6. No new `@ts-ignore` or `@ts-expect-error`
+
+## TypeScript Strictness
+
+### Current Config (tsconfig.json)
+```json
+{
+  "strict": true,
+  "noUnusedLocals": true,
+  "noUnusedParameters": true,
+  "noFallthroughCasesInSwitch": true,
+  "noUncheckedIndexedAccess": true
+}
+```
+All flags enabled. This is above-average strictness. **Never relax these.**
+
+### `:any` Evaluation Criteria
+
+| Verdict | When to use |
+|---------|------------|
+| **REJECT** | Lazy typing — developer didn't bother to type the data |
+| **REJECT** | API response without interface — create the interface |
+| **ACCEPT** | Recharts/chart library formatter callbacks (library types are incomplete) |
+| **ACCEPT** | i18next `t` function edge cases (TFunction generics are complex) |
+| **DOCUMENT** | Any accepted `:any` MUST have inline comment explaining why |
+
+### Type Assertion Tiers
+
+| Pattern | Severity | Action |
+|---------|----------|--------|
+| `as SomeType` (single cast) | LOW | Acceptable when TypeScript can't infer (JSON.parse, API responses) |
+| `as unknown as SomeType` (double-cast) | HIGH | Almost always wrong. Fix the upstream type instead |
+| `x!` (non-null assertion) | MEDIUM | Acceptable in test files. In production, prefer optional chaining |
+| `as const` | NONE | Always fine — narrows types |
+| `as any` | CRITICAL | Same as `:any` — evaluate per criteria above |
+
+### Current Metrics (V2 Audit 2026-03-24)
+- `:any` types: **6** in 5 files (target: 0 new)
+- `as unknown as`: **0** (was 13, all eliminated)
+- `as Type` assertions: **384** (high but many are API response typing)
+- `@ts-ignore`: **0**
+- `@ts-expect-error`: **0**
+
+## ESLint Strategy
+
+### Rule Promotion Path
+```
+OFF → warn (discovery) → error (enforcement)
+```
+
+### Current Rule Levels
+| Rule | Level | Target |
+|------|-------|--------|
+| `@typescript-eslint/no-explicit-any` | `error` | Stay `error` |
+| `@typescript-eslint/consistent-type-assertions` | `warn` | Promote to `error` after cleanup |
+| `@typescript-eslint/no-unnecessary-type-assertion` | `warn` | Promote to `error` after 77 fixes |
+| `no-console` | `error` (allow warn/error) | Stay `error` |
+| `react-hooks/exhaustive-deps` | `warn` | Promote to `error` after cleanup |
+| `react-hooks/purity` | `error` (React Compiler) | Fix all Date.now/ref violations |
+
+### ESLint Issue Categories
+
+| Category | Pattern | Fix Strategy |
+|----------|---------|-------------|
+| **Impure render** | `Date.now()` in render/useMemo | Move to useRef or state with interval |
+| **Ref in render** | `ref.current` access during render | Move to useEffect or event handler |
+| **Component in render** | Arrow function component inside render | Extract to module-level const |
+| **setState in effect** | Cascading renders | Convert to useMemo or restructure |
+| **Exhaustive deps** | Missing hook dependencies | Add dep or document exclusion |
+| **Preserve memoization** | useCallback/useMemo dep mismatch | Align deps with actual usage |
+
+## Dead Code Detection
+
+### Patterns to Check
+1. **Unused exports:** grep for export, then grep for import of that name
+2. **Unreachable routes:** Routes in App.tsx that redirect or are never navigated to
+3. **Unused components:** Components in shared/ imported by zero files
+4. **Phantom type assertions:** `as SomeType` where SomeType is the same as the inferred type
+
+### Current Dead Code
+- 5 redirect-only pages (FX, Macro, News, TechnicalAnalysis, Truf) — routes exist but just redirect
+
+## Circular Dependency Prevention
+
+### Rules
+1. **No circular imports** between modules (use `madge` to verify)
+2. **Dependency direction:** pages → components → hooks → lib → types
+3. **Engine isolation:** `src/engine/` should not import from `src/components/`
+4. **Store isolation:** Zustand stores should not import from components
+
+### Current State
+- 1 known circular dependency (documented in V1 audit)
+
+## Naming Conventions
+
+| Entity | Convention | Example |
+|--------|-----------|---------|
+| Components | PascalCase | `MarketPulse.tsx` |
+| Hooks | camelCase with `use` prefix | `useWSChannels.ts` |
+| Stores | camelCase with `use` prefix + `Store` suffix | `useTradingStore.ts` |
+| Query keys | Array with namespace prefix | `['engine', 'markets']` |
+| Types/Interfaces | PascalCase | `BookState`, `MarketData` |
+| Utils/lib | camelCase | `safeNumber`, `formatMarketPrice` |
+| Constants | UPPER_SNAKE_CASE | `BOOK_STALE_THRESHOLD_MS` |
+| CSS tokens | kebab-case | `var(--positive-dim)` |
+| i18n keys | dot.separated.lowercase | `billing.creditBalance` |
+
+## Code Review Checklist (Quality Lead + Staff Code Reviewer)
+
+Before approving any merge:
+- [ ] `tsc --noEmit` passes
+- [ ] `vitest run` passes
+- [ ] No new `:any` without justification
+- [ ] No new double-casts
+- [ ] No hardcoded English strings (use i18n)
+- [ ] No hardcoded colors (use DS tokens)
+- [ ] No `parseFloat` on financial data
+- [ ] No inline `style={{}}` on hot-path components
+- [ ] Error/loading/empty states handled
+- [ ] Accessibility: interactive elements have labels