Dev-side Blue Painter (v5+, Addendum B)

IDE extension for developers.

Dev-side Blue Painter is a Cursor/VS Code extension (v5+) that brings flow and buildability checks into your IDE. Analyze routes and components without leaving your editor.

Integration (Spec)

The extension provides: command palette commands, a sidebar view, and inline diagnostics (squiggles/warnings) in the editor for flow complexity, missing states, design system usage, and A11y/security flags visible from code.

Sidebar: Flow View (Spec)

For the current file/route, the sidebar shows a mini flow graph (upstream—what comes before—and downstream—what this route links to), buildability/complexity score, A11y/security score, and how many design system components are used.

Commands

  • Blue Painter: Analyze Current Route — Run analysis on the active file
  • Blue Painter: Show Flow for This Component — Mini flow graph (upstream/downstream)
  • Blue Painter: Compare with Design — Highlight design vs implementation gaps

Inline diagnostics

The extension underlines network calls without error/loading handling, code paths missing UX states, and places where design system components should be used. Example: "This form submits a payment but doesn't handle declined card errors. Design spec expects an error state."