[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-openai-threejs-data-visualization":3,"mdc--wi9jvj-key":36,"related-org-openai-threejs-data-visualization":754,"related-repo-openai-threejs-data-visualization":959},{"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},"threejs-data-visualization","render WebGL-accelerated data visualizations","Render WebGL-accelerated data visualizations with Three.js, raw WebGL, deck.gl, luma.gl, PixiJS, Sigma.js, Plotly WebGL traces, ECharts GL, CesiumJS, Babylon.js, or related GPU libraries. Use when the visualization needs true spatial structure, dense 2D or 3D GPU rendering, particle or flow animation, volumetric views, or interactive exploration that adds real analytical value.",{"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},"Graphics","graphics","tag",{"name":17,"slug":18,"type":15},"Data Visualization","data-visualization",{"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\u002Fthreejs-data-visualization","---\nname: threejs-data-visualization\ndescription: Render WebGL-accelerated data visualizations with Three.js, raw WebGL, deck.gl, luma.gl, PixiJS, Sigma.js, Plotly WebGL traces, ECharts GL, CesiumJS, Babylon.js, or related GPU libraries. Use when the visualization needs true spatial structure, dense 2D or 3D GPU rendering, particle or flow animation, volumetric views, or interactive exploration that adds real analytical value.\n---\n\n# Three.js and WebGL Data Visualization\n\n## Overview\n\nUse this skill when the user truly benefits from 3D, GPU-heavy 2D, shader-driven animation, or WebGL-accelerated interaction. Three.js is appropriate for volumetric data, 3D point clouds, spatial trajectories, surfaces, scientific or immersive scenes, and custom particle systems. WebGL or WebGL-backed libraries are also appropriate for dense 2D scatterplots, animated networks, flow maps, particle trails, GPU aggregation, or custom shader effects that exceed practical SVG\u002FDOM limits and are not a good fit for Canvas2D.\n\nDefault assumption: use the simplest truthful renderer that meets the scale and interaction requirements. 3D is justified only when depth carries analytical meaning. WebGL is justified when GPU throughput, shader control, large mark counts, or animation quality matter enough to offset accessibility, export, debugging, bundle, and GPU-memory costs. Cosmetic 3D or decorative particles are regressions.\n\nMobile GPUs, touch gestures, battery, thermal limits, and permissions can change the renderer choice. Use `..\u002F..\u002Freferences\u002Ffoundations\u002Fmobile-first-responsive-visualization.md` for mobile portrait\u002Flandscape contracts, AR\u002Fcamera\u002Fmotion\u002Fvibration decisions, visual viewport behavior, spotty connection handling, and touch-first controls.\n\n## Choose WebGL When\n\n- the data is inherently spatial, volumetric, trajectory-based, or surface-based\n- depth, orbit, slicing, or perspective reveals structure unavailable in 2D\n- an editorial story needs camera states to reveal a meaningful surface, volume, terrain, or multiaxis relationship\n- GPU instancing, texture-backed data, or shader-based rendering materially improves scale\n- dense 2D plots, networks, or maps need hundreds of thousands to millions of marks, continuous pan or zoom, or real-time filtering\n- animated flow, trips, particles, or transitions must remain smooth without generating thousands of DOM or SVG elements\n- the view needs GPU picking, custom blending, post-processing, or shader effects tied to data attributes\n- the experience needs immersive or exploratory navigation\n- AR or camera-backed spatial inspection adds analytical value and has a non-permission fallback\n\n## Avoid WebGL When\n\n- the same comparison is clearer in 2D\n- labels and exact values dominate the task\n- the chart will mostly be consumed as a static document\n- a declarative grammar, D3\u002FSVG, or Canvas2D can handle the mark count with less maintenance and better export\u002Faccessibility\n- the required effect is mostly decoration, novelty, or attention capture without a specific analytical verb\n- the page will show many small charts where WebGL context pressure and GPU memory would outweigh per-chart speed\n\n## Library Selection\n\n- Three.js: custom 3D scenes, point clouds, instancing, particles, shader materials, camera-led stories, and 3D analytical surfaces.\n- deck.gl: high-volume geospatial and non-geospatial layers, GPU aggregation, picking, animated trips, arcs, paths, point clouds, and overlays on MapLibre, Mapbox, Google Maps, or ArcGIS.\n- luma.gl: low-level WebGL2 or WebGPU-leaning GPU programming when deck.gl abstractions are too high-level but raw WebGL would be too much boilerplate.\n- raw WebGL2: maximum control for custom shaders, data textures, transform feedback, framebuffers, or unusual render pipelines; reserve for teams comfortable owning GPU lifecycle and debugging.\n- regl or TWGL: lighter low-level WebGL wrappers when custom shaders are needed without a full scene engine; regl is especially good for command-style, state-minimized rendering.\n- PixiJS: GPU-accelerated 2D sprites, particles, texture atlases, labels-as-sprites, playful dashboards, and 2D editorial animation where a scene graph helps.\n- Sigma.js: large interactive node-link graphs where WebGL rendering, graph layouts, hover states, and graph-specific affordances matter more than custom shader freedom.\n- Plotly WebGL traces: fast scientific or product charts when a high-level declarative API is more important than custom rendering control.\n- ECharts GL: configuration-driven 3D charts, globe views, and WebGL acceleration inside an ECharts product stack.\n- MapLibre GL JS or Mapbox GL JS: vector-tile product maps, data-driven style layers, camera motion, heatmaps, and custom layers.\n- CesiumJS: 3D globe, terrain, 3D Tiles, time-dynamic geospatial visualization, and high-precision WGS84 scenes.\n- Babylon.js: full 3D engine features such as GPU particles, physics, rich materials, large-world rendering, and WebXR when the work is closer to an interactive simulation than a chart.\n\n## Particle and Flow Effects\n\nUse particle effects only when they make movement, accumulation, attention, or state more legible:\n\n- flow particles along network edges, routes, pipes, links, or migration paths when direction and rate are the story\n- trip trails or fading path segments when temporal progression matters\n- pulsing, halo, shimmer, ember, or sparkle effects for selected, anomalous, high-risk, newly changed, or user-focused marks\n- density particles, dot advection, or flow fields when a field is continuous and exact individual paths are not meaningful\n- restrained fire, heat, glow, or hazard particles only when the metaphor matches the domain and does not trivialize serious subject matter\n\nDo not use particles when they obscure totals, imply individual entities that are not in the data, overstate certainty, glamorize harm, or compete with labels and comparison tasks. Always provide a reduced-motion fallback and a static final or key frame.\n\n## Default Architecture\n\n1. Choose the renderer from data shape and interaction load before choosing visual style.\n2. Prefer orthographic projection for chart-like 3D or 2.5D scenes.\n3. Use perspective only when depth cues matter.\n4. Keep data-to-scene transforms explicit and reversible.\n5. Use GPU-friendly primitives:\n   - `BufferGeometry`\n   - instancing\n   - points\n   - sprites or billboards\n   - texture atlases\n   - typed arrays and binary attributes\n   - shader materials when needed\n6. Batch static marks, keep dynamic attributes narrow, and avoid re-uploading full buffers every frame.\n7. Assess how many scenes may be visible at once, because GPU memory, context pressure, and overlay complexity change the recommendation.\n8. Keep labels, legends, controls, and rich annotation in DOM or SVG overlays unless the scene truly demands in-canvas text.\n9. For editorial stories, define named camera or animation states as part of the annotation plan: overview, focus, comparison, reveal, final.\n10. Keep generated textures, basemaps, or illustrated backdrops separate from data geometry so they can be reviewed and swapped.\n11. For custom shaders, define the data contract first: attributes, uniforms, textures, derived values, picking IDs, and fallbacks.\n12. For particles, define emission source, path or field, speed, lifetime, color, opacity curve, decay, selection behavior, and reduced-motion state before coding.\n13. For advanced scenes, complete `..\u002F..\u002Fassets\u002Ftemplates\u002Fadvanced-interactive-visualization-contract.md` before implementation. Name one primary scene owner, a true fallback path, coordinate frames, camera states, picking model, animation clock, interaction state machine, render-ready signal, and screenshot QA.\n14. Never let a fallback or helper renderer duplicate the primary visual while WebGL is active. One renderer owns the focal scene; fallbacks appear only when the primary scene fails or is intentionally disabled.\n15. For mobile, cap DPR or quality when needed, pause offscreen\u002Finactive loops, lazy-load heavy assets with reserved dimensions, and define stale\u002Foffline rendering for streamed or tiled data.\n\n## Interaction Rules\n\n- Support reset view, focus target, and orientation cues.\n- Keep camera behavior predictable.\n- Use shortest-path rotation or named camera states when focusing spherical or cyclic data.\n- Use brushing, filtering, aggregation, level of detail, or slicing when full-scene density becomes unreadable.\n- Pair 3D navigation with 2D summaries where possible.\n- Prefer GPU picking, spatial indexes, ID buffers, or screen-space nearest-mark picking for dense hit testing; avoid per-mark DOM overlays except for selected or focused marks.\n- Respect reduced-motion by providing direct camera-state controls, paused particles, a stepped sequence, or a static key-frame sequence.\n- Preserve browser interaction expectations. If the scene captures wheel, pinch, or drag, provide clear reset and alternate controls.\n- On mobile, provide tap\u002Ffocus selection, step-through or search for dense marks, explicit zoom buttons or two-finger gestures, and a portrait fallback when landscape is the richer inspection mode.\n- Use WebXR, camera, device motion, vibration, notifications, or geolocation only when the capability has a named analytical purpose, a user-initiated permission moment, and an accessible fallback.\n\n## Output Expectations\n\n- Justify the WebGL choice against SVG, DOM, Canvas2D, and declarative options.\n- Preserve orientation and scale cues.\n- Provide screenshot or image export paths when the result must appear in reports.\n- Keep labels, legends, and summaries readable in 2D overlays when exact reading matters.\n- For animated WebGL, state the animation verb, frame budget, clock model, reduced-motion behavior, and static fallback.\n- For particle effects, state what each particle represents, what it must not be interpreted as, and how opacity\u002Flifetime\u002Frate map to data.\n- For glows, pulses, halos, thickness, blur, shimmer, or selection effects, state the exact data field or interaction state they encode. If the effect has no mapping, remove it.\n- For editorial 3D or particle stories, state the first frame, final frame, camera or motion states, and 2D\u002Fstatic fallback.\n- For new work, include a technical design section covering simultaneous scene count, GPU memory, context pressure, buffer update patterns, interaction costs, and maintenance tradeoffs versus Canvas2D and SVG\u002FDOM alternatives.\n- For mobile work, include portrait and optional landscape framing, touch\u002Fpinch\u002Fcamera-control behavior, DPR\u002Fquality budget, battery\u002Fthermal assumptions, permission-gated capability fallbacks, and spotty-connection behavior.\n- For globe, terrain, or map-like scenes, include coordinate-alignment checks for texture, basemap, markers, labels, hit testing, camera focus, and fallback geometry.\n\n## References\n\n- Shared theory:\n  - `..\u002F..\u002Freferences\u002Ffoundations\u002Ftask-abstraction-and-chart-selection.md`\n  - `..\u002F..\u002Freferences\u002Ffoundations\u002Fart-directed-interactive-visual-stories.md`\n  - `..\u002F..\u002Freferences\u002Ffoundations\u002Fperception-color-and-encoding.md`\n  - `..\u002F..\u002Freferences\u002Ffoundations\u002Fmobile-first-responsive-visualization.md`\n  - `..\u002F..\u002Freferences\u002Ffoundations\u002Fimplementation-design-and-tradeoffs.md`\n- Skill references:\n  - `.\u002Freferences\u002Fwhen-3d-is-justified.md`\n  - `.\u002Freferences\u002Fscene-architecture-and-encodings.md`\n  - `.\u002Freferences\u002Fgpu-scaling-and-interaction.md`\n  - `.\u002Freferences\u002Fwebgl-library-selection.md`\n  - `.\u002Freferences\u002Fwebgl-2d-animation-patterns.md`\n  - `.\u002Freferences\u002Fparticle-effects-and-flow.md`\n  - `.\u002Freferences\u002Fscene-readiness-and-interaction-qa.md`\n  - `.\u002Freferences\u002Fcutaway-terrain-and-domain-scenes.md`\n- Templates:\n  - `..\u002F..\u002Fassets\u002Ftemplates\u002Fadvanced-interactive-visualization-contract.md`\n\n## Representative Prompts\n\n- \"Visualize trajectories in 3D with brushing and focus.\"\n- \"Render a dense point cloud with GPU instancing.\"\n- \"Build a volumetric or surface view with supporting 2D annotations.\"\n- \"Tell me whether this should stay 2D or move to Three.js.\"\n- \"Design a Three.js scene that still reads clearly in screenshots.\"\n- \"Build a WebGL scatterplot or network that can animate hundreds of thousands of marks.\"\n- \"Use particles to show flow between nodes without making the chart feel decorative.\"\n- \"Choose between deck.gl, Three.js, PixiJS, regl, raw WebGL, and Canvas2D for this visualization.\"\n",{"data":37,"body":38},{"name":4,"description":6},{"type":39,"children":40},"root",[41,50,57,63,68,82,88,138,144,177,183,246,252,257,285,290,296,425,431,484,490,548,554,705,711],{"type":42,"tag":43,"props":44,"children":46},"element","h1",{"id":45},"threejs-and-webgl-data-visualization",[47],{"type":48,"value":49},"text","Three.js and WebGL Data Visualization",{"type":42,"tag":51,"props":52,"children":54},"h2",{"id":53},"overview",[55],{"type":48,"value":56},"Overview",{"type":42,"tag":58,"props":59,"children":60},"p",{},[61],{"type":48,"value":62},"Use this skill when the user truly benefits from 3D, GPU-heavy 2D, shader-driven animation, or WebGL-accelerated interaction. Three.js is appropriate for volumetric data, 3D point clouds, spatial trajectories, surfaces, scientific or immersive scenes, and custom particle systems. WebGL or WebGL-backed libraries are also appropriate for dense 2D scatterplots, animated networks, flow maps, particle trails, GPU aggregation, or custom shader effects that exceed practical SVG\u002FDOM limits and are not a good fit for Canvas2D.",{"type":42,"tag":58,"props":64,"children":65},{},[66],{"type":48,"value":67},"Default assumption: use the simplest truthful renderer that meets the scale and interaction requirements. 3D is justified only when depth carries analytical meaning. WebGL is justified when GPU throughput, shader control, large mark counts, or animation quality matter enough to offset accessibility, export, debugging, bundle, and GPU-memory costs. Cosmetic 3D or decorative particles are regressions.",{"type":42,"tag":58,"props":69,"children":70},{},[71,73,80],{"type":48,"value":72},"Mobile GPUs, touch gestures, battery, thermal limits, and permissions can change the renderer choice. Use ",{"type":42,"tag":74,"props":75,"children":77},"code",{"className":76},[],[78],{"type":48,"value":79},"..\u002F..\u002Freferences\u002Ffoundations\u002Fmobile-first-responsive-visualization.md",{"type":48,"value":81}," for mobile portrait\u002Flandscape contracts, AR\u002Fcamera\u002Fmotion\u002Fvibration decisions, visual viewport behavior, spotty connection handling, and touch-first controls.",{"type":42,"tag":51,"props":83,"children":85},{"id":84},"choose-webgl-when",[86],{"type":48,"value":87},"Choose WebGL When",{"type":42,"tag":89,"props":90,"children":91},"ul",{},[92,98,103,108,113,118,123,128,133],{"type":42,"tag":93,"props":94,"children":95},"li",{},[96],{"type":48,"value":97},"the data is inherently spatial, volumetric, trajectory-based, or surface-based",{"type":42,"tag":93,"props":99,"children":100},{},[101],{"type":48,"value":102},"depth, orbit, slicing, or perspective reveals structure unavailable in 2D",{"type":42,"tag":93,"props":104,"children":105},{},[106],{"type":48,"value":107},"an editorial story needs camera states to reveal a meaningful surface, volume, terrain, or multiaxis relationship",{"type":42,"tag":93,"props":109,"children":110},{},[111],{"type":48,"value":112},"GPU instancing, texture-backed data, or shader-based rendering materially improves scale",{"type":42,"tag":93,"props":114,"children":115},{},[116],{"type":48,"value":117},"dense 2D plots, networks, or maps need hundreds of thousands to millions of marks, continuous pan or zoom, or real-time filtering",{"type":42,"tag":93,"props":119,"children":120},{},[121],{"type":48,"value":122},"animated flow, trips, particles, or transitions must remain smooth without generating thousands of DOM or SVG elements",{"type":42,"tag":93,"props":124,"children":125},{},[126],{"type":48,"value":127},"the view needs GPU picking, custom blending, post-processing, or shader effects tied to data attributes",{"type":42,"tag":93,"props":129,"children":130},{},[131],{"type":48,"value":132},"the experience needs immersive or exploratory navigation",{"type":42,"tag":93,"props":134,"children":135},{},[136],{"type":48,"value":137},"AR or camera-backed spatial inspection adds analytical value and has a non-permission fallback",{"type":42,"tag":51,"props":139,"children":141},{"id":140},"avoid-webgl-when",[142],{"type":48,"value":143},"Avoid WebGL When",{"type":42,"tag":89,"props":145,"children":146},{},[147,152,157,162,167,172],{"type":42,"tag":93,"props":148,"children":149},{},[150],{"type":48,"value":151},"the same comparison is clearer in 2D",{"type":42,"tag":93,"props":153,"children":154},{},[155],{"type":48,"value":156},"labels and exact values dominate the task",{"type":42,"tag":93,"props":158,"children":159},{},[160],{"type":48,"value":161},"the chart will mostly be consumed as a static document",{"type":42,"tag":93,"props":163,"children":164},{},[165],{"type":48,"value":166},"a declarative grammar, D3\u002FSVG, or Canvas2D can handle the mark count with less maintenance and better export\u002Faccessibility",{"type":42,"tag":93,"props":168,"children":169},{},[170],{"type":48,"value":171},"the required effect is mostly decoration, novelty, or attention capture without a specific analytical verb",{"type":42,"tag":93,"props":173,"children":174},{},[175],{"type":48,"value":176},"the page will show many small charts where WebGL context pressure and GPU memory would outweigh per-chart speed",{"type":42,"tag":51,"props":178,"children":180},{"id":179},"library-selection",[181],{"type":48,"value":182},"Library Selection",{"type":42,"tag":89,"props":184,"children":185},{},[186,191,196,201,206,211,216,221,226,231,236,241],{"type":42,"tag":93,"props":187,"children":188},{},[189],{"type":48,"value":190},"Three.js: custom 3D scenes, point clouds, instancing, particles, shader materials, camera-led stories, and 3D analytical surfaces.",{"type":42,"tag":93,"props":192,"children":193},{},[194],{"type":48,"value":195},"deck.gl: high-volume geospatial and non-geospatial layers, GPU aggregation, picking, animated trips, arcs, paths, point clouds, and overlays on MapLibre, Mapbox, Google Maps, or ArcGIS.",{"type":42,"tag":93,"props":197,"children":198},{},[199],{"type":48,"value":200},"luma.gl: low-level WebGL2 or WebGPU-leaning GPU programming when deck.gl abstractions are too high-level but raw WebGL would be too much boilerplate.",{"type":42,"tag":93,"props":202,"children":203},{},[204],{"type":48,"value":205},"raw WebGL2: maximum control for custom shaders, data textures, transform feedback, framebuffers, or unusual render pipelines; reserve for teams comfortable owning GPU lifecycle and debugging.",{"type":42,"tag":93,"props":207,"children":208},{},[209],{"type":48,"value":210},"regl or TWGL: lighter low-level WebGL wrappers when custom shaders are needed without a full scene engine; regl is especially good for command-style, state-minimized rendering.",{"type":42,"tag":93,"props":212,"children":213},{},[214],{"type":48,"value":215},"PixiJS: GPU-accelerated 2D sprites, particles, texture atlases, labels-as-sprites, playful dashboards, and 2D editorial animation where a scene graph helps.",{"type":42,"tag":93,"props":217,"children":218},{},[219],{"type":48,"value":220},"Sigma.js: large interactive node-link graphs where WebGL rendering, graph layouts, hover states, and graph-specific affordances matter more than custom shader freedom.",{"type":42,"tag":93,"props":222,"children":223},{},[224],{"type":48,"value":225},"Plotly WebGL traces: fast scientific or product charts when a high-level declarative API is more important than custom rendering control.",{"type":42,"tag":93,"props":227,"children":228},{},[229],{"type":48,"value":230},"ECharts GL: configuration-driven 3D charts, globe views, and WebGL acceleration inside an ECharts product stack.",{"type":42,"tag":93,"props":232,"children":233},{},[234],{"type":48,"value":235},"MapLibre GL JS or Mapbox GL JS: vector-tile product maps, data-driven style layers, camera motion, heatmaps, and custom layers.",{"type":42,"tag":93,"props":237,"children":238},{},[239],{"type":48,"value":240},"CesiumJS: 3D globe, terrain, 3D Tiles, time-dynamic geospatial visualization, and high-precision WGS84 scenes.",{"type":42,"tag":93,"props":242,"children":243},{},[244],{"type":48,"value":245},"Babylon.js: full 3D engine features such as GPU particles, physics, rich materials, large-world rendering, and WebXR when the work is closer to an interactive simulation than a chart.",{"type":42,"tag":51,"props":247,"children":249},{"id":248},"particle-and-flow-effects",[250],{"type":48,"value":251},"Particle and Flow Effects",{"type":42,"tag":58,"props":253,"children":254},{},[255],{"type":48,"value":256},"Use particle effects only when they make movement, accumulation, attention, or state more legible:",{"type":42,"tag":89,"props":258,"children":259},{},[260,265,270,275,280],{"type":42,"tag":93,"props":261,"children":262},{},[263],{"type":48,"value":264},"flow particles along network edges, routes, pipes, links, or migration paths when direction and rate are the story",{"type":42,"tag":93,"props":266,"children":267},{},[268],{"type":48,"value":269},"trip trails or fading path segments when temporal progression matters",{"type":42,"tag":93,"props":271,"children":272},{},[273],{"type":48,"value":274},"pulsing, halo, shimmer, ember, or sparkle effects for selected, anomalous, high-risk, newly changed, or user-focused marks",{"type":42,"tag":93,"props":276,"children":277},{},[278],{"type":48,"value":279},"density particles, dot advection, or flow fields when a field is continuous and exact individual paths are not meaningful",{"type":42,"tag":93,"props":281,"children":282},{},[283],{"type":48,"value":284},"restrained fire, heat, glow, or hazard particles only when the metaphor matches the domain and does not trivialize serious subject matter",{"type":42,"tag":58,"props":286,"children":287},{},[288],{"type":48,"value":289},"Do not use particles when they obscure totals, imply individual entities that are not in the data, overstate certainty, glamorize harm, or compete with labels and comparison tasks. Always provide a reduced-motion fallback and a static final or key frame.",{"type":42,"tag":51,"props":291,"children":293},{"id":292},"default-architecture",[294],{"type":48,"value":295},"Default Architecture",{"type":42,"tag":297,"props":298,"children":299},"ol",{},[300,305,310,315,320,367,372,377,382,387,392,397,402,415,420],{"type":42,"tag":93,"props":301,"children":302},{},[303],{"type":48,"value":304},"Choose the renderer from data shape and interaction load before choosing visual style.",{"type":42,"tag":93,"props":306,"children":307},{},[308],{"type":48,"value":309},"Prefer orthographic projection for chart-like 3D or 2.5D scenes.",{"type":42,"tag":93,"props":311,"children":312},{},[313],{"type":48,"value":314},"Use perspective only when depth cues matter.",{"type":42,"tag":93,"props":316,"children":317},{},[318],{"type":48,"value":319},"Keep data-to-scene transforms explicit and reversible.",{"type":42,"tag":93,"props":321,"children":322},{},[323,325],{"type":48,"value":324},"Use GPU-friendly primitives:\n",{"type":42,"tag":89,"props":326,"children":327},{},[328,337,342,347,352,357,362],{"type":42,"tag":93,"props":329,"children":330},{},[331],{"type":42,"tag":74,"props":332,"children":334},{"className":333},[],[335],{"type":48,"value":336},"BufferGeometry",{"type":42,"tag":93,"props":338,"children":339},{},[340],{"type":48,"value":341},"instancing",{"type":42,"tag":93,"props":343,"children":344},{},[345],{"type":48,"value":346},"points",{"type":42,"tag":93,"props":348,"children":349},{},[350],{"type":48,"value":351},"sprites or billboards",{"type":42,"tag":93,"props":353,"children":354},{},[355],{"type":48,"value":356},"texture atlases",{"type":42,"tag":93,"props":358,"children":359},{},[360],{"type":48,"value":361},"typed arrays and binary attributes",{"type":42,"tag":93,"props":363,"children":364},{},[365],{"type":48,"value":366},"shader materials when needed",{"type":42,"tag":93,"props":368,"children":369},{},[370],{"type":48,"value":371},"Batch static marks, keep dynamic attributes narrow, and avoid re-uploading full buffers every frame.",{"type":42,"tag":93,"props":373,"children":374},{},[375],{"type":48,"value":376},"Assess how many scenes may be visible at once, because GPU memory, context pressure, and overlay complexity change the recommendation.",{"type":42,"tag":93,"props":378,"children":379},{},[380],{"type":48,"value":381},"Keep labels, legends, controls, and rich annotation in DOM or SVG overlays unless the scene truly demands in-canvas text.",{"type":42,"tag":93,"props":383,"children":384},{},[385],{"type":48,"value":386},"For editorial stories, define named camera or animation states as part of the annotation plan: overview, focus, comparison, reveal, final.",{"type":42,"tag":93,"props":388,"children":389},{},[390],{"type":48,"value":391},"Keep generated textures, basemaps, or illustrated backdrops separate from data geometry so they can be reviewed and swapped.",{"type":42,"tag":93,"props":393,"children":394},{},[395],{"type":48,"value":396},"For custom shaders, define the data contract first: attributes, uniforms, textures, derived values, picking IDs, and fallbacks.",{"type":42,"tag":93,"props":398,"children":399},{},[400],{"type":48,"value":401},"For particles, define emission source, path or field, speed, lifetime, color, opacity curve, decay, selection behavior, and reduced-motion state before coding.",{"type":42,"tag":93,"props":403,"children":404},{},[405,407,413],{"type":48,"value":406},"For advanced scenes, complete ",{"type":42,"tag":74,"props":408,"children":410},{"className":409},[],[411],{"type":48,"value":412},"..\u002F..\u002Fassets\u002Ftemplates\u002Fadvanced-interactive-visualization-contract.md",{"type":48,"value":414}," before implementation. Name one primary scene owner, a true fallback path, coordinate frames, camera states, picking model, animation clock, interaction state machine, render-ready signal, and screenshot QA.",{"type":42,"tag":93,"props":416,"children":417},{},[418],{"type":48,"value":419},"Never let a fallback or helper renderer duplicate the primary visual while WebGL is active. One renderer owns the focal scene; fallbacks appear only when the primary scene fails or is intentionally disabled.",{"type":42,"tag":93,"props":421,"children":422},{},[423],{"type":48,"value":424},"For mobile, cap DPR or quality when needed, pause offscreen\u002Finactive loops, lazy-load heavy assets with reserved dimensions, and define stale\u002Foffline rendering for streamed or tiled data.",{"type":42,"tag":51,"props":426,"children":428},{"id":427},"interaction-rules",[429],{"type":48,"value":430},"Interaction Rules",{"type":42,"tag":89,"props":432,"children":433},{},[434,439,444,449,454,459,464,469,474,479],{"type":42,"tag":93,"props":435,"children":436},{},[437],{"type":48,"value":438},"Support reset view, focus target, and orientation cues.",{"type":42,"tag":93,"props":440,"children":441},{},[442],{"type":48,"value":443},"Keep camera behavior predictable.",{"type":42,"tag":93,"props":445,"children":446},{},[447],{"type":48,"value":448},"Use shortest-path rotation or named camera states when focusing spherical or cyclic data.",{"type":42,"tag":93,"props":450,"children":451},{},[452],{"type":48,"value":453},"Use brushing, filtering, aggregation, level of detail, or slicing when full-scene density becomes unreadable.",{"type":42,"tag":93,"props":455,"children":456},{},[457],{"type":48,"value":458},"Pair 3D navigation with 2D summaries where possible.",{"type":42,"tag":93,"props":460,"children":461},{},[462],{"type":48,"value":463},"Prefer GPU picking, spatial indexes, ID buffers, or screen-space nearest-mark picking for dense hit testing; avoid per-mark DOM overlays except for selected or focused marks.",{"type":42,"tag":93,"props":465,"children":466},{},[467],{"type":48,"value":468},"Respect reduced-motion by providing direct camera-state controls, paused particles, a stepped sequence, or a static key-frame sequence.",{"type":42,"tag":93,"props":470,"children":471},{},[472],{"type":48,"value":473},"Preserve browser interaction expectations. If the scene captures wheel, pinch, or drag, provide clear reset and alternate controls.",{"type":42,"tag":93,"props":475,"children":476},{},[477],{"type":48,"value":478},"On mobile, provide tap\u002Ffocus selection, step-through or search for dense marks, explicit zoom buttons or two-finger gestures, and a portrait fallback when landscape is the richer inspection mode.",{"type":42,"tag":93,"props":480,"children":481},{},[482],{"type":48,"value":483},"Use WebXR, camera, device motion, vibration, notifications, or geolocation only when the capability has a named analytical purpose, a user-initiated permission moment, and an accessible fallback.",{"type":42,"tag":51,"props":485,"children":487},{"id":486},"output-expectations",[488],{"type":48,"value":489},"Output Expectations",{"type":42,"tag":89,"props":491,"children":492},{},[493,498,503,508,513,518,523,528,533,538,543],{"type":42,"tag":93,"props":494,"children":495},{},[496],{"type":48,"value":497},"Justify the WebGL choice against SVG, DOM, Canvas2D, and declarative options.",{"type":42,"tag":93,"props":499,"children":500},{},[501],{"type":48,"value":502},"Preserve orientation and scale cues.",{"type":42,"tag":93,"props":504,"children":505},{},[506],{"type":48,"value":507},"Provide screenshot or image export paths when the result must appear in reports.",{"type":42,"tag":93,"props":509,"children":510},{},[511],{"type":48,"value":512},"Keep labels, legends, and summaries readable in 2D overlays when exact reading matters.",{"type":42,"tag":93,"props":514,"children":515},{},[516],{"type":48,"value":517},"For animated WebGL, state the animation verb, frame budget, clock model, reduced-motion behavior, and static fallback.",{"type":42,"tag":93,"props":519,"children":520},{},[521],{"type":48,"value":522},"For particle effects, state what each particle represents, what it must not be interpreted as, and how opacity\u002Flifetime\u002Frate map to data.",{"type":42,"tag":93,"props":524,"children":525},{},[526],{"type":48,"value":527},"For glows, pulses, halos, thickness, blur, shimmer, or selection effects, state the exact data field or interaction state they encode. If the effect has no mapping, remove it.",{"type":42,"tag":93,"props":529,"children":530},{},[531],{"type":48,"value":532},"For editorial 3D or particle stories, state the first frame, final frame, camera or motion states, and 2D\u002Fstatic fallback.",{"type":42,"tag":93,"props":534,"children":535},{},[536],{"type":48,"value":537},"For new work, include a technical design section covering simultaneous scene count, GPU memory, context pressure, buffer update patterns, interaction costs, and maintenance tradeoffs versus Canvas2D and SVG\u002FDOM alternatives.",{"type":42,"tag":93,"props":539,"children":540},{},[541],{"type":48,"value":542},"For mobile work, include portrait and optional landscape framing, touch\u002Fpinch\u002Fcamera-control behavior, DPR\u002Fquality budget, battery\u002Fthermal assumptions, permission-gated capability fallbacks, and spotty-connection behavior.",{"type":42,"tag":93,"props":544,"children":545},{},[546],{"type":48,"value":547},"For globe, terrain, or map-like scenes, include coordinate-alignment checks for texture, basemap, markers, labels, hit testing, camera focus, and fallback geometry.",{"type":42,"tag":51,"props":549,"children":551},{"id":550},"references",[552],{"type":48,"value":553},"References",{"type":42,"tag":89,"props":555,"children":556},{},[557,609,689],{"type":42,"tag":93,"props":558,"children":559},{},[560,562],{"type":48,"value":561},"Shared theory:\n",{"type":42,"tag":89,"props":563,"children":564},{},[565,574,583,592,600],{"type":42,"tag":93,"props":566,"children":567},{},[568],{"type":42,"tag":74,"props":569,"children":571},{"className":570},[],[572],{"type":48,"value":573},"..\u002F..\u002Freferences\u002Ffoundations\u002Ftask-abstraction-and-chart-selection.md",{"type":42,"tag":93,"props":575,"children":576},{},[577],{"type":42,"tag":74,"props":578,"children":580},{"className":579},[],[581],{"type":48,"value":582},"..\u002F..\u002Freferences\u002Ffoundations\u002Fart-directed-interactive-visual-stories.md",{"type":42,"tag":93,"props":584,"children":585},{},[586],{"type":42,"tag":74,"props":587,"children":589},{"className":588},[],[590],{"type":48,"value":591},"..\u002F..\u002Freferences\u002Ffoundations\u002Fperception-color-and-encoding.md",{"type":42,"tag":93,"props":593,"children":594},{},[595],{"type":42,"tag":74,"props":596,"children":598},{"className":597},[],[599],{"type":48,"value":79},{"type":42,"tag":93,"props":601,"children":602},{},[603],{"type":42,"tag":74,"props":604,"children":606},{"className":605},[],[607],{"type":48,"value":608},"..\u002F..\u002Freferences\u002Ffoundations\u002Fimplementation-design-and-tradeoffs.md",{"type":42,"tag":93,"props":610,"children":611},{},[612,614],{"type":48,"value":613},"Skill references:\n",{"type":42,"tag":89,"props":615,"children":616},{},[617,626,635,644,653,662,671,680],{"type":42,"tag":93,"props":618,"children":619},{},[620],{"type":42,"tag":74,"props":621,"children":623},{"className":622},[],[624],{"type":48,"value":625},".\u002Freferences\u002Fwhen-3d-is-justified.md",{"type":42,"tag":93,"props":627,"children":628},{},[629],{"type":42,"tag":74,"props":630,"children":632},{"className":631},[],[633],{"type":48,"value":634},".\u002Freferences\u002Fscene-architecture-and-encodings.md",{"type":42,"tag":93,"props":636,"children":637},{},[638],{"type":42,"tag":74,"props":639,"children":641},{"className":640},[],[642],{"type":48,"value":643},".\u002Freferences\u002Fgpu-scaling-and-interaction.md",{"type":42,"tag":93,"props":645,"children":646},{},[647],{"type":42,"tag":74,"props":648,"children":650},{"className":649},[],[651],{"type":48,"value":652},".\u002Freferences\u002Fwebgl-library-selection.md",{"type":42,"tag":93,"props":654,"children":655},{},[656],{"type":42,"tag":74,"props":657,"children":659},{"className":658},[],[660],{"type":48,"value":661},".\u002Freferences\u002Fwebgl-2d-animation-patterns.md",{"type":42,"tag":93,"props":663,"children":664},{},[665],{"type":42,"tag":74,"props":666,"children":668},{"className":667},[],[669],{"type":48,"value":670},".\u002Freferences\u002Fparticle-effects-and-flow.md",{"type":42,"tag":93,"props":672,"children":673},{},[674],{"type":42,"tag":74,"props":675,"children":677},{"className":676},[],[678],{"type":48,"value":679},".\u002Freferences\u002Fscene-readiness-and-interaction-qa.md",{"type":42,"tag":93,"props":681,"children":682},{},[683],{"type":42,"tag":74,"props":684,"children":686},{"className":685},[],[687],{"type":48,"value":688},".\u002Freferences\u002Fcutaway-terrain-and-domain-scenes.md",{"type":42,"tag":93,"props":690,"children":691},{},[692,694],{"type":48,"value":693},"Templates:\n",{"type":42,"tag":89,"props":695,"children":696},{},[697],{"type":42,"tag":93,"props":698,"children":699},{},[700],{"type":42,"tag":74,"props":701,"children":703},{"className":702},[],[704],{"type":48,"value":412},{"type":42,"tag":51,"props":706,"children":708},{"id":707},"representative-prompts",[709],{"type":48,"value":710},"Representative Prompts",{"type":42,"tag":89,"props":712,"children":713},{},[714,719,724,729,734,739,744,749],{"type":42,"tag":93,"props":715,"children":716},{},[717],{"type":48,"value":718},"\"Visualize trajectories in 3D with brushing and focus.\"",{"type":42,"tag":93,"props":720,"children":721},{},[722],{"type":48,"value":723},"\"Render a dense point cloud with GPU instancing.\"",{"type":42,"tag":93,"props":725,"children":726},{},[727],{"type":48,"value":728},"\"Build a volumetric or surface view with supporting 2D annotations.\"",{"type":42,"tag":93,"props":730,"children":731},{},[732],{"type":48,"value":733},"\"Tell me whether this should stay 2D or move to Three.js.\"",{"type":42,"tag":93,"props":735,"children":736},{},[737],{"type":48,"value":738},"\"Design a Three.js scene that still reads clearly in screenshots.\"",{"type":42,"tag":93,"props":740,"children":741},{},[742],{"type":48,"value":743},"\"Build a WebGL scatterplot or network that can animate hundreds of thousands of marks.\"",{"type":42,"tag":93,"props":745,"children":746},{},[747],{"type":48,"value":748},"\"Use particles to show flow between nodes without making the chart feel decorative.\"",{"type":42,"tag":93,"props":750,"children":751},{},[752],{"type":48,"value":753},"\"Choose between deck.gl, Three.js, PixiJS, regl, raw WebGL, and Canvas2D for this visualization.\"",{"items":755,"total":958},[756,777,800,817,833,852,871,885,901,915,927,942],{"slug":757,"name":757,"fn":758,"description":759,"org":760,"tags":761,"stars":774,"repoUrl":775,"updatedAt":776},"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},[762,765,768,771],{"name":763,"slug":764,"type":15},"Documents","documents",{"name":766,"slug":767,"type":15},"Healthcare","healthcare",{"name":769,"slug":770,"type":15},"Insurance","insurance",{"name":772,"slug":773,"type":15},"Regulatory Compliance","regulatory-compliance",28169,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fopenai-agents-python","2026-04-16T05:11:39.180399",{"slug":778,"name":778,"fn":779,"description":780,"org":781,"tags":782,"stars":797,"repoUrl":798,"updatedAt":799},"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},[783,786,788,791,794],{"name":784,"slug":785,"type":15},".NET","dotnet",{"name":787,"slug":778,"type":15},"ASP.NET Core",{"name":789,"slug":790,"type":15},"Blazor","blazor",{"name":792,"slug":793,"type":15},"C#","csharp",{"name":795,"slug":796,"type":15},"Web Development","web-development",23787,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fskills","2026-04-12T05:07:02.819491",{"slug":801,"name":801,"fn":802,"description":803,"org":804,"tags":805,"stars":797,"repoUrl":798,"updatedAt":816},"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},[806,809,812,815],{"name":807,"slug":808,"type":15},"Apps SDK","apps-sdk",{"name":810,"slug":811,"type":15},"ChatGPT","chatgpt",{"name":813,"slug":814,"type":15},"MCP","mcp",{"name":9,"slug":8,"type":15},"2026-04-12T05:07:05.468097",{"slug":818,"name":818,"fn":819,"description":820,"org":821,"tags":822,"stars":797,"repoUrl":798,"updatedAt":832},"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},[823,826,829],{"name":824,"slug":825,"type":15},"API Development","api-development",{"name":827,"slug":828,"type":15},"CLI","cli",{"name":830,"slug":831,"type":15},"Codex","codex","2026-04-12T05:07:04.132762",{"slug":834,"name":834,"fn":835,"description":836,"org":837,"tags":838,"stars":797,"repoUrl":798,"updatedAt":851},"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},[839,842,845,848],{"name":840,"slug":841,"type":15},"Cloudflare","cloudflare",{"name":843,"slug":844,"type":15},"Cloudflare Pages","cloudflare-pages",{"name":846,"slug":847,"type":15},"Cloudflare Workers","cloudflare-workers",{"name":849,"slug":850,"type":15},"Deployment","deployment","2026-04-12T05:07:14.275118",{"slug":853,"name":853,"fn":854,"description":855,"org":856,"tags":857,"stars":797,"repoUrl":798,"updatedAt":870},"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},[858,861,864,867],{"name":859,"slug":860,"type":15},"Productivity","productivity",{"name":862,"slug":863,"type":15},"Project Management","project-management",{"name":865,"slug":866,"type":15},"Strategy","strategy",{"name":868,"slug":869,"type":15},"Task Management","task-management","2026-05-23T06:17:16.870838",{"slug":872,"name":872,"fn":873,"description":874,"org":875,"tags":876,"stars":797,"repoUrl":798,"updatedAt":884},"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},[877,880,882,883],{"name":878,"slug":879,"type":15},"Design","design",{"name":881,"slug":872,"type":15},"Figma",{"name":23,"slug":24,"type":15},{"name":813,"slug":814,"type":15},"2026-04-12T05:06:47.939943",{"slug":886,"name":886,"fn":887,"description":888,"org":889,"tags":890,"stars":797,"repoUrl":798,"updatedAt":900},"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},[891,892,895,896,897],{"name":878,"slug":879,"type":15},{"name":893,"slug":894,"type":15},"Design System","design-system",{"name":881,"slug":872,"type":15},{"name":23,"slug":24,"type":15},{"name":898,"slug":899,"type":15},"UI Components","ui-components","2026-05-10T05:59:52.971881",{"slug":902,"name":902,"fn":903,"description":904,"org":905,"tags":906,"stars":797,"repoUrl":798,"updatedAt":914},"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},[907,908,909,912,913],{"name":878,"slug":879,"type":15},{"name":893,"slug":894,"type":15},{"name":910,"slug":911,"type":15},"Documentation","documentation",{"name":881,"slug":872,"type":15},{"name":23,"slug":24,"type":15},"2026-05-16T06:07:47.821474",{"slug":916,"name":916,"fn":917,"description":918,"org":919,"tags":920,"stars":797,"repoUrl":798,"updatedAt":926},"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},[921,922,923,924,925],{"name":878,"slug":879,"type":15},{"name":881,"slug":872,"type":15},{"name":23,"slug":24,"type":15},{"name":898,"slug":899,"type":15},{"name":795,"slug":796,"type":15},"2026-05-16T06:07:40.583615",{"slug":928,"name":928,"fn":929,"description":930,"org":931,"tags":932,"stars":797,"repoUrl":798,"updatedAt":941},"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},[933,936,937,940],{"name":934,"slug":935,"type":15},"Animation","animation",{"name":830,"slug":831,"type":15},{"name":938,"slug":939,"type":15},"Creative","creative",{"name":878,"slug":879,"type":15},"2026-05-02T05:31:48.48485",{"slug":943,"name":943,"fn":944,"description":945,"org":946,"tags":947,"stars":797,"repoUrl":798,"updatedAt":957},"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},[948,949,950,953,956],{"name":938,"slug":939,"type":15},{"name":878,"slug":879,"type":15},{"name":951,"slug":952,"type":15},"Image Generation","image-generation",{"name":954,"slug":955,"type":15},"Images","images",{"name":9,"slug":8,"type":15},"2026-05-15T06:23:24.312127",675,{"items":960,"total":1069},[961,973,989,1001,1019,1037,1057],{"slug":962,"name":962,"fn":963,"description":964,"org":965,"tags":966,"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},[967,970,971,972],{"name":968,"slug":969,"type":15},"Accessibility","accessibility",{"name":20,"slug":21,"type":15},{"name":17,"slug":18,"type":15},{"name":878,"slug":879,"type":15},{"slug":974,"name":974,"fn":975,"description":976,"org":977,"tags":978,"stars":25,"repoUrl":26,"updatedAt":988},"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},[979,982,985],{"name":980,"slug":981,"type":15},"Agents","agents",{"name":983,"slug":984,"type":15},"Browser Automation","browser-automation",{"name":986,"slug":987,"type":15},"Testing","testing","2026-04-06T18:41:03.44016",{"slug":990,"name":990,"fn":991,"description":992,"org":993,"tags":994,"stars":25,"repoUrl":26,"updatedAt":1000},"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},[995,996,999],{"name":983,"slug":984,"type":15},{"name":997,"slug":998,"type":15},"Local Development","local-development",{"name":986,"slug":987,"type":15},"2026-04-06T18:41:17.526867",{"slug":1002,"name":1002,"fn":1003,"description":1004,"org":1005,"tags":1006,"stars":25,"repoUrl":26,"updatedAt":1018},"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},[1007,1008,1009,1012,1015],{"name":980,"slug":981,"type":15},{"name":846,"slug":847,"type":15},{"name":1010,"slug":1011,"type":15},"SDK","sdk",{"name":1013,"slug":1014,"type":15},"Serverless","serverless",{"name":1016,"slug":1017,"type":15},"WebSockets","websockets","2026-04-06T18:39:51.717063",{"slug":1020,"name":1020,"fn":1021,"description":1022,"org":1023,"tags":1024,"stars":25,"repoUrl":26,"updatedAt":1036},"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},[1025,1026,1029,1032,1033],{"name":23,"slug":24,"type":15},{"name":1027,"slug":1028,"type":15},"React","react",{"name":1030,"slug":1031,"type":15},"shadcn\u002Fui","shadcn-ui",{"name":898,"slug":899,"type":15},{"name":1034,"slug":1035,"type":15},"Vercel","vercel","2026-04-06T18:40:59.619419",{"slug":1038,"name":1038,"fn":1039,"description":1040,"org":1041,"tags":1042,"stars":25,"repoUrl":26,"updatedAt":1056},"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},[1043,1046,1049,1052,1055],{"name":1044,"slug":1045,"type":15},"AI Infrastructure","ai-infrastructure",{"name":1047,"slug":1048,"type":15},"Cost Optimization","cost-optimization",{"name":1050,"slug":1051,"type":15},"LLM","llm",{"name":1053,"slug":1054,"type":15},"Performance","performance",{"name":1034,"slug":1035,"type":15},"2026-04-06T18:40:44.377464",{"slug":1058,"name":1058,"fn":1059,"description":1060,"org":1061,"tags":1062,"stars":25,"repoUrl":26,"updatedAt":1068},"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},[1063,1064,1067],{"name":1047,"slug":1048,"type":15},{"name":1065,"slug":1066,"type":15},"Database","database",{"name":1050,"slug":1051,"type":15},"2026-04-06T18:41:08.513425",600]