flutter-uilisted

# /supergraph:flutter-ui Build pixel-faithful Flutter UI grounded in the project's own design system. Announce: "🎨 /supergraph:flutter-ui — scanning project design system..." ## Input modes - **Figma MCP** — user provides a Figma URL or node ID - **Image** — user provides a screenshot or design image Figma URL: extract `fileKey` (after `/design/`) and `nodeId` (`node-id` param, replace `-` with `:`). --- ## Step 1 — Scan project design system ### 1a. Locate token files (prefer ripgrep, fallback to codebase-memory) ```bash # Prefer ripgrep — 10-20x faster than find|xargs grep; single pass covers all token types rg --type dart --type yaml -l "Color|Colors\.|TextStyle|fontSize|FontWeight|EdgeInsets|Radius|ThemeData|colorScheme" | grep -iE "color|theme|token|palette|constant|style|text|typo|font|dimen|size|spacing|radius" | head -20 # Fallback if rg not available: codebase-memory search_graph(project=CBM_PROJECT, query="Color TextStyle EdgeInsets") or serena get_symbols_overview find . \( -name "theme" -o -name "themes" \) -type d | head -10 ``` ### 1b. Extract token registry Read identified files and extract: - **Colors**: `grep -n "static.*Color\|Color(" <token_file> | head -40` → constant name → hex/Color value - **Text styles**: `grep -n "TextStyle\|fontSize\|FontWeight" <style_file> | head -40` → style name → fontSize + weight + color - **Spacing/sizing**: `grep -n "static.*double\|const.*= [0-9]" <dimen_file> | head -40` → constant name → value - **Theme**: `gre