Use whenever a task has a user-visible outcome — chart, overlay, UI state, route change. Before marking the task complete, take a chrome-devtools MCP screenshot (or evaluate_script against actual render state) and visually diff against the operator's reference. Type-check, lint, unit tests, and e2e all passing is NECESSARY but NOT SUFFICIENT for canvas/UI work — paint-time bugs hide from synthetic tests.
Use when resampling intraday futures bars (e.g. 4h, 8h) or weekly/monthly bars to a coarser timeframe. CME globex futures sessions run Sunday 18:00 ET → Friday 17:00 ET, NOT calendar weeks; intraday buckets a futures trader expects align to the 18:00 ET session open, NOT UTC midnight. Naive resampling produces bars that look right but are wrong by 4-6 hours.
Use when setting up a design system in a project where agents author UI. Mechanical grep-based CI guardrails ban inline style attributes, raw hex colors, and pixel literals in TSX files — forcing all styling through Tailwind classes that read from CSS-variable tokens. Without this, agents reach for `style={{...}}` and `color: "#FF6600"` whenever convenient and the design system silently rots.
Use when integrating TradingView lightweight-charts in a React/canvas app, especially when candles or overlays silently fail to render, the crosshair behaves unexpectedly, or color values appear to "do nothing." Covers data-domain alignment between candle and custom-series, isWhitespace data-stripping, the IChartApi vs ISeriesApi API split for crosshair, hex-only color requirements, and the time-collapse trick for collapsing market gaps.
Use when deciding where new UI state should live — URL params or localStorage. Rule of thumb operator-preference state (favorites, picture-in-picture geometry, panel layout, theme) goes in localStorage; chart-content state (symbol, granularity, indicator config) goes in the URL so links are shareable. Includes the cross-component reactivity pattern (custom event + storage event) and the watchlist-navigation trap that motivated the rule.
Use when starting a new feature in a project that uses agentic-loop development. Every feature gets a spec file with Outcome, Acceptance tests (checkboxes), Decisions (with Why + How-to-apply), and Known Limitations sections. Agent refuses to start work on a feature whose spec doesn't have acceptance tests. Prevents hallucinated requirements and gives the loop a measurable definition of "done."
Use when building a charting UI that needs to show the current in-progress candle correctly on page-load. Data providers return only closed bars, leaving a gap from bucket-start to "now" until live ticks arrive. Server must graft the partial bucket; client must seed the tick handler with it. Missing EITHER layer manifests as "the rightmost candle shows wrong OHLC" or "the chart appears stuck for the first few seconds after page-load."
Use when porting a TradingView Pine Script indicator (anchored VWAP, ATR bands, RSI divergence, custom Level, etc.) to TypeScript for a lightweight-charts based app. Pine is a bar-by-bar series-oriented DSL with specific semantics — anchor-reset, ohlc4, dotted vs dashed, color.new, plot vs hline, request.security() — that don't translate one-to-one to vanilla TS. This skill names the Pine concepts, their TS equivalents, and the gotchas that cost iterations.