[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-openai-testing-data-visualizations":3,"mdc--h09ui7-key":36,"related-repo-openai-testing-data-visualizations":849,"related-org-openai-testing-data-visualizations":968},{"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},"testing-data-visualizations","test data visualizations and dashboards","Test data visualizations and dashboards. Use when the user needs chart or diagram test strategy, screenshot or image diff testing, visual regression, mocked or synthetic chart data, component or unit tests, E2E dashboard QA, interactive UML-like diagram verification, scroll-driven story verification, export verification, or guidance on avoiding brittle over-testing.",{"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},"Dashboards","dashboards","tag",{"name":17,"slug":18,"type":15},"Data Visualization","data-visualization",{"name":20,"slug":21,"type":15},"Testing","testing",{"name":23,"slug":24,"type":15},"UI Testing","ui-testing",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\u002Ftesting-data-visualizations","---\nname: testing-data-visualizations\ndescription: Test data visualizations and dashboards. Use when the user needs chart or diagram test strategy, screenshot or image diff testing, visual regression, mocked or synthetic chart data, component or unit tests, E2E dashboard QA, interactive UML-like diagram verification, scroll-driven story verification, export verification, or guidance on avoiding brittle over-testing.\n---\n\n# Testing Data Visualizations\n\n## Overview\n\nUse this skill when the main question is how to verify a visualization, not just how to render one. Testing charts means protecting analytical truth, interaction behavior, rendering stability, and product integration without turning every pixel into a brittle contract.\n\nDefault assumption: use the smallest test mix that catches wrong numbers, broken interactions, and obvious visual regressions. Favor deterministic fixtures and targeted image baselines over giant snapshot suites.\n\n## Choose This Skill When\n\n- the user asks how to test a chart, dashboard, or visualization component\n- screenshot testing, image diffing, or visual regression is the main concern\n- the user needs help deciding what to mock and where to mock it\n- the question is about unit versus component versus E2E coverage\n- a live dashboard, export flow, or embedded chart needs QA strategy\n- the user wants help trimming a brittle or overgrown chart test suite\n\n## Working Pattern\n\n1. Identify the highest-risk failures:\n   - wrong transforms, aggregation, binning, stacking, or sorting\n   - wrong scale domain, legend mapping, or annotation placement\n   - broken hover, focus, selection, brush, or cross-filter behavior\n   - mobile layouts that put controls or prose before the main visualization, hide the chart behind settings, or fail to return to the chart after Apply, Cancel, Reset, or close\n   - touch interactions with tiny hit targets, hover-only values, missing drag alternatives, scroll hijacking, or broken pinch\u002Fzoom ownership\n   - on-screen keyboard and visual viewport regressions that cover the main evidence or the only critical action\n   - operational workspace regressions where outline trees, filters, selected marks, central viewport, URL state, and inspectors fall out of sync\n   - mobile capability regressions where AR, camera, motion, vibration, notification, or geolocation prompts appear too early, lack fallbacks, or become required without user approval\n   - spotty-connection regressions where live visualizations blank out, lose stale indicators, mislabel partial data, or fail to reconnect gracefully\n   - wheel-zoom, pinch, or drag interactions that also scroll the page or leak scroll chaining to the document\n   - clipping, overlap, layout drift, or export mismatch\n   - project changes or implementation code that began before the user approved a required generated design concept\n   - Codex image-generated concepts whose implementation preserves only the vibe or pixels but loses the claim, source context, caveat, evidence hierarchy, layout contract, or interaction staging\n   - generated asset crop, overlay alignment, or label-safe region regressions\n   - Canvas or WebGL render readiness, context loss, blank frames, high-DPI scaling, and overlay alignment\n   - WebGL fallback duplication where a fallback remains visible behind or above the primary scene\n   - globe, map, terrain, or cutaway coordinate-frame regressions where markers, labels, textures, hit testing, and camera focus no longer align\n   - interaction state-machine regressions where hover, selection, expansion, pause\u002Fresume, drag, wheel, reset, close, or idle behavior changes meaning\n   - animated story states whose first frame, key frames, or final frame no longer communicate the claim\n   - scrollytelling or parallax states that desynchronize text, data layers, media, trigger ranges, or reduced-motion fallbacks\n   - composite reports, decks, or stories where embedded visual layers bypassed specialist mini-briefs and became generic chart cards\n   - UML-like or software architecture diagrams with stale generated source, invalid relationships, broken import\u002Fexport, layout overlap, lost source IDs, or round-trip drift\n   - fictional or synthetic story simulations whose seeded data no longer supports the editorial claim, route ranking, event timing, or derived comparisons\n   - stale, empty, partial, loading, or failure state regressions\n2. Choose the lightest effective layer:\n   - unit tests for pure data shaping and formatting logic\n   - component tests for public chart contracts and interaction callbacks\n   - visual regression for layout-sensitive and appearance-sensitive states\n   - E2E tests for real user workflows, async data behavior, and export paths\n3. Make rendering deterministic before asserting:\n   - fixed viewport and container size\n   - stable fonts, theme tokens, locale, and timezone\n   - reduced or disabled animation\n   - reduced-motion and final-state fixtures for animated stories\n   - deterministic scroll position, viewport size, scene id, progress value, and media readiness for scrollytelling stories\n   - deterministic WebGL camera, clock, particle seed, device pixel ratio, and quality settings\n   - seeded or fixture-backed data\n   - fixed generated asset fixtures or checked-in placeholders instead of live generation inside tests\n   - approved large-screen and mobile concept screenshots or references plus a semantic design contract fixture, locked\u002Fflexible element fixture, concise concept-review bullet summary, and user approval record for concepted visualization work\n   - deterministic desktop, mobile portrait, and optional mobile landscape viewport sizes\n   - deterministic operational workspace fixtures for mode, selected entity, filters, outline scroll, inspector state, zoom or camera, and mobile panel state\n   - visual viewport or keyboard-open fixture for input-heavy mobile views\n   - mocked online, offline, delayed, stale, partial, and reconnect states for live\u002Fmobile data\n   - mocked permission-denied and unsupported states for AR, camera, motion, vibration, notification, and geolocation paths when used\n   - fixed fictional simulation seeds plus invariant checks for entity counts, event windows, value ranges, ranking outcomes, and summary consistency\n   - explicit render-ready signals before capture\n4. Mock at the boundary:\n   - prefer mocked network responses, data loaders, or repository adapters\n   - keep transform and render logic real whenever practical\n   - maintain canonical, edge-case, and stress fixtures\n5. Define the non-goals:\n   - do not test third-party chart library internals\n   - do not duplicate the same assertion at every layer\n   - do not baseline volatile states unless the volatility is the feature\n6. When the visualization is operational or live, include stale, delayed, empty, and degraded modes.\n\n## Coverage Heuristics\n\n- Unit tests are appropriate for scales, domains, bin boundaries, sort rules, label formatting, tooltip payload shaping, color assignment, selection reducers, and any logic that can fail without rendering.\n- Component tests are appropriate for legends, axis labels that matter semantically, accessible names, empty and error states, callback payloads, interaction wiring, and conditional UI around the chart.\n- Screenshot or image tests are appropriate for overlap, clipping, tick collisions, annotation placement, color regressions, dense mark readability, and regression-prone layout states.\n- For art-directed editorial stories, screenshot tests are appropriate for first frame, selected key frames, final frame, generated-asset alignment, mobile crop behavior, and mobile portrait or landscape contract fidelity.\n- For concept-first visualization work, pair visual regression with semantic fidelity checks against the shared design workflow: approved concept references, recorded review bullets, implementation-after-approval evidence, locked and flexible elements, approved deviations, title claim, required comparison, denominator, scale, caveat, source visibility, measured\u002Festimated\u002Fschematic styling, and data-bound label preservation.\n- For scrollytelling and parallax stories, cover enter, exit, reverse scroll, fast scroll, resize, reduced-motion, stacked mobile fallback, and static key frames.\n- For fictional visual stories, add data invariant tests before visual regression: deterministic seed output, minimum richness layers, expected event timing, primary claim truth, and derived summary agreement.\n- E2E tests are appropriate for cross-chart coordination, URL or filter state, live refresh behavior, drill-down, exports, downloads, and embedding or routing flows.\n- For Canvas or WebGL charts, rely more on data-contract tests, interaction tests, render-ready markers, canvas-pixel sanity checks, context-loss coverage, and targeted visual baselines than on DOM snapshots.\n- For advanced WebGL\u002Fgeospatial\u002Fcutaway work, include desktop, mobile portrait, and optional mobile landscape screenshots, a no-WebGL fallback screenshot, a nonblank canvas-pixel or first-frame check, coordinate alignment spot checks, and live interaction smoke tests for drag, wheel, click, tap, hover, keyboard, reset, expand, close, and pinch as applicable.\n- For mobile dashboards and live views, cover last-known-good rendering, stale\u002Flive\u002Foffline\u002Fpartial badges, delayed events, reconnect, background\u002Fresume, lower-frequency degradation, notification opt-in, and vibration or alert fallbacks when used.\n- For particle or flow animation, capture first frame, a representative key frame, final or paused state, and reduced-motion fallback rather than baselining every frame.\n- For UML-like diagrams, test parser\u002Fmodel normalization, semantic diagnostics, layout fixtures, interaction states, export snapshots, and source round-tripping when the product promises it.\n\n## Output Expectations\n\n- Propose a layered test plan instead of a single-tool answer.\n- Separate data correctness, visual stability, and workflow coverage.\n- Explain where real data, mocked data, and synthetic fixtures each belong.\n- Call out brittleness risks and how to keep the suite deterministic.\n- When implementing tests, start with the narrowest high-value slice before scaling coverage.\n- For visual stories, include a human review checklist in release notes when imagery, WebGL, particles, 3D, or animation materially affects interpretation.\n- For concepted work, include the shared workflow evidence: approval status, approved concept references, concise review bullets, visual design contract, locked\u002Fflexible element record, mobile\u002Flandscape continuation record, material mismatches, fixes or approved deviations, and semantic fidelity QA results.\n- For mobile-capable browser work, include screenshot or interaction checks for mobile portrait, mobile landscape when justified, main-visualization visibility, settings return path, touch targets, hover replacement, drag alternatives, keyboard-open viewport, spotty connection, and permission-denied fallbacks.\n- For operational workspaces, include checks for command bars, outline\u002Ffilter\u002Fdetail panels, default selection, synchronized inspector state, pan\u002Fzoom\u002Freset, empty-surface click versus drag, URL restore, and mobile command-panel behavior.\n- For composite deliverables, include embedded visualization self-use review notes: each layer's specialist owner, mini-brief, QA check, and delegated or local fresh-pass status.\n- For simulated stories, include data-richness and self-use-gate review notes: which specialist skill shaped each embedded visualization, which mini-brief it followed, and which invariants prove the fictional data still supports the story.\n\n## References\n\n- Shared theory:\n  - `..\u002F..\u002Freferences\u002Ffoundations\u002Fimplementation-design-and-tradeoffs.md`\n  - `..\u002F..\u002Freferences\u002Ffoundations\u002Fmeaning-preserving-visual-design-workflow.md`\n  - `..\u002F..\u002Freferences\u002Ffoundations\u002Fembedded-visualization-self-use.md`\n  - `..\u002F..\u002Freferences\u002Ffoundations\u002Fmobile-first-responsive-visualization.md`\n  - `..\u002F..\u002Freferences\u002Ffoundations\u002Foperational-visualization-workspaces.md`\n- Skill references:\n  - `.\u002Freferences\u002Ftest-level-selection.md`\n  - `.\u002Freferences\u002Funit-and-component-tests.md`\n  - `.\u002Freferences\u002Fvisual-regression-and-image-testing.md`\n  - `.\u002Freferences\u002Fdata-mocking-and-fixtures.md`\n  - `.\u002Freferences\u002Fe2e-dashboard-and-export-strategies.md`\n  - `.\u002Freferences\u002Favoiding-brittle-over-testing.md`\n- Useful templates:\n  - `..\u002F..\u002Fassets\u002Ftemplates\u002Fvisualization-test-plan.md`\n  - `..\u002F..\u002Fassets\u002Ftemplates\u002Fvisual-design-contract.md`\n  - `..\u002F..\u002Fassets\u002Ftemplates\u002Fadvanced-interactive-visualization-contract.md`\n  - `..\u002F..\u002Fassets\u002Ftemplates\u002Finteractive-uml-test-plan.md`\n  - `..\u002F..\u002Fassets\u002Ftemplates\u002Fplaywright-visual-regression-starter.ts`\n- Adjacent skills:\n  - `..\u002Fscrollytelling-and-parallax-data-visualization\u002FSKILL.md`\n  - `..\u002Fuml-and-software-architecture-visualization\u002FSKILL.md`\n  - `..\u002Freact-and-nextjs-data-visualization\u002FSKILL.md`\n  - `..\u002Ftypescript-data-visualization-engineering\u002FSKILL.md`\n  - `..\u002F..\u002Freferences\u002Ffoundations\u002Ffictional-data-story-simulation.md`\n  - `..\u002Fdashboards-and-real-time-visualization\u002FSKILL.md`\n  - `..\u002Faccessibility-and-inclusive-visualization\u002FSKILL.md`\n\n## Representative Prompts\n\n- \"How should I test this React chart component?\"\n- \"Set up screenshot testing for this dashboard without making it flaky.\"\n- \"What data should I mock for this D3 or Canvas visualization?\"\n- \"Which parts of this chart deserve unit tests versus E2E tests?\"\n- \"Help me design visual regression coverage for a live monitoring screen.\"\n- \"Review this visualization test suite and tell me what to delete.\"\n- \"Design tests for a parallax scrollytelling story without making screenshots flaky.\"\n- \"Design tests for an interactive UML, ERD, state machine, flow, dependency, or architecture diagram.\"\n",{"data":37,"body":38},{"name":4,"description":6},{"type":39,"children":40},"root",[41,49,56,62,67,73,108,114,413,419,487,493,551,557,800,806],{"type":42,"tag":43,"props":44,"children":45},"element","h1",{"id":4},[46],{"type":47,"value":48},"text","Testing Data Visualizations",{"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 the main question is how to verify a visualization, not just how to render one. Testing charts means protecting analytical truth, interaction behavior, rendering stability, and product integration without turning every pixel into a brittle contract.",{"type":42,"tag":57,"props":63,"children":64},{},[65],{"type":47,"value":66},"Default assumption: use the smallest test mix that catches wrong numbers, broken interactions, and obvious visual regressions. Favor deterministic fixtures and targeted image baselines over giant snapshot suites.",{"type":42,"tag":50,"props":68,"children":70},{"id":69},"choose-this-skill-when",[71],{"type":47,"value":72},"Choose This Skill When",{"type":42,"tag":74,"props":75,"children":76},"ul",{},[77,83,88,93,98,103],{"type":42,"tag":78,"props":79,"children":80},"li",{},[81],{"type":47,"value":82},"the user asks how to test a chart, dashboard, or visualization component",{"type":42,"tag":78,"props":84,"children":85},{},[86],{"type":47,"value":87},"screenshot testing, image diffing, or visual regression is the main concern",{"type":42,"tag":78,"props":89,"children":90},{},[91],{"type":47,"value":92},"the user needs help deciding what to mock and where to mock it",{"type":42,"tag":78,"props":94,"children":95},{},[96],{"type":47,"value":97},"the question is about unit versus component versus E2E coverage",{"type":42,"tag":78,"props":99,"children":100},{},[101],{"type":47,"value":102},"a live dashboard, export flow, or embedded chart needs QA strategy",{"type":42,"tag":78,"props":104,"children":105},{},[106],{"type":47,"value":107},"the user wants help trimming a brittle or overgrown chart test suite",{"type":42,"tag":50,"props":109,"children":111},{"id":110},"working-pattern",[112],{"type":47,"value":113},"Working Pattern",{"type":42,"tag":115,"props":116,"children":117},"ol",{},[118,246,274,362,385,408],{"type":42,"tag":78,"props":119,"children":120},{},[121,123],{"type":47,"value":122},"Identify the highest-risk failures:\n",{"type":42,"tag":74,"props":124,"children":125},{},[126,131,136,141,146,151,156,161,166,171,176,181,186,191,196,201,206,211,216,221,226,231,236,241],{"type":42,"tag":78,"props":127,"children":128},{},[129],{"type":47,"value":130},"wrong transforms, aggregation, binning, stacking, or sorting",{"type":42,"tag":78,"props":132,"children":133},{},[134],{"type":47,"value":135},"wrong scale domain, legend mapping, or annotation placement",{"type":42,"tag":78,"props":137,"children":138},{},[139],{"type":47,"value":140},"broken hover, focus, selection, brush, or cross-filter behavior",{"type":42,"tag":78,"props":142,"children":143},{},[144],{"type":47,"value":145},"mobile layouts that put controls or prose before the main visualization, hide the chart behind settings, or fail to return to the chart after Apply, Cancel, Reset, or close",{"type":42,"tag":78,"props":147,"children":148},{},[149],{"type":47,"value":150},"touch interactions with tiny hit targets, hover-only values, missing drag alternatives, scroll hijacking, or broken pinch\u002Fzoom ownership",{"type":42,"tag":78,"props":152,"children":153},{},[154],{"type":47,"value":155},"on-screen keyboard and visual viewport regressions that cover the main evidence or the only critical action",{"type":42,"tag":78,"props":157,"children":158},{},[159],{"type":47,"value":160},"operational workspace regressions where outline trees, filters, selected marks, central viewport, URL state, and inspectors fall out of sync",{"type":42,"tag":78,"props":162,"children":163},{},[164],{"type":47,"value":165},"mobile capability regressions where AR, camera, motion, vibration, notification, or geolocation prompts appear too early, lack fallbacks, or become required without user approval",{"type":42,"tag":78,"props":167,"children":168},{},[169],{"type":47,"value":170},"spotty-connection regressions where live visualizations blank out, lose stale indicators, mislabel partial data, or fail to reconnect gracefully",{"type":42,"tag":78,"props":172,"children":173},{},[174],{"type":47,"value":175},"wheel-zoom, pinch, or drag interactions that also scroll the page or leak scroll chaining to the document",{"type":42,"tag":78,"props":177,"children":178},{},[179],{"type":47,"value":180},"clipping, overlap, layout drift, or export mismatch",{"type":42,"tag":78,"props":182,"children":183},{},[184],{"type":47,"value":185},"project changes or implementation code that began before the user approved a required generated design concept",{"type":42,"tag":78,"props":187,"children":188},{},[189],{"type":47,"value":190},"Codex image-generated concepts whose implementation preserves only the vibe or pixels but loses the claim, source context, caveat, evidence hierarchy, layout contract, or interaction staging",{"type":42,"tag":78,"props":192,"children":193},{},[194],{"type":47,"value":195},"generated asset crop, overlay alignment, or label-safe region regressions",{"type":42,"tag":78,"props":197,"children":198},{},[199],{"type":47,"value":200},"Canvas or WebGL render readiness, context loss, blank frames, high-DPI scaling, and overlay alignment",{"type":42,"tag":78,"props":202,"children":203},{},[204],{"type":47,"value":205},"WebGL fallback duplication where a fallback remains visible behind or above the primary scene",{"type":42,"tag":78,"props":207,"children":208},{},[209],{"type":47,"value":210},"globe, map, terrain, or cutaway coordinate-frame regressions where markers, labels, textures, hit testing, and camera focus no longer align",{"type":42,"tag":78,"props":212,"children":213},{},[214],{"type":47,"value":215},"interaction state-machine regressions where hover, selection, expansion, pause\u002Fresume, drag, wheel, reset, close, or idle behavior changes meaning",{"type":42,"tag":78,"props":217,"children":218},{},[219],{"type":47,"value":220},"animated story states whose first frame, key frames, or final frame no longer communicate the claim",{"type":42,"tag":78,"props":222,"children":223},{},[224],{"type":47,"value":225},"scrollytelling or parallax states that desynchronize text, data layers, media, trigger ranges, or reduced-motion fallbacks",{"type":42,"tag":78,"props":227,"children":228},{},[229],{"type":47,"value":230},"composite reports, decks, or stories where embedded visual layers bypassed specialist mini-briefs and became generic chart cards",{"type":42,"tag":78,"props":232,"children":233},{},[234],{"type":47,"value":235},"UML-like or software architecture diagrams with stale generated source, invalid relationships, broken import\u002Fexport, layout overlap, lost source IDs, or round-trip drift",{"type":42,"tag":78,"props":237,"children":238},{},[239],{"type":47,"value":240},"fictional or synthetic story simulations whose seeded data no longer supports the editorial claim, route ranking, event timing, or derived comparisons",{"type":42,"tag":78,"props":242,"children":243},{},[244],{"type":47,"value":245},"stale, empty, partial, loading, or failure state regressions",{"type":42,"tag":78,"props":247,"children":248},{},[249,251],{"type":47,"value":250},"Choose the lightest effective layer:\n",{"type":42,"tag":74,"props":252,"children":253},{},[254,259,264,269],{"type":42,"tag":78,"props":255,"children":256},{},[257],{"type":47,"value":258},"unit tests for pure data shaping and formatting logic",{"type":42,"tag":78,"props":260,"children":261},{},[262],{"type":47,"value":263},"component tests for public chart contracts and interaction callbacks",{"type":42,"tag":78,"props":265,"children":266},{},[267],{"type":47,"value":268},"visual regression for layout-sensitive and appearance-sensitive states",{"type":42,"tag":78,"props":270,"children":271},{},[272],{"type":47,"value":273},"E2E tests for real user workflows, async data behavior, and export paths",{"type":42,"tag":78,"props":275,"children":276},{},[277,279],{"type":47,"value":278},"Make rendering deterministic before asserting:\n",{"type":42,"tag":74,"props":280,"children":281},{},[282,287,292,297,302,307,312,317,322,327,332,337,342,347,352,357],{"type":42,"tag":78,"props":283,"children":284},{},[285],{"type":47,"value":286},"fixed viewport and container size",{"type":42,"tag":78,"props":288,"children":289},{},[290],{"type":47,"value":291},"stable fonts, theme tokens, locale, and timezone",{"type":42,"tag":78,"props":293,"children":294},{},[295],{"type":47,"value":296},"reduced or disabled animation",{"type":42,"tag":78,"props":298,"children":299},{},[300],{"type":47,"value":301},"reduced-motion and final-state fixtures for animated stories",{"type":42,"tag":78,"props":303,"children":304},{},[305],{"type":47,"value":306},"deterministic scroll position, viewport size, scene id, progress value, and media readiness for scrollytelling stories",{"type":42,"tag":78,"props":308,"children":309},{},[310],{"type":47,"value":311},"deterministic WebGL camera, clock, particle seed, device pixel ratio, and quality settings",{"type":42,"tag":78,"props":313,"children":314},{},[315],{"type":47,"value":316},"seeded or fixture-backed data",{"type":42,"tag":78,"props":318,"children":319},{},[320],{"type":47,"value":321},"fixed generated asset fixtures or checked-in placeholders instead of live generation inside tests",{"type":42,"tag":78,"props":323,"children":324},{},[325],{"type":47,"value":326},"approved large-screen and mobile concept screenshots or references plus a semantic design contract fixture, locked\u002Fflexible element fixture, concise concept-review bullet summary, and user approval record for concepted visualization work",{"type":42,"tag":78,"props":328,"children":329},{},[330],{"type":47,"value":331},"deterministic desktop, mobile portrait, and optional mobile landscape viewport sizes",{"type":42,"tag":78,"props":333,"children":334},{},[335],{"type":47,"value":336},"deterministic operational workspace fixtures for mode, selected entity, filters, outline scroll, inspector state, zoom or camera, and mobile panel state",{"type":42,"tag":78,"props":338,"children":339},{},[340],{"type":47,"value":341},"visual viewport or keyboard-open fixture for input-heavy mobile views",{"type":42,"tag":78,"props":343,"children":344},{},[345],{"type":47,"value":346},"mocked online, offline, delayed, stale, partial, and reconnect states for live\u002Fmobile data",{"type":42,"tag":78,"props":348,"children":349},{},[350],{"type":47,"value":351},"mocked permission-denied and unsupported states for AR, camera, motion, vibration, notification, and geolocation paths when used",{"type":42,"tag":78,"props":353,"children":354},{},[355],{"type":47,"value":356},"fixed fictional simulation seeds plus invariant checks for entity counts, event windows, value ranges, ranking outcomes, and summary consistency",{"type":42,"tag":78,"props":358,"children":359},{},[360],{"type":47,"value":361},"explicit render-ready signals before capture",{"type":42,"tag":78,"props":363,"children":364},{},[365,367],{"type":47,"value":366},"Mock at the boundary:\n",{"type":42,"tag":74,"props":368,"children":369},{},[370,375,380],{"type":42,"tag":78,"props":371,"children":372},{},[373],{"type":47,"value":374},"prefer mocked network responses, data loaders, or repository adapters",{"type":42,"tag":78,"props":376,"children":377},{},[378],{"type":47,"value":379},"keep transform and render logic real whenever practical",{"type":42,"tag":78,"props":381,"children":382},{},[383],{"type":47,"value":384},"maintain canonical, edge-case, and stress fixtures",{"type":42,"tag":78,"props":386,"children":387},{},[388,390],{"type":47,"value":389},"Define the non-goals:\n",{"type":42,"tag":74,"props":391,"children":392},{},[393,398,403],{"type":42,"tag":78,"props":394,"children":395},{},[396],{"type":47,"value":397},"do not test third-party chart library internals",{"type":42,"tag":78,"props":399,"children":400},{},[401],{"type":47,"value":402},"do not duplicate the same assertion at every layer",{"type":42,"tag":78,"props":404,"children":405},{},[406],{"type":47,"value":407},"do not baseline volatile states unless the volatility is the feature",{"type":42,"tag":78,"props":409,"children":410},{},[411],{"type":47,"value":412},"When the visualization is operational or live, include stale, delayed, empty, and degraded modes.",{"type":42,"tag":50,"props":414,"children":416},{"id":415},"coverage-heuristics",[417],{"type":47,"value":418},"Coverage Heuristics",{"type":42,"tag":74,"props":420,"children":421},{},[422,427,432,437,442,447,452,457,462,467,472,477,482],{"type":42,"tag":78,"props":423,"children":424},{},[425],{"type":47,"value":426},"Unit tests are appropriate for scales, domains, bin boundaries, sort rules, label formatting, tooltip payload shaping, color assignment, selection reducers, and any logic that can fail without rendering.",{"type":42,"tag":78,"props":428,"children":429},{},[430],{"type":47,"value":431},"Component tests are appropriate for legends, axis labels that matter semantically, accessible names, empty and error states, callback payloads, interaction wiring, and conditional UI around the chart.",{"type":42,"tag":78,"props":433,"children":434},{},[435],{"type":47,"value":436},"Screenshot or image tests are appropriate for overlap, clipping, tick collisions, annotation placement, color regressions, dense mark readability, and regression-prone layout states.",{"type":42,"tag":78,"props":438,"children":439},{},[440],{"type":47,"value":441},"For art-directed editorial stories, screenshot tests are appropriate for first frame, selected key frames, final frame, generated-asset alignment, mobile crop behavior, and mobile portrait or landscape contract fidelity.",{"type":42,"tag":78,"props":443,"children":444},{},[445],{"type":47,"value":446},"For concept-first visualization work, pair visual regression with semantic fidelity checks against the shared design workflow: approved concept references, recorded review bullets, implementation-after-approval evidence, locked and flexible elements, approved deviations, title claim, required comparison, denominator, scale, caveat, source visibility, measured\u002Festimated\u002Fschematic styling, and data-bound label preservation.",{"type":42,"tag":78,"props":448,"children":449},{},[450],{"type":47,"value":451},"For scrollytelling and parallax stories, cover enter, exit, reverse scroll, fast scroll, resize, reduced-motion, stacked mobile fallback, and static key frames.",{"type":42,"tag":78,"props":453,"children":454},{},[455],{"type":47,"value":456},"For fictional visual stories, add data invariant tests before visual regression: deterministic seed output, minimum richness layers, expected event timing, primary claim truth, and derived summary agreement.",{"type":42,"tag":78,"props":458,"children":459},{},[460],{"type":47,"value":461},"E2E tests are appropriate for cross-chart coordination, URL or filter state, live refresh behavior, drill-down, exports, downloads, and embedding or routing flows.",{"type":42,"tag":78,"props":463,"children":464},{},[465],{"type":47,"value":466},"For Canvas or WebGL charts, rely more on data-contract tests, interaction tests, render-ready markers, canvas-pixel sanity checks, context-loss coverage, and targeted visual baselines than on DOM snapshots.",{"type":42,"tag":78,"props":468,"children":469},{},[470],{"type":47,"value":471},"For advanced WebGL\u002Fgeospatial\u002Fcutaway work, include desktop, mobile portrait, and optional mobile landscape screenshots, a no-WebGL fallback screenshot, a nonblank canvas-pixel or first-frame check, coordinate alignment spot checks, and live interaction smoke tests for drag, wheel, click, tap, hover, keyboard, reset, expand, close, and pinch as applicable.",{"type":42,"tag":78,"props":473,"children":474},{},[475],{"type":47,"value":476},"For mobile dashboards and live views, cover last-known-good rendering, stale\u002Flive\u002Foffline\u002Fpartial badges, delayed events, reconnect, background\u002Fresume, lower-frequency degradation, notification opt-in, and vibration or alert fallbacks when used.",{"type":42,"tag":78,"props":478,"children":479},{},[480],{"type":47,"value":481},"For particle or flow animation, capture first frame, a representative key frame, final or paused state, and reduced-motion fallback rather than baselining every frame.",{"type":42,"tag":78,"props":483,"children":484},{},[485],{"type":47,"value":486},"For UML-like diagrams, test parser\u002Fmodel normalization, semantic diagnostics, layout fixtures, interaction states, export snapshots, and source round-tripping when the product promises it.",{"type":42,"tag":50,"props":488,"children":490},{"id":489},"output-expectations",[491],{"type":47,"value":492},"Output Expectations",{"type":42,"tag":74,"props":494,"children":495},{},[496,501,506,511,516,521,526,531,536,541,546],{"type":42,"tag":78,"props":497,"children":498},{},[499],{"type":47,"value":500},"Propose a layered test plan instead of a single-tool answer.",{"type":42,"tag":78,"props":502,"children":503},{},[504],{"type":47,"value":505},"Separate data correctness, visual stability, and workflow coverage.",{"type":42,"tag":78,"props":507,"children":508},{},[509],{"type":47,"value":510},"Explain where real data, mocked data, and synthetic fixtures each belong.",{"type":42,"tag":78,"props":512,"children":513},{},[514],{"type":47,"value":515},"Call out brittleness risks and how to keep the suite deterministic.",{"type":42,"tag":78,"props":517,"children":518},{},[519],{"type":47,"value":520},"When implementing tests, start with the narrowest high-value slice before scaling coverage.",{"type":42,"tag":78,"props":522,"children":523},{},[524],{"type":47,"value":525},"For visual stories, include a human review checklist in release notes when imagery, WebGL, particles, 3D, or animation materially affects interpretation.",{"type":42,"tag":78,"props":527,"children":528},{},[529],{"type":47,"value":530},"For concepted work, include the shared workflow evidence: approval status, approved concept references, concise review bullets, visual design contract, locked\u002Fflexible element record, mobile\u002Flandscape continuation record, material mismatches, fixes or approved deviations, and semantic fidelity QA results.",{"type":42,"tag":78,"props":532,"children":533},{},[534],{"type":47,"value":535},"For mobile-capable browser work, include screenshot or interaction checks for mobile portrait, mobile landscape when justified, main-visualization visibility, settings return path, touch targets, hover replacement, drag alternatives, keyboard-open viewport, spotty connection, and permission-denied fallbacks.",{"type":42,"tag":78,"props":537,"children":538},{},[539],{"type":47,"value":540},"For operational workspaces, include checks for command bars, outline\u002Ffilter\u002Fdetail panels, default selection, synchronized inspector state, pan\u002Fzoom\u002Freset, empty-surface click versus drag, URL restore, and mobile command-panel behavior.",{"type":42,"tag":78,"props":542,"children":543},{},[544],{"type":47,"value":545},"For composite deliverables, include embedded visualization self-use review notes: each layer's specialist owner, mini-brief, QA check, and delegated or local fresh-pass status.",{"type":42,"tag":78,"props":547,"children":548},{},[549],{"type":47,"value":550},"For simulated stories, include data-richness and self-use-gate review notes: which specialist skill shaped each embedded visualization, which mini-brief it followed, and which invariants prove the fictional data still supports the story.",{"type":42,"tag":50,"props":552,"children":554},{"id":553},"references",[555],{"type":47,"value":556},"References",{"type":42,"tag":74,"props":558,"children":559},{},[560,614,676,729],{"type":42,"tag":78,"props":561,"children":562},{},[563,565],{"type":47,"value":564},"Shared theory:\n",{"type":42,"tag":74,"props":566,"children":567},{},[568,578,587,596,605],{"type":42,"tag":78,"props":569,"children":570},{},[571],{"type":42,"tag":572,"props":573,"children":575},"code",{"className":574},[],[576],{"type":47,"value":577},"..\u002F..\u002Freferences\u002Ffoundations\u002Fimplementation-design-and-tradeoffs.md",{"type":42,"tag":78,"props":579,"children":580},{},[581],{"type":42,"tag":572,"props":582,"children":584},{"className":583},[],[585],{"type":47,"value":586},"..\u002F..\u002Freferences\u002Ffoundations\u002Fmeaning-preserving-visual-design-workflow.md",{"type":42,"tag":78,"props":588,"children":589},{},[590],{"type":42,"tag":572,"props":591,"children":593},{"className":592},[],[594],{"type":47,"value":595},"..\u002F..\u002Freferences\u002Ffoundations\u002Fembedded-visualization-self-use.md",{"type":42,"tag":78,"props":597,"children":598},{},[599],{"type":42,"tag":572,"props":600,"children":602},{"className":601},[],[603],{"type":47,"value":604},"..\u002F..\u002Freferences\u002Ffoundations\u002Fmobile-first-responsive-visualization.md",{"type":42,"tag":78,"props":606,"children":607},{},[608],{"type":42,"tag":572,"props":609,"children":611},{"className":610},[],[612],{"type":47,"value":613},"..\u002F..\u002Freferences\u002Ffoundations\u002Foperational-visualization-workspaces.md",{"type":42,"tag":78,"props":615,"children":616},{},[617,619],{"type":47,"value":618},"Skill references:\n",{"type":42,"tag":74,"props":620,"children":621},{},[622,631,640,649,658,667],{"type":42,"tag":78,"props":623,"children":624},{},[625],{"type":42,"tag":572,"props":626,"children":628},{"className":627},[],[629],{"type":47,"value":630},".\u002Freferences\u002Ftest-level-selection.md",{"type":42,"tag":78,"props":632,"children":633},{},[634],{"type":42,"tag":572,"props":635,"children":637},{"className":636},[],[638],{"type":47,"value":639},".\u002Freferences\u002Funit-and-component-tests.md",{"type":42,"tag":78,"props":641,"children":642},{},[643],{"type":42,"tag":572,"props":644,"children":646},{"className":645},[],[647],{"type":47,"value":648},".\u002Freferences\u002Fvisual-regression-and-image-testing.md",{"type":42,"tag":78,"props":650,"children":651},{},[652],{"type":42,"tag":572,"props":653,"children":655},{"className":654},[],[656],{"type":47,"value":657},".\u002Freferences\u002Fdata-mocking-and-fixtures.md",{"type":42,"tag":78,"props":659,"children":660},{},[661],{"type":42,"tag":572,"props":662,"children":664},{"className":663},[],[665],{"type":47,"value":666},".\u002Freferences\u002Fe2e-dashboard-and-export-strategies.md",{"type":42,"tag":78,"props":668,"children":669},{},[670],{"type":42,"tag":572,"props":671,"children":673},{"className":672},[],[674],{"type":47,"value":675},".\u002Freferences\u002Favoiding-brittle-over-testing.md",{"type":42,"tag":78,"props":677,"children":678},{},[679,681],{"type":47,"value":680},"Useful templates:\n",{"type":42,"tag":74,"props":682,"children":683},{},[684,693,702,711,720],{"type":42,"tag":78,"props":685,"children":686},{},[687],{"type":42,"tag":572,"props":688,"children":690},{"className":689},[],[691],{"type":47,"value":692},"..\u002F..\u002Fassets\u002Ftemplates\u002Fvisualization-test-plan.md",{"type":42,"tag":78,"props":694,"children":695},{},[696],{"type":42,"tag":572,"props":697,"children":699},{"className":698},[],[700],{"type":47,"value":701},"..\u002F..\u002Fassets\u002Ftemplates\u002Fvisual-design-contract.md",{"type":42,"tag":78,"props":703,"children":704},{},[705],{"type":42,"tag":572,"props":706,"children":708},{"className":707},[],[709],{"type":47,"value":710},"..\u002F..\u002Fassets\u002Ftemplates\u002Fadvanced-interactive-visualization-contract.md",{"type":42,"tag":78,"props":712,"children":713},{},[714],{"type":42,"tag":572,"props":715,"children":717},{"className":716},[],[718],{"type":47,"value":719},"..\u002F..\u002Fassets\u002Ftemplates\u002Finteractive-uml-test-plan.md",{"type":42,"tag":78,"props":721,"children":722},{},[723],{"type":42,"tag":572,"props":724,"children":726},{"className":725},[],[727],{"type":47,"value":728},"..\u002F..\u002Fassets\u002Ftemplates\u002Fplaywright-visual-regression-starter.ts",{"type":42,"tag":78,"props":730,"children":731},{},[732,734],{"type":47,"value":733},"Adjacent skills:\n",{"type":42,"tag":74,"props":735,"children":736},{},[737,746,755,764,773,782,791],{"type":42,"tag":78,"props":738,"children":739},{},[740],{"type":42,"tag":572,"props":741,"children":743},{"className":742},[],[744],{"type":47,"value":745},"..\u002Fscrollytelling-and-parallax-data-visualization\u002FSKILL.md",{"type":42,"tag":78,"props":747,"children":748},{},[749],{"type":42,"tag":572,"props":750,"children":752},{"className":751},[],[753],{"type":47,"value":754},"..\u002Fuml-and-software-architecture-visualization\u002FSKILL.md",{"type":42,"tag":78,"props":756,"children":757},{},[758],{"type":42,"tag":572,"props":759,"children":761},{"className":760},[],[762],{"type":47,"value":763},"..\u002Freact-and-nextjs-data-visualization\u002FSKILL.md",{"type":42,"tag":78,"props":765,"children":766},{},[767],{"type":42,"tag":572,"props":768,"children":770},{"className":769},[],[771],{"type":47,"value":772},"..\u002Ftypescript-data-visualization-engineering\u002FSKILL.md",{"type":42,"tag":78,"props":774,"children":775},{},[776],{"type":42,"tag":572,"props":777,"children":779},{"className":778},[],[780],{"type":47,"value":781},"..\u002F..\u002Freferences\u002Ffoundations\u002Ffictional-data-story-simulation.md",{"type":42,"tag":78,"props":783,"children":784},{},[785],{"type":42,"tag":572,"props":786,"children":788},{"className":787},[],[789],{"type":47,"value":790},"..\u002Fdashboards-and-real-time-visualization\u002FSKILL.md",{"type":42,"tag":78,"props":792,"children":793},{},[794],{"type":42,"tag":572,"props":795,"children":797},{"className":796},[],[798],{"type":47,"value":799},"..\u002Faccessibility-and-inclusive-visualization\u002FSKILL.md",{"type":42,"tag":50,"props":801,"children":803},{"id":802},"representative-prompts",[804],{"type":47,"value":805},"Representative Prompts",{"type":42,"tag":74,"props":807,"children":808},{},[809,814,819,824,829,834,839,844],{"type":42,"tag":78,"props":810,"children":811},{},[812],{"type":47,"value":813},"\"How should I test this React chart component?\"",{"type":42,"tag":78,"props":815,"children":816},{},[817],{"type":47,"value":818},"\"Set up screenshot testing for this dashboard without making it flaky.\"",{"type":42,"tag":78,"props":820,"children":821},{},[822],{"type":47,"value":823},"\"What data should I mock for this D3 or Canvas visualization?\"",{"type":42,"tag":78,"props":825,"children":826},{},[827],{"type":47,"value":828},"\"Which parts of this chart deserve unit tests versus E2E tests?\"",{"type":42,"tag":78,"props":830,"children":831},{},[832],{"type":47,"value":833},"\"Help me design visual regression coverage for a live monitoring screen.\"",{"type":42,"tag":78,"props":835,"children":836},{},[837],{"type":47,"value":838},"\"Review this visualization test suite and tell me what to delete.\"",{"type":42,"tag":78,"props":840,"children":841},{},[842],{"type":47,"value":843},"\"Design tests for a parallax scrollytelling story without making screenshots flaky.\"",{"type":42,"tag":78,"props":845,"children":846},{},[847],{"type":47,"value":848},"\"Design tests for an interactive UML, ERD, state machine, flow, dependency, or architecture diagram.\"",{"items":850,"total":967},[851,867,881,893,913,935,955],{"slug":852,"name":852,"fn":853,"description":854,"org":855,"tags":856,"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},[857,860,863,864],{"name":858,"slug":859,"type":15},"Accessibility","accessibility",{"name":861,"slug":862,"type":15},"Charts","charts",{"name":17,"slug":18,"type":15},{"name":865,"slug":866,"type":15},"Design","design",{"slug":868,"name":868,"fn":869,"description":870,"org":871,"tags":872,"stars":25,"repoUrl":26,"updatedAt":880},"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},[873,876,879],{"name":874,"slug":875,"type":15},"Agents","agents",{"name":877,"slug":878,"type":15},"Browser Automation","browser-automation",{"name":20,"slug":21,"type":15},"2026-04-06T18:41:03.44016",{"slug":882,"name":882,"fn":883,"description":884,"org":885,"tags":886,"stars":25,"repoUrl":26,"updatedAt":892},"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},[887,888,891],{"name":877,"slug":878,"type":15},{"name":889,"slug":890,"type":15},"Local Development","local-development",{"name":20,"slug":21,"type":15},"2026-04-06T18:41:17.526867",{"slug":894,"name":894,"fn":895,"description":896,"org":897,"tags":898,"stars":25,"repoUrl":26,"updatedAt":912},"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},[899,900,903,906,909],{"name":874,"slug":875,"type":15},{"name":901,"slug":902,"type":15},"Cloudflare Workers","cloudflare-workers",{"name":904,"slug":905,"type":15},"SDK","sdk",{"name":907,"slug":908,"type":15},"Serverless","serverless",{"name":910,"slug":911,"type":15},"WebSockets","websockets","2026-04-06T18:39:51.717063",{"slug":914,"name":914,"fn":915,"description":916,"org":917,"tags":918,"stars":25,"repoUrl":26,"updatedAt":934},"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},[919,922,925,928,931],{"name":920,"slug":921,"type":15},"Frontend","frontend",{"name":923,"slug":924,"type":15},"React","react",{"name":926,"slug":927,"type":15},"shadcn\u002Fui","shadcn-ui",{"name":929,"slug":930,"type":15},"UI Components","ui-components",{"name":932,"slug":933,"type":15},"Vercel","vercel","2026-04-06T18:40:59.619419",{"slug":936,"name":936,"fn":937,"description":938,"org":939,"tags":940,"stars":25,"repoUrl":26,"updatedAt":954},"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},[941,944,947,950,953],{"name":942,"slug":943,"type":15},"AI Infrastructure","ai-infrastructure",{"name":945,"slug":946,"type":15},"Cost Optimization","cost-optimization",{"name":948,"slug":949,"type":15},"LLM","llm",{"name":951,"slug":952,"type":15},"Performance","performance",{"name":932,"slug":933,"type":15},"2026-04-06T18:40:44.377464",{"slug":956,"name":956,"fn":957,"description":958,"org":959,"tags":960,"stars":25,"repoUrl":26,"updatedAt":966},"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},[961,962,965],{"name":945,"slug":946,"type":15},{"name":963,"slug":964,"type":15},"Database","database",{"name":948,"slug":949,"type":15},"2026-04-06T18:41:08.513425",600,{"items":969,"total":1166},[970,991,1014,1031,1047,1064,1083,1095,1109,1123,1135,1150],{"slug":971,"name":971,"fn":972,"description":973,"org":974,"tags":975,"stars":988,"repoUrl":989,"updatedAt":990},"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},[976,979,982,985],{"name":977,"slug":978,"type":15},"Documents","documents",{"name":980,"slug":981,"type":15},"Healthcare","healthcare",{"name":983,"slug":984,"type":15},"Insurance","insurance",{"name":986,"slug":987,"type":15},"Regulatory Compliance","regulatory-compliance",28169,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fopenai-agents-python","2026-04-16T05:11:39.180399",{"slug":992,"name":992,"fn":993,"description":994,"org":995,"tags":996,"stars":1011,"repoUrl":1012,"updatedAt":1013},"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},[997,1000,1002,1005,1008],{"name":998,"slug":999,"type":15},".NET","dotnet",{"name":1001,"slug":992,"type":15},"ASP.NET Core",{"name":1003,"slug":1004,"type":15},"Blazor","blazor",{"name":1006,"slug":1007,"type":15},"C#","csharp",{"name":1009,"slug":1010,"type":15},"Web Development","web-development",23787,"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fskills","2026-04-12T05:07:02.819491",{"slug":1015,"name":1015,"fn":1016,"description":1017,"org":1018,"tags":1019,"stars":1011,"repoUrl":1012,"updatedAt":1030},"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},[1020,1023,1026,1029],{"name":1021,"slug":1022,"type":15},"Apps SDK","apps-sdk",{"name":1024,"slug":1025,"type":15},"ChatGPT","chatgpt",{"name":1027,"slug":1028,"type":15},"MCP","mcp",{"name":9,"slug":8,"type":15},"2026-04-12T05:07:05.468097",{"slug":1032,"name":1032,"fn":1033,"description":1034,"org":1035,"tags":1036,"stars":1011,"repoUrl":1012,"updatedAt":1046},"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},[1037,1040,1043],{"name":1038,"slug":1039,"type":15},"API Development","api-development",{"name":1041,"slug":1042,"type":15},"CLI","cli",{"name":1044,"slug":1045,"type":15},"Codex","codex","2026-04-12T05:07:04.132762",{"slug":1048,"name":1048,"fn":1049,"description":1050,"org":1051,"tags":1052,"stars":1011,"repoUrl":1012,"updatedAt":1063},"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},[1053,1056,1059,1060],{"name":1054,"slug":1055,"type":15},"Cloudflare","cloudflare",{"name":1057,"slug":1058,"type":15},"Cloudflare Pages","cloudflare-pages",{"name":901,"slug":902,"type":15},{"name":1061,"slug":1062,"type":15},"Deployment","deployment","2026-04-12T05:07:14.275118",{"slug":1065,"name":1065,"fn":1066,"description":1067,"org":1068,"tags":1069,"stars":1011,"repoUrl":1012,"updatedAt":1082},"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},[1070,1073,1076,1079],{"name":1071,"slug":1072,"type":15},"Productivity","productivity",{"name":1074,"slug":1075,"type":15},"Project Management","project-management",{"name":1077,"slug":1078,"type":15},"Strategy","strategy",{"name":1080,"slug":1081,"type":15},"Task Management","task-management","2026-05-23T06:17:16.870838",{"slug":1084,"name":1084,"fn":1085,"description":1086,"org":1087,"tags":1088,"stars":1011,"repoUrl":1012,"updatedAt":1094},"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},[1089,1090,1092,1093],{"name":865,"slug":866,"type":15},{"name":1091,"slug":1084,"type":15},"Figma",{"name":920,"slug":921,"type":15},{"name":1027,"slug":1028,"type":15},"2026-04-12T05:06:47.939943",{"slug":1096,"name":1096,"fn":1097,"description":1098,"org":1099,"tags":1100,"stars":1011,"repoUrl":1012,"updatedAt":1108},"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},[1101,1102,1105,1106,1107],{"name":865,"slug":866,"type":15},{"name":1103,"slug":1104,"type":15},"Design System","design-system",{"name":1091,"slug":1084,"type":15},{"name":920,"slug":921,"type":15},{"name":929,"slug":930,"type":15},"2026-05-10T05:59:52.971881",{"slug":1110,"name":1110,"fn":1111,"description":1112,"org":1113,"tags":1114,"stars":1011,"repoUrl":1012,"updatedAt":1122},"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},[1115,1116,1117,1120,1121],{"name":865,"slug":866,"type":15},{"name":1103,"slug":1104,"type":15},{"name":1118,"slug":1119,"type":15},"Documentation","documentation",{"name":1091,"slug":1084,"type":15},{"name":920,"slug":921,"type":15},"2026-05-16T06:07:47.821474",{"slug":1124,"name":1124,"fn":1125,"description":1126,"org":1127,"tags":1128,"stars":1011,"repoUrl":1012,"updatedAt":1134},"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},[1129,1130,1131,1132,1133],{"name":865,"slug":866,"type":15},{"name":1091,"slug":1084,"type":15},{"name":920,"slug":921,"type":15},{"name":929,"slug":930,"type":15},{"name":1009,"slug":1010,"type":15},"2026-05-16T06:07:40.583615",{"slug":1136,"name":1136,"fn":1137,"description":1138,"org":1139,"tags":1140,"stars":1011,"repoUrl":1012,"updatedAt":1149},"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},[1141,1144,1145,1148],{"name":1142,"slug":1143,"type":15},"Animation","animation",{"name":1044,"slug":1045,"type":15},{"name":1146,"slug":1147,"type":15},"Creative","creative",{"name":865,"slug":866,"type":15},"2026-05-02T05:31:48.48485",{"slug":1151,"name":1151,"fn":1152,"description":1153,"org":1154,"tags":1155,"stars":1011,"repoUrl":1012,"updatedAt":1165},"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},[1156,1157,1158,1161,1164],{"name":1146,"slug":1147,"type":15},{"name":865,"slug":866,"type":15},{"name":1159,"slug":1160,"type":15},"Image Generation","image-generation",{"name":1162,"slug":1163,"type":15},"Images","images",{"name":9,"slug":8,"type":15},"2026-05-15T06:23:24.312127",675]