[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-openai-canvas2d-data-visualization":3,"mdc-qhwf97-key":36,"related-repo-openai-canvas2d-data-visualization":789,"related-org-openai-canvas2d-data-visualization":906},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":25,"repoUrl":26,"updatedAt":27,"license":28,"forks":29,"topics":30,"repo":31,"sourceUrl":34,"mdContent":35},"canvas2d-data-visualization","render data visualizations with Canvas2D","Render data visualizations with Canvas2D. Use when the visualization needs high mark counts, fast redraws, immediate-mode rendering, custom hit testing, or a hybrid Canvas plus SVG or HTML architecture.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"openai","OpenAI","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fopenai.png",[12,16,19,22],{"name":13,"slug":14,"type":15},"Data Visualization","data-visualization","tag",{"name":17,"slug":18,"type":15},"HTML","html",{"name":20,"slug":21,"type":15},"Charts","charts",{"name":23,"slug":24,"type":15},"Frontend","frontend",3992,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fplugins","2026-06-30T19:00:57.102",null,465,[],{"repoUrl":26,"stars":25,"forks":29,"topics":32,"description":33},[],"OpenAI Plugins","https:\u002F\u002Fgithub.com\u002Fopenai\u002Fplugins\u002Ftree\u002FHEAD\u002Fplugins\u002Fbuild-web-data-visualization\u002Fskills\u002Fcanvas2d-data-visualization","---\nname: canvas2d-data-visualization\ndescription: Render data visualizations with Canvas2D. Use when the visualization needs high mark counts, fast redraws, immediate-mode rendering, custom hit testing, or a hybrid Canvas plus SVG or HTML architecture.\n---\n\n# Canvas2D Data Visualization\n\n## Overview\n\nUse this skill when raster rendering is the practical choice. Canvas2D is strong for dense scatterplots, sparkline walls, heatmaps, streaming traces, tiled timelines, draggable analytical workspaces, and other views where SVG or DOM overhead becomes the limiting factor.\n\nDefault assumption: keep a retained scene model in application state even if the actual drawing is immediate-mode Canvas.\nAny visualization or interaction that can be built in SVG can usually be built in Canvas2D too, but the retained geometry, hit testing, focus model, and accessibility layer become the application's responsibility. Choose Canvas for performance or rendering control; keep SVG\u002FHTML when native DOM semantics, text, accessibility, or exportability matter more than redraw speed.\nCanvas2D can also be simpler or faster than WebGL for flat immediate-mode workloads because it avoids shader setup, buffer uploads, GPU context pressure, and custom WebGL lifecycle code. Move from Canvas2D to WebGL when GPU picking, shader effects, particle count, custom blending, smooth animation, true 3D, or high-volume geospatial layers justify that extra complexity.\n\nFor browser-facing Canvas work, use `..\u002F..\u002Freferences\u002Ffoundations\u002Fmobile-first-responsive-visualization.md` so backing-store size, hit testing, touch gestures, keyboard overlays, spotty connection states, and mobile performance budgets are part of the design contract.\n\n## Choose Canvas2D When\n\n- the chart needs tens of thousands to millions of marks\n- panning or zooming must feel fluid\n- the view updates continuously\n- the page needs many repeated microcharts such as sparklines in tables or KPI grids\n- many chart instances are visible at once and SVG node count would dominate layout, style, and memory cost\n- marks need custom clickable, hoverable, brushable, or draggable behavior over dense geometry\n- you can tolerate raster output or provide separate export paths\n- the chart benefits from layered drawing control, including static contextual backgrounds behind dense marks\n\nPrefer SVG, HTML, or a declarative grammar when the chart is small, static, text-heavy, annotation-heavy, primarily accessibility-driven, or needs straightforward copy\u002Fpaste\u002Feditable-vector export.\nPrefer WebGL or the Three.js\u002FWebGL skill when the chart needs GPU-scale particles, custom shaders, instancing, very large graph or point layers, 3D, or map overlays that Canvas2D would struggle to animate or pick interactively.\n\n## Core Practices\n\n1. Scale the backing store for browser zoom and high-DPI output:\n   - set CSS `style.width` and `style.height` in CSS pixels\n   - set the `canvas.width` and `canvas.height` attributes to `cssSize * pixelRatio`\n   - use `globalThis.devicePixelRatio || 1` as the page-zoom-aware ratio\n   - consider `visualViewport.scale` only when deliberately redrawing for pinch-zoom crispness\n   - reset the context with `ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0)` so drawing code can stay in CSS pixels\n2. Keep world-to-screen transforms explicit.\n3. Use layered canvases for:\n   - static background, including any field, court, floor plan, schematic, or other contextual surface\n   - primary marks\n   - highlight or hover state\n   - interaction overlays\n4. Avoid full redraws when partial invalidation is possible.\n5. Build deterministic hit testing:\n   - spatial index\n   - color picking buffer\n   - nearest-point search\n   - `Path2D` geometry replay against candidate subsets with `isPointInPath()` and `isPointInStroke()`\n   - analytic tests for simple shapes such as points, line segments, rectangles, intervals, and bands\n6. Assess how many Canvas instances may be visible at once, because backing-store size and redraw cost multiply quickly at dashboard scale.\n7. Treat pointer interaction as a first-class subsystem:\n   - normalize `PointerEvent.clientX\u002FclientY` through `getBoundingClientRect()`\n   - invert the current pan\u002Fzoom transform before mapping to data coordinates\n   - use `setPointerCapture()` for drags so movement continues outside the canvas\n   - clean up drag state on `pointerup`, `pointercancel`, and `lostpointercapture`\n   - use `touch-action` deliberately for touch and pen surfaces\n   - provide non-drag alternatives and enlarged invisible hit regions for small marks on coarse pointers\n   - keep keyboard and screen-reader affordances in HTML when Canvas marks are semantically important\n8. For mobile, define whether one-finger drag pans the chart or scrolls the page, whether pinch zoom is chart-owned or browser-owned, and how reset or explicit zoom controls work.\n\n## Hybrid Architecture\n\n- Canvas for bulk marks\n- SVG or HTML for axes, labels, legends, rich tooltips, menus, form controls, keyboard focus, and annotations\n- shared scales and transforms across both layers\n\nThis is usually better than forcing all responsibilities into Canvas. Use absolutely positioned HTML overlays for elements that need native layout, selection, input, focus rings, links, or accessible semantics; keep them synchronized by deriving every overlay position from the same world-to-screen transform used by the Canvas renderer.\nFor sparklines and other microcharts, nearby row labels, headers, and inline values usually work better than a shared detached legend.\n\n## Performance Defaults\n\n- batch draw calls\n- precompute style groups\n- use typed arrays for geometry-heavy views\n- cull off-screen marks\n- decimate or aggregate when the viewport cannot resolve individual points\n- use `OffscreenCanvas` and workers when main-thread contention is significant\n- keep text and annotations in HTML or SVG unless Canvas text is genuinely required\n- prefer one shared Canvas layer or virtualization for large sparkline tables instead of hundreds of independent backing stores when memory becomes visible\n- compute backing-store memory as `width * height * pixelRatio^2 * 4 * layerCount * instanceCount`\n- cap pixel ratio or quality on mobile when memory, battery, or thermal pressure would outweigh crispness\n- keep stale\u002Foffline\u002Fpartial-data overlays in HTML or a light Canvas layer instead of blanking the chart during network recovery\n- use `getContext(\"2d\", { willReadFrequently: true })` only for canvases that repeatedly call `getImageData()`, such as color-picking buffers\n\n## Output Expectations\n\n- Explain why Canvas is better than SVG for the workload.\n- If SVG could also work, name the interaction, accessibility, and maintenance costs Canvas introduces and why the performance tradeoff is still worth it.\n- Keep labels and accessibility strategy explicit.\n- For sparkline-heavy views, explain how the surrounding table or card context carries meaning without forcing legend lookup.\n- For clickable or draggable Canvas views, specify the hit-testing strategy and how pointer coordinates map to data coordinates.\n- For mobile Canvas views, specify touch target policy, pointer capture, drag alternatives, pinch\u002Fzoom ownership, visual viewport or keyboard behavior, DPR cap, and low-bandwidth\u002Fstale-data behavior when relevant.\n- For color-picking buffers, specify id encoding, alpha and antialiasing assumptions, `getImageData()` readback cost, and when the buffer invalidates.\n- For zoomable or resizable Canvas views, specify how CSS size, backing-store attributes, `devicePixelRatio`, and redraw invalidation are handled.\n- For HTML overlays, specify which layer owns pointer events, focus, tooltip positioning, and accessibility semantics.\n- If a contextual surface is part of the design, document its source geometry and keep overlays, labels, and hit testing aligned to the same coordinate transform.\n- Preserve a path to exported assets, usually via PNG plus optional vector companion views.\n- For new work, include a technical design section covering simultaneous instance count, memory and redraw cost per instance, and maintenance tradeoffs of the hybrid architecture.\n\n## References\n\n- Shared theory:\n  - `..\u002F..\u002Freferences\u002Ffoundations\u002Fperception-color-and-encoding.md`\n  - `..\u002F..\u002Freferences\u002Ffoundations\u002Fmobile-first-responsive-visualization.md`\n  - `..\u002F..\u002Freferences\u002Ffoundations\u002Fdomain-contextual-surfaces.md`\n  - `..\u002F..\u002Freferences\u002Ffoundations\u002Fimplementation-design-and-tradeoffs.md`\n- Skill references:\n  - `.\u002Freferences\u002Frendering-architecture.md`\n  - `.\u002Freferences\u002Fhigh-density-interaction.md`\n  - `.\u002Freferences\u002Fperformance-playbook.md`\n  - `.\u002Freferences\u002Fsparklines-and-microcharts.md`\n\n## Representative Prompts\n\n- \"Render a million-point scatterplot in the browser.\"\n- \"Build a fast Canvas timeline with brushing and zoom.\"\n- \"Move this SVG heatmap to Canvas without losing labels.\"\n- \"Render sparklines for every row in a data table.\"\n- \"Design hit testing for a dense Canvas chart.\"\n- \"Explain how to split this visualization across multiple Canvas layers.\"\n- \"Make these Canvas marks clickable and draggable.\"\n- \"Fix this blurry Canvas chart when the browser is zoomed.\"\n",{"data":37,"body":38},{"name":4,"description":6},{"type":39,"children":40},"root",[41,49,56,62,67,81,87,132,137,143,434,440,458,463,469,560,566,644,650,740,746],{"type":42,"tag":43,"props":44,"children":45},"element","h1",{"id":4},[46],{"type":47,"value":48},"text","Canvas2D Data Visualization",{"type":42,"tag":50,"props":51,"children":53},"h2",{"id":52},"overview",[54],{"type":47,"value":55},"Overview",{"type":42,"tag":57,"props":58,"children":59},"p",{},[60],{"type":47,"value":61},"Use this skill when raster rendering is the practical choice. Canvas2D is strong for dense scatterplots, sparkline walls, heatmaps, streaming traces, tiled timelines, draggable analytical workspaces, and other views where SVG or DOM overhead becomes the limiting factor.",{"type":42,"tag":57,"props":63,"children":64},{},[65],{"type":47,"value":66},"Default assumption: keep a retained scene model in application state even if the actual drawing is immediate-mode Canvas.\nAny visualization or interaction that can be built in SVG can usually be built in Canvas2D too, but the retained geometry, hit testing, focus model, and accessibility layer become the application's responsibility. Choose Canvas for performance or rendering control; keep SVG\u002FHTML when native DOM semantics, text, accessibility, or exportability matter more than redraw speed.\nCanvas2D can also be simpler or faster than WebGL for flat immediate-mode workloads because it avoids shader setup, buffer uploads, GPU context pressure, and custom WebGL lifecycle code. Move from Canvas2D to WebGL when GPU picking, shader effects, particle count, custom blending, smooth animation, true 3D, or high-volume geospatial layers justify that extra complexity.",{"type":42,"tag":57,"props":68,"children":69},{},[70,72,79],{"type":47,"value":71},"For browser-facing Canvas work, use ",{"type":42,"tag":73,"props":74,"children":76},"code",{"className":75},[],[77],{"type":47,"value":78},"..\u002F..\u002Freferences\u002Ffoundations\u002Fmobile-first-responsive-visualization.md",{"type":47,"value":80}," so backing-store size, hit testing, touch gestures, keyboard overlays, spotty connection states, and mobile performance budgets are part of the design contract.",{"type":42,"tag":50,"props":82,"children":84},{"id":83},"choose-canvas2d-when",[85],{"type":47,"value":86},"Choose Canvas2D When",{"type":42,"tag":88,"props":89,"children":90},"ul",{},[91,97,102,107,112,117,122,127],{"type":42,"tag":92,"props":93,"children":94},"li",{},[95],{"type":47,"value":96},"the chart needs tens of thousands to millions of marks",{"type":42,"tag":92,"props":98,"children":99},{},[100],{"type":47,"value":101},"panning or zooming must feel fluid",{"type":42,"tag":92,"props":103,"children":104},{},[105],{"type":47,"value":106},"the view updates continuously",{"type":42,"tag":92,"props":108,"children":109},{},[110],{"type":47,"value":111},"the page needs many repeated microcharts such as sparklines in tables or KPI grids",{"type":42,"tag":92,"props":113,"children":114},{},[115],{"type":47,"value":116},"many chart instances are visible at once and SVG node count would dominate layout, style, and memory cost",{"type":42,"tag":92,"props":118,"children":119},{},[120],{"type":47,"value":121},"marks need custom clickable, hoverable, brushable, or draggable behavior over dense geometry",{"type":42,"tag":92,"props":123,"children":124},{},[125],{"type":47,"value":126},"you can tolerate raster output or provide separate export paths",{"type":42,"tag":92,"props":128,"children":129},{},[130],{"type":47,"value":131},"the chart benefits from layered drawing control, including static contextual backgrounds behind dense marks",{"type":42,"tag":57,"props":133,"children":134},{},[135],{"type":47,"value":136},"Prefer SVG, HTML, or a declarative grammar when the chart is small, static, text-heavy, annotation-heavy, primarily accessibility-driven, or needs straightforward copy\u002Fpaste\u002Feditable-vector export.\nPrefer WebGL or the Three.js\u002FWebGL skill when the chart needs GPU-scale particles, custom shaders, instancing, very large graph or point layers, 3D, or map overlays that Canvas2D would struggle to animate or pick interactively.",{"type":42,"tag":50,"props":138,"children":140},{"id":139},"core-practices",[141],{"type":47,"value":142},"Core Practices",{"type":42,"tag":144,"props":145,"children":146},"ol",{},[147,241,246,274,279,331,336,429],{"type":42,"tag":92,"props":148,"children":149},{},[150,152],{"type":47,"value":151},"Scale the backing store for browser zoom and high-DPI output:\n",{"type":42,"tag":88,"props":153,"children":154},{},[155,176,202,215,228],{"type":42,"tag":92,"props":156,"children":157},{},[158,160,166,168,174],{"type":47,"value":159},"set CSS ",{"type":42,"tag":73,"props":161,"children":163},{"className":162},[],[164],{"type":47,"value":165},"style.width",{"type":47,"value":167}," and ",{"type":42,"tag":73,"props":169,"children":171},{"className":170},[],[172],{"type":47,"value":173},"style.height",{"type":47,"value":175}," in CSS pixels",{"type":42,"tag":92,"props":177,"children":178},{},[179,181,187,188,194,196],{"type":47,"value":180},"set the ",{"type":42,"tag":73,"props":182,"children":184},{"className":183},[],[185],{"type":47,"value":186},"canvas.width",{"type":47,"value":167},{"type":42,"tag":73,"props":189,"children":191},{"className":190},[],[192],{"type":47,"value":193},"canvas.height",{"type":47,"value":195}," attributes to ",{"type":42,"tag":73,"props":197,"children":199},{"className":198},[],[200],{"type":47,"value":201},"cssSize * pixelRatio",{"type":42,"tag":92,"props":203,"children":204},{},[205,207,213],{"type":47,"value":206},"use ",{"type":42,"tag":73,"props":208,"children":210},{"className":209},[],[211],{"type":47,"value":212},"globalThis.devicePixelRatio || 1",{"type":47,"value":214}," as the page-zoom-aware ratio",{"type":42,"tag":92,"props":216,"children":217},{},[218,220,226],{"type":47,"value":219},"consider ",{"type":42,"tag":73,"props":221,"children":223},{"className":222},[],[224],{"type":47,"value":225},"visualViewport.scale",{"type":47,"value":227}," only when deliberately redrawing for pinch-zoom crispness",{"type":42,"tag":92,"props":229,"children":230},{},[231,233,239],{"type":47,"value":232},"reset the context with ",{"type":42,"tag":73,"props":234,"children":236},{"className":235},[],[237],{"type":47,"value":238},"ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0)",{"type":47,"value":240}," so drawing code can stay in CSS pixels",{"type":42,"tag":92,"props":242,"children":243},{},[244],{"type":47,"value":245},"Keep world-to-screen transforms explicit.",{"type":42,"tag":92,"props":247,"children":248},{},[249,251],{"type":47,"value":250},"Use layered canvases for:\n",{"type":42,"tag":88,"props":252,"children":253},{},[254,259,264,269],{"type":42,"tag":92,"props":255,"children":256},{},[257],{"type":47,"value":258},"static background, including any field, court, floor plan, schematic, or other contextual surface",{"type":42,"tag":92,"props":260,"children":261},{},[262],{"type":47,"value":263},"primary marks",{"type":42,"tag":92,"props":265,"children":266},{},[267],{"type":47,"value":268},"highlight or hover state",{"type":42,"tag":92,"props":270,"children":271},{},[272],{"type":47,"value":273},"interaction overlays",{"type":42,"tag":92,"props":275,"children":276},{},[277],{"type":47,"value":278},"Avoid full redraws when partial invalidation is possible.",{"type":42,"tag":92,"props":280,"children":281},{},[282,284],{"type":47,"value":283},"Build deterministic hit testing:\n",{"type":42,"tag":88,"props":285,"children":286},{},[287,292,297,302,326],{"type":42,"tag":92,"props":288,"children":289},{},[290],{"type":47,"value":291},"spatial index",{"type":42,"tag":92,"props":293,"children":294},{},[295],{"type":47,"value":296},"color picking buffer",{"type":42,"tag":92,"props":298,"children":299},{},[300],{"type":47,"value":301},"nearest-point search",{"type":42,"tag":92,"props":303,"children":304},{},[305,311,313,319,320],{"type":42,"tag":73,"props":306,"children":308},{"className":307},[],[309],{"type":47,"value":310},"Path2D",{"type":47,"value":312}," geometry replay against candidate subsets with ",{"type":42,"tag":73,"props":314,"children":316},{"className":315},[],[317],{"type":47,"value":318},"isPointInPath()",{"type":47,"value":167},{"type":42,"tag":73,"props":321,"children":323},{"className":322},[],[324],{"type":47,"value":325},"isPointInStroke()",{"type":42,"tag":92,"props":327,"children":328},{},[329],{"type":47,"value":330},"analytic tests for simple shapes such as points, line segments, rectangles, intervals, and bands",{"type":42,"tag":92,"props":332,"children":333},{},[334],{"type":47,"value":335},"Assess how many Canvas instances may be visible at once, because backing-store size and redraw cost multiply quickly at dashboard scale.",{"type":42,"tag":92,"props":337,"children":338},{},[339,341],{"type":47,"value":340},"Treat pointer interaction as a first-class subsystem:\n",{"type":42,"tag":88,"props":342,"children":343},{},[344,363,368,380,407,419,424],{"type":42,"tag":92,"props":345,"children":346},{},[347,349,355,357],{"type":47,"value":348},"normalize ",{"type":42,"tag":73,"props":350,"children":352},{"className":351},[],[353],{"type":47,"value":354},"PointerEvent.clientX\u002FclientY",{"type":47,"value":356}," through ",{"type":42,"tag":73,"props":358,"children":360},{"className":359},[],[361],{"type":47,"value":362},"getBoundingClientRect()",{"type":42,"tag":92,"props":364,"children":365},{},[366],{"type":47,"value":367},"invert the current pan\u002Fzoom transform before mapping to data coordinates",{"type":42,"tag":92,"props":369,"children":370},{},[371,372,378],{"type":47,"value":206},{"type":42,"tag":73,"props":373,"children":375},{"className":374},[],[376],{"type":47,"value":377},"setPointerCapture()",{"type":47,"value":379}," for drags so movement continues outside the canvas",{"type":42,"tag":92,"props":381,"children":382},{},[383,385,391,393,399,401],{"type":47,"value":384},"clean up drag state on ",{"type":42,"tag":73,"props":386,"children":388},{"className":387},[],[389],{"type":47,"value":390},"pointerup",{"type":47,"value":392},", ",{"type":42,"tag":73,"props":394,"children":396},{"className":395},[],[397],{"type":47,"value":398},"pointercancel",{"type":47,"value":400},", and ",{"type":42,"tag":73,"props":402,"children":404},{"className":403},[],[405],{"type":47,"value":406},"lostpointercapture",{"type":42,"tag":92,"props":408,"children":409},{},[410,411,417],{"type":47,"value":206},{"type":42,"tag":73,"props":412,"children":414},{"className":413},[],[415],{"type":47,"value":416},"touch-action",{"type":47,"value":418}," deliberately for touch and pen surfaces",{"type":42,"tag":92,"props":420,"children":421},{},[422],{"type":47,"value":423},"provide non-drag alternatives and enlarged invisible hit regions for small marks on coarse pointers",{"type":42,"tag":92,"props":425,"children":426},{},[427],{"type":47,"value":428},"keep keyboard and screen-reader affordances in HTML when Canvas marks are semantically important",{"type":42,"tag":92,"props":430,"children":431},{},[432],{"type":47,"value":433},"For mobile, define whether one-finger drag pans the chart or scrolls the page, whether pinch zoom is chart-owned or browser-owned, and how reset or explicit zoom controls work.",{"type":42,"tag":50,"props":435,"children":437},{"id":436},"hybrid-architecture",[438],{"type":47,"value":439},"Hybrid Architecture",{"type":42,"tag":88,"props":441,"children":442},{},[443,448,453],{"type":42,"tag":92,"props":444,"children":445},{},[446],{"type":47,"value":447},"Canvas for bulk marks",{"type":42,"tag":92,"props":449,"children":450},{},[451],{"type":47,"value":452},"SVG or HTML for axes, labels, legends, rich tooltips, menus, form controls, keyboard focus, and annotations",{"type":42,"tag":92,"props":454,"children":455},{},[456],{"type":47,"value":457},"shared scales and transforms across both layers",{"type":42,"tag":57,"props":459,"children":460},{},[461],{"type":47,"value":462},"This is usually better than forcing all responsibilities into Canvas. Use absolutely positioned HTML overlays for elements that need native layout, selection, input, focus rings, links, or accessible semantics; keep them synchronized by deriving every overlay position from the same world-to-screen transform used by the Canvas renderer.\nFor sparklines and other microcharts, nearby row labels, headers, and inline values usually work better than a shared detached legend.",{"type":42,"tag":50,"props":464,"children":466},{"id":465},"performance-defaults",[467],{"type":47,"value":468},"Performance Defaults",{"type":42,"tag":88,"props":470,"children":471},{},[472,477,482,487,492,497,509,514,519,530,535,540],{"type":42,"tag":92,"props":473,"children":474},{},[475],{"type":47,"value":476},"batch draw calls",{"type":42,"tag":92,"props":478,"children":479},{},[480],{"type":47,"value":481},"precompute style groups",{"type":42,"tag":92,"props":483,"children":484},{},[485],{"type":47,"value":486},"use typed arrays for geometry-heavy views",{"type":42,"tag":92,"props":488,"children":489},{},[490],{"type":47,"value":491},"cull off-screen marks",{"type":42,"tag":92,"props":493,"children":494},{},[495],{"type":47,"value":496},"decimate or aggregate when the viewport cannot resolve individual points",{"type":42,"tag":92,"props":498,"children":499},{},[500,501,507],{"type":47,"value":206},{"type":42,"tag":73,"props":502,"children":504},{"className":503},[],[505],{"type":47,"value":506},"OffscreenCanvas",{"type":47,"value":508}," and workers when main-thread contention is significant",{"type":42,"tag":92,"props":510,"children":511},{},[512],{"type":47,"value":513},"keep text and annotations in HTML or SVG unless Canvas text is genuinely required",{"type":42,"tag":92,"props":515,"children":516},{},[517],{"type":47,"value":518},"prefer one shared Canvas layer or virtualization for large sparkline tables instead of hundreds of independent backing stores when memory becomes visible",{"type":42,"tag":92,"props":520,"children":521},{},[522,524],{"type":47,"value":523},"compute backing-store memory as ",{"type":42,"tag":73,"props":525,"children":527},{"className":526},[],[528],{"type":47,"value":529},"width * height * pixelRatio^2 * 4 * layerCount * instanceCount",{"type":42,"tag":92,"props":531,"children":532},{},[533],{"type":47,"value":534},"cap pixel ratio or quality on mobile when memory, battery, or thermal pressure would outweigh crispness",{"type":42,"tag":92,"props":536,"children":537},{},[538],{"type":47,"value":539},"keep stale\u002Foffline\u002Fpartial-data overlays in HTML or a light Canvas layer instead of blanking the chart during network recovery",{"type":42,"tag":92,"props":541,"children":542},{},[543,544,550,552,558],{"type":47,"value":206},{"type":42,"tag":73,"props":545,"children":547},{"className":546},[],[548],{"type":47,"value":549},"getContext(\"2d\", { willReadFrequently: true })",{"type":47,"value":551}," only for canvases that repeatedly call ",{"type":42,"tag":73,"props":553,"children":555},{"className":554},[],[556],{"type":47,"value":557},"getImageData()",{"type":47,"value":559},", such as color-picking buffers",{"type":42,"tag":50,"props":561,"children":563},{"id":562},"output-expectations",[564],{"type":47,"value":565},"Output Expectations",{"type":42,"tag":88,"props":567,"children":568},{},[569,574,579,584,589,594,599,611,624,629,634,639],{"type":42,"tag":92,"props":570,"children":571},{},[572],{"type":47,"value":573},"Explain why Canvas is better than SVG for the workload.",{"type":42,"tag":92,"props":575,"children":576},{},[577],{"type":47,"value":578},"If SVG could also work, name the interaction, accessibility, and maintenance costs Canvas introduces and why the performance tradeoff is still worth it.",{"type":42,"tag":92,"props":580,"children":581},{},[582],{"type":47,"value":583},"Keep labels and accessibility strategy explicit.",{"type":42,"tag":92,"props":585,"children":586},{},[587],{"type":47,"value":588},"For sparkline-heavy views, explain how the surrounding table or card context carries meaning without forcing legend lookup.",{"type":42,"tag":92,"props":590,"children":591},{},[592],{"type":47,"value":593},"For clickable or draggable Canvas views, specify the hit-testing strategy and how pointer coordinates map to data coordinates.",{"type":42,"tag":92,"props":595,"children":596},{},[597],{"type":47,"value":598},"For mobile Canvas views, specify touch target policy, pointer capture, drag alternatives, pinch\u002Fzoom ownership, visual viewport or keyboard behavior, DPR cap, and low-bandwidth\u002Fstale-data behavior when relevant.",{"type":42,"tag":92,"props":600,"children":601},{},[602,604,609],{"type":47,"value":603},"For color-picking buffers, specify id encoding, alpha and antialiasing assumptions, ",{"type":42,"tag":73,"props":605,"children":607},{"className":606},[],[608],{"type":47,"value":557},{"type":47,"value":610}," readback cost, and when the buffer invalidates.",{"type":42,"tag":92,"props":612,"children":613},{},[614,616,622],{"type":47,"value":615},"For zoomable or resizable Canvas views, specify how CSS size, backing-store attributes, ",{"type":42,"tag":73,"props":617,"children":619},{"className":618},[],[620],{"type":47,"value":621},"devicePixelRatio",{"type":47,"value":623},", and redraw invalidation are handled.",{"type":42,"tag":92,"props":625,"children":626},{},[627],{"type":47,"value":628},"For HTML overlays, specify which layer owns pointer events, focus, tooltip positioning, and accessibility semantics.",{"type":42,"tag":92,"props":630,"children":631},{},[632],{"type":47,"value":633},"If a contextual surface is part of the design, document its source geometry and keep overlays, labels, and hit testing aligned to the same coordinate transform.",{"type":42,"tag":92,"props":635,"children":636},{},[637],{"type":47,"value":638},"Preserve a path to exported assets, usually via PNG plus optional vector companion views.",{"type":42,"tag":92,"props":640,"children":641},{},[642],{"type":47,"value":643},"For new work, include a technical design section covering simultaneous instance count, memory and redraw cost per instance, and maintenance tradeoffs of the hybrid architecture.",{"type":42,"tag":50,"props":645,"children":647},{"id":646},"references",[648],{"type":47,"value":649},"References",{"type":42,"tag":88,"props":651,"children":652},{},[653,696],{"type":42,"tag":92,"props":654,"children":655},{},[656,658],{"type":47,"value":657},"Shared theory:\n",{"type":42,"tag":88,"props":659,"children":660},{},[661,670,678,687],{"type":42,"tag":92,"props":662,"children":663},{},[664],{"type":42,"tag":73,"props":665,"children":667},{"className":666},[],[668],{"type":47,"value":669},"..\u002F..\u002Freferences\u002Ffoundations\u002Fperception-color-and-encoding.md",{"type":42,"tag":92,"props":671,"children":672},{},[673],{"type":42,"tag":73,"props":674,"children":676},{"className":675},[],[677],{"type":47,"value":78},{"type":42,"tag":92,"props":679,"children":680},{},[681],{"type":42,"tag":73,"props":682,"children":684},{"className":683},[],[685],{"type":47,"value":686},"..\u002F..\u002Freferences\u002Ffoundations\u002Fdomain-contextual-surfaces.md",{"type":42,"tag":92,"props":688,"children":689},{},[690],{"type":42,"tag":73,"props":691,"children":693},{"className":692},[],[694],{"type":47,"value":695},"..\u002F..\u002Freferences\u002Ffoundations\u002Fimplementation-design-and-tradeoffs.md",{"type":42,"tag":92,"props":697,"children":698},{},[699,701],{"type":47,"value":700},"Skill references:\n",{"type":42,"tag":88,"props":702,"children":703},{},[704,713,722,731],{"type":42,"tag":92,"props":705,"children":706},{},[707],{"type":42,"tag":73,"props":708,"children":710},{"className":709},[],[711],{"type":47,"value":712},".\u002Freferences\u002Frendering-architecture.md",{"type":42,"tag":92,"props":714,"children":715},{},[716],{"type":42,"tag":73,"props":717,"children":719},{"className":718},[],[720],{"type":47,"value":721},".\u002Freferences\u002Fhigh-density-interaction.md",{"type":42,"tag":92,"props":723,"children":724},{},[725],{"type":42,"tag":73,"props":726,"children":728},{"className":727},[],[729],{"type":47,"value":730},".\u002Freferences\u002Fperformance-playbook.md",{"type":42,"tag":92,"props":732,"children":733},{},[734],{"type":42,"tag":73,"props":735,"children":737},{"className":736},[],[738],{"type":47,"value":739},".\u002Freferences\u002Fsparklines-and-microcharts.md",{"type":42,"tag":50,"props":741,"children":743},{"id":742},"representative-prompts",[744],{"type":47,"value":745},"Representative Prompts",{"type":42,"tag":88,"props":747,"children":748},{},[749,754,759,764,769,774,779,784],{"type":42,"tag":92,"props":750,"children":751},{},[752],{"type":47,"value":753},"\"Render a million-point scatterplot in the browser.\"",{"type":42,"tag":92,"props":755,"children":756},{},[757],{"type":47,"value":758},"\"Build a fast Canvas timeline with brushing and zoom.\"",{"type":42,"tag":92,"props":760,"children":761},{},[762],{"type":47,"value":763},"\"Move this SVG heatmap to Canvas without losing labels.\"",{"type":42,"tag":92,"props":765,"children":766},{},[767],{"type":47,"value":768},"\"Render sparklines for every row in a data table.\"",{"type":42,"tag":92,"props":770,"children":771},{},[772],{"type":47,"value":773},"\"Design hit testing for a dense Canvas chart.\"",{"type":42,"tag":92,"props":775,"children":776},{},[777],{"type":47,"value":778},"\"Explain how to split this visualization across multiple Canvas layers.\"",{"type":42,"tag":92,"props":780,"children":781},{},[782],{"type":47,"value":783},"\"Make these Canvas marks clickable and draggable.\"",{"type":42,"tag":92,"props":785,"children":786},{},[787],{"type":47,"value":788},"\"Fix this blurry Canvas chart when the browser is zoomed.\"",{"items":790,"total":905},[791,805,821,833,853,873,893],{"slug":792,"name":792,"fn":793,"description":794,"org":795,"tags":796,"stars":25,"repoUrl":26,"updatedAt":27},"accessibility-and-inclusive-visualization","make data visualizations accessible","Make data visualizations accessible and inclusive. Use when the user needs chart or diagram accessibility guidance, text alternatives for complex visuals, color and contrast review, keyboard support, reduced-motion behavior for animation or parallax, or an accessibility QA workflow for exported figures, UML-like diagrams, and dashboards.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[797,800,801,802],{"name":798,"slug":799,"type":15},"Accessibility","accessibility",{"name":20,"slug":21,"type":15},{"name":13,"slug":14,"type":15},{"name":803,"slug":804,"type":15},"Design","design",{"slug":806,"name":806,"fn":807,"description":808,"org":809,"tags":810,"stars":25,"repoUrl":26,"updatedAt":820},"agent-browser","automate browser interactions for agents","Browser automation CLI for AI agents. Use when the user needs to interact with websites, verify dev server output, test web apps, navigate pages, fill forms, click buttons, take screenshots, extract data, or automate any browser task. Also triggers when a dev server starts so you can verify it visually.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[811,814,817],{"name":812,"slug":813,"type":15},"Agents","agents",{"name":815,"slug":816,"type":15},"Browser Automation","browser-automation",{"name":818,"slug":819,"type":15},"Testing","testing","2026-04-06T18:41:03.44016",{"slug":822,"name":822,"fn":823,"description":824,"org":825,"tags":826,"stars":25,"repoUrl":26,"updatedAt":832},"agent-browser-verify","verify dev server output with automated browser","Automated browser verification for dev servers. Triggers when a dev server starts to run a visual gut-check with agent-browser — verifies the page loads, checks for console errors, validates key UI elements, and reports pass\u002Ffail before continuing.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[827,828,831],{"name":815,"slug":816,"type":15},{"name":829,"slug":830,"type":15},"Local Development","local-development",{"name":818,"slug":819,"type":15},"2026-04-06T18:41:17.526867",{"slug":834,"name":834,"fn":835,"description":836,"org":837,"tags":838,"stars":25,"repoUrl":26,"updatedAt":852},"agents-sdk","build AI agents on Cloudflare Workers","Build AI agents on Cloudflare Workers using the Agents SDK. Load when creating stateful agents, durable workflows, real-time WebSocket apps, scheduled tasks, MCP servers, or chat applications. Covers Agent class, state management, callable RPC, Workflows integration, and React hooks. Biases towards retrieval from Cloudflare docs over pre-trained knowledge.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[839,840,843,846,849],{"name":812,"slug":813,"type":15},{"name":841,"slug":842,"type":15},"Cloudflare Workers","cloudflare-workers",{"name":844,"slug":845,"type":15},"SDK","sdk",{"name":847,"slug":848,"type":15},"Serverless","serverless",{"name":850,"slug":851,"type":15},"WebSockets","websockets","2026-04-06T18:39:51.717063",{"slug":854,"name":854,"fn":855,"description":856,"org":857,"tags":858,"stars":25,"repoUrl":26,"updatedAt":872},"ai-elements","build chat UIs with AI Elements","AI Elements component library guidance — pre-built React components for AI interfaces built on shadcn\u002Fui. Use when building chat UIs, message displays, tool call rendering, streaming responses, reasoning panels, or any AI-native interface with the AI SDK.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[859,860,863,866,869],{"name":23,"slug":24,"type":15},{"name":861,"slug":862,"type":15},"React","react",{"name":864,"slug":865,"type":15},"shadcn\u002Fui","shadcn-ui",{"name":867,"slug":868,"type":15},"UI Components","ui-components",{"name":870,"slug":871,"type":15},"Vercel","vercel","2026-04-06T18:40:59.619419",{"slug":874,"name":874,"fn":875,"description":876,"org":877,"tags":878,"stars":25,"repoUrl":26,"updatedAt":892},"ai-gateway","configure Vercel AI Gateway","Vercel AI Gateway expert guidance. Use when configuring model routing, provider failover, cost tracking, or managing multiple AI providers through a unified API.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[879,882,885,888,891],{"name":880,"slug":881,"type":15},"AI Infrastructure","ai-infrastructure",{"name":883,"slug":884,"type":15},"Cost Optimization","cost-optimization",{"name":886,"slug":887,"type":15},"LLM","llm",{"name":889,"slug":890,"type":15},"Performance","performance",{"name":870,"slug":871,"type":15},"2026-04-06T18:40:44.377464",{"slug":894,"name":894,"fn":895,"description":896,"org":897,"tags":898,"stars":25,"repoUrl":26,"updatedAt":904},"ai-generation-persistence","implement persistence patterns for AI generations","AI generation persistence patterns — unique IDs, addressable URLs, database storage, and cost tracking for every LLM generation",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[899,900,903],{"name":883,"slug":884,"type":15},{"name":901,"slug":902,"type":15},"Database","database",{"name":886,"slug":887,"type":15},"2026-04-06T18:41:08.513425",600,{"items":907,"total":1104},[908,929,952,969,985,1002,1021,1033,1047,1061,1073,1088],{"slug":909,"name":909,"fn":910,"description":911,"org":912,"tags":913,"stars":926,"repoUrl":927,"updatedAt":928},"prior-auth-packet-builder","build healthcare prior authorization packets","Build a concise prior authorization packet from local case files and payer policy docs.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[914,917,920,923],{"name":915,"slug":916,"type":15},"Documents","documents",{"name":918,"slug":919,"type":15},"Healthcare","healthcare",{"name":921,"slug":922,"type":15},"Insurance","insurance",{"name":924,"slug":925,"type":15},"Regulatory Compliance","regulatory-compliance",28169,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fopenai-agents-python","2026-04-16T05:11:39.180399",{"slug":930,"name":930,"fn":931,"description":932,"org":933,"tags":934,"stars":949,"repoUrl":950,"updatedAt":951},"aspnet-core","build ASP.NET Core web applications","Build, review, refactor, or architect ASP.NET Core web applications using current official guidance for .NET web development. Use when working on Blazor Web Apps, Razor Pages, MVC, Minimal APIs, controller-based Web APIs, SignalR, gRPC, middleware, dependency injection, configuration, authentication, authorization, testing, performance, deployment, or ASP.NET Core upgrades.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[935,938,940,943,946],{"name":936,"slug":937,"type":15},".NET","dotnet",{"name":939,"slug":930,"type":15},"ASP.NET Core",{"name":941,"slug":942,"type":15},"Blazor","blazor",{"name":944,"slug":945,"type":15},"C#","csharp",{"name":947,"slug":948,"type":15},"Web Development","web-development",23787,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fskills","2026-04-12T05:07:02.819491",{"slug":953,"name":953,"fn":954,"description":955,"org":956,"tags":957,"stars":949,"repoUrl":950,"updatedAt":968},"chatgpt-apps","build ChatGPT Apps SDK applications","Build, scaffold, refactor, and troubleshoot ChatGPT Apps SDK applications that combine an MCP server and widget UI. Use when Codex needs to design tools, register UI resources, wire the MCP Apps bridge or ChatGPT compatibility APIs, apply Apps SDK metadata or CSP or domain settings, or produce a docs-aligned project scaffold. Prefer a docs-first workflow by invoking the openai-docs skill or OpenAI developer docs MCP tools before generating code.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[958,961,964,967],{"name":959,"slug":960,"type":15},"Apps SDK","apps-sdk",{"name":962,"slug":963,"type":15},"ChatGPT","chatgpt",{"name":965,"slug":966,"type":15},"MCP","mcp",{"name":9,"slug":8,"type":15},"2026-04-12T05:07:05.468097",{"slug":970,"name":970,"fn":971,"description":972,"org":973,"tags":974,"stars":949,"repoUrl":950,"updatedAt":984},"cli-creator","build CLIs from API docs","Build a composable CLI for Codex from API docs, an OpenAPI spec, existing curl examples, an SDK, a web app, an admin tool, or a local script. Use when the user wants Codex to create a command-line tool that can run from any repo, expose composable read\u002Fwrite commands, return stable JSON, manage auth, and pair with a companion skill.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[975,978,981],{"name":976,"slug":977,"type":15},"API Development","api-development",{"name":979,"slug":980,"type":15},"CLI","cli",{"name":982,"slug":983,"type":15},"Codex","codex","2026-04-12T05:07:04.132762",{"slug":986,"name":986,"fn":987,"description":988,"org":989,"tags":990,"stars":949,"repoUrl":950,"updatedAt":1001},"cloudflare-deploy","deploy projects to Cloudflare","Deploy applications and infrastructure to Cloudflare using Workers, Pages, and related platform services. Use when the user asks to deploy, host, publish, or set up a project on Cloudflare.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[991,994,997,998],{"name":992,"slug":993,"type":15},"Cloudflare","cloudflare",{"name":995,"slug":996,"type":15},"Cloudflare Pages","cloudflare-pages",{"name":841,"slug":842,"type":15},{"name":999,"slug":1000,"type":15},"Deployment","deployment","2026-04-12T05:07:14.275118",{"slug":1003,"name":1003,"fn":1004,"description":1005,"org":1006,"tags":1007,"stars":949,"repoUrl":950,"updatedAt":1020},"define-goal","define and set measurable project goals","Help the user define a concrete, measurable goal before starting work, especially when they ask to use the goal tool, create a goal, set an objective, clarify success criteria, or turn a fuzzy intention into a quantitative outcome. Use this skill for goal creation and goal refinement only; it does not manage durable snapshots, decision logs, or long-running execution artifacts.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1008,1011,1014,1017],{"name":1009,"slug":1010,"type":15},"Productivity","productivity",{"name":1012,"slug":1013,"type":15},"Project Management","project-management",{"name":1015,"slug":1016,"type":15},"Strategy","strategy",{"name":1018,"slug":1019,"type":15},"Task Management","task-management","2026-05-23T06:17:16.870838",{"slug":1022,"name":1022,"fn":1023,"description":1024,"org":1025,"tags":1026,"stars":949,"repoUrl":950,"updatedAt":1032},"figma","translate Figma designs into code","Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1027,1028,1030,1031],{"name":803,"slug":804,"type":15},{"name":1029,"slug":1022,"type":15},"Figma",{"name":23,"slug":24,"type":15},{"name":965,"slug":966,"type":15},"2026-04-12T05:06:47.939943",{"slug":1034,"name":1034,"fn":1035,"description":1036,"org":1037,"tags":1038,"stars":949,"repoUrl":950,"updatedAt":1046},"figma-code-connect-components","connect Figma designs to code components","Connects Figma design components to code components using Code Connect mapping tools. Use when user says \"code connect\", \"connect this component to code\", \"map this component\", \"link component to code\", \"create code connect mapping\", or wants to establish mappings between Figma designs and code implementations. For canvas writes via `use_figma`, use `figma-use`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1039,1040,1043,1044,1045],{"name":803,"slug":804,"type":15},{"name":1041,"slug":1042,"type":15},"Design System","design-system",{"name":1029,"slug":1022,"type":15},{"name":23,"slug":24,"type":15},{"name":867,"slug":868,"type":15},"2026-05-10T05:59:52.971881",{"slug":1048,"name":1048,"fn":1049,"description":1050,"org":1051,"tags":1052,"stars":949,"repoUrl":950,"updatedAt":1060},"figma-create-design-system-rules","generate design system rules from Figma","Generates custom design system rules for the user's codebase. Use when user says \"create design system rules\", \"generate rules for my project\", \"set up design rules\", \"customize design system guidelines\", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server connection.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1053,1054,1055,1058,1059],{"name":803,"slug":804,"type":15},{"name":1041,"slug":1042,"type":15},{"name":1056,"slug":1057,"type":15},"Documentation","documentation",{"name":1029,"slug":1022,"type":15},{"name":23,"slug":24,"type":15},"2026-05-16T06:07:47.821474",{"slug":1062,"name":1062,"fn":1063,"description":1064,"org":1065,"tags":1066,"stars":949,"repoUrl":950,"updatedAt":1072},"figma-implement-design","translate Figma designs into application code","Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions \"implement design\", \"generate code\", \"implement component\", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1067,1068,1069,1070,1071],{"name":803,"slug":804,"type":15},{"name":1029,"slug":1022,"type":15},{"name":23,"slug":24,"type":15},{"name":867,"slug":868,"type":15},{"name":947,"slug":948,"type":15},"2026-05-16T06:07:40.583615",{"slug":1074,"name":1074,"fn":1075,"description":1076,"org":1077,"tags":1078,"stars":949,"repoUrl":950,"updatedAt":1087},"hatch-pet","create animated pets for Codex","Create, repair, validate, visually QA, and package Codex-compatible animated pets and pet spritesheets from character art, generated images, company or prospect brand cues, or visual references. Use when a user wants a lightweight-worker Codex pet workflow, a non-pixel custom pet style, a prospect or company mascot pet, or a full 8x9 animated pet atlas with transparent unused cells, QA contact sheets, and pet.json packaging. This skill composes the installed $imagegen system skill for visual generation and uses bundled scripts for deterministic spritesheet assembly.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1079,1082,1083,1086],{"name":1080,"slug":1081,"type":15},"Animation","animation",{"name":982,"slug":983,"type":15},{"name":1084,"slug":1085,"type":15},"Creative","creative",{"name":803,"slug":804,"type":15},"2026-05-02T05:31:48.48485",{"slug":1089,"name":1089,"fn":1090,"description":1091,"org":1092,"tags":1093,"stars":949,"repoUrl":950,"updatedAt":1103},"imagegen","generate and edit raster images","Generate or edit raster images when the task benefits from AI-created bitmap visuals such as photos, illustrations, textures, sprites, mockups, or transparent-background cutouts. Use when Codex should create a brand-new image, transform an existing image, or derive visual variants from references, and the output should be a bitmap asset rather than repo-native code or vector. Do not use when the task is better handled by editing existing SVG\u002Fvector\u002Fcode-native assets, extending an established icon or logo system, or building the visual directly in HTML\u002FCSS\u002Fcanvas.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1094,1095,1096,1099,1102],{"name":1084,"slug":1085,"type":15},{"name":803,"slug":804,"type":15},{"name":1097,"slug":1098,"type":15},"Image Generation","image-generation",{"name":1100,"slug":1101,"type":15},"Images","images",{"name":9,"slug":8,"type":15},"2026-05-15T06:23:24.312127",675]