Canvas Design Codex
Overview
Use this skill for visual work where the primary output is drawn rather than ordinary DOM layout. Prefer proven rendering libraries for established rules, physics, charting, or 3D behavior.
Design Upskill Contribution
This skill teaches Codex to verify drawn visuals through rendered pixels. It improves no-template design by requiring screenshot evidence, image bounds, animation sanity checks, and visual lint around the surrounding page.
It matters because canvas and SVG work can look correct in code while rendering blank, cropped, blurry, or misframed. Codex must prove that the pixels exist and communicate the intended design.
Workflow
- Identify the rendering mode: canvas, SVG, WebGL, Three.js, charting library, or mixed DOM and drawing.
- Use existing libraries for established mechanics or 3D rendering instead of hand-rolling complex engines.
- Set stable canvas or SVG dimensions with responsive constraints.
- Add loading, error, empty, and reduced-motion behavior when relevant.
- Capture screenshots and inspect image bounds after meaningful changes.
- For animated or interactive work, verify the scene is nonblank and correctly framed after a short wait.
Shared Visual Runtime
Use .shared\visual-runtime for visual evidence:
capture_page.mjs with --wait-ms for animated or async drawing.image_bounds.py to confirm screenshot width, height, aspect ratio, and bytes.make_contact_sheet.py to compare states or viewports.visual_lint.mjs for surrounding DOM text, contrast, and console findings.
No Office COM is required. If drawn output is exported into an Office file later, keep the pixel evidence here and move only the Office embedding to the Office skill.
Verification
Before completion:
- capture a screenshot after the canvas or visual has rendered;
- confirm image bounds and nonzero file size;
- inspect for crop, blur, blank canvas, offscreen objects, and overlapping UI;
- run visual lint for surrounding controls and labels;
- preserve screenshot or contact sheet evidence.
Common Mistakes
- Verifying source code but not pixels.
- Allowing hover text, loading labels, or controls to resize the canvas.
- Using viewport-scaled type that breaks at narrow sizes.
- Forgetting to wait for async drawing before screenshot capture.
1---2name: canvas-design-codex3description: Use when Codex needs to build, revise, debug, or verify canvas, SVG, WebGL, Three.js, custom charting, diagram, game, generative visual, or pixel-based browser artwork where screenshot, pixel, animation, or image bounds evidence matters.4---56# Canvas Design Codex78## Overview910Use this skill for visual work where the primary output is drawn rather than ordinary DOM layout. Prefer proven rendering libraries for established rules, physics, charting, or 3D behavior.1112## Design Upskill Contribution1314This skill teaches Codex to verify drawn visuals through rendered pixels. It improves no-template design by requiring screenshot evidence, image bounds, animation sanity checks, and visual lint around the surrounding page.1516It matters because canvas and SVG work can look correct in code while rendering blank, cropped, blurry, or misframed. Codex must prove that the pixels exist and communicate the intended design.1718## Workflow19201. Identify the rendering mode: canvas, SVG, WebGL, Three.js, charting library, or mixed DOM and drawing.212. Use existing libraries for established mechanics or 3D rendering instead of hand-rolling complex engines.223. Set stable canvas or SVG dimensions with responsive constraints.234. Add loading, error, empty, and reduced-motion behavior when relevant.245. Capture screenshots and inspect image bounds after meaningful changes.256. For animated or interactive work, verify the scene is nonblank and correctly framed after a short wait.2627## Shared Visual Runtime2829Use `.shared\visual-runtime` for visual evidence:3031- `capture_page.mjs` with `--wait-ms` for animated or async drawing.32- `image_bounds.py` to confirm screenshot width, height, aspect ratio, and bytes.33- `make_contact_sheet.py` to compare states or viewports.34- `visual_lint.mjs` for surrounding DOM text, contrast, and console findings.3536No Office COM is required. If drawn output is exported into an Office file later, keep the pixel evidence here and move only the Office embedding to the Office skill.3738## Verification3940Before completion:4142- capture a screenshot after the canvas or visual has rendered;43- confirm image bounds and nonzero file size;44- inspect for crop, blur, blank canvas, offscreen objects, and overlapping UI;45- run visual lint for surrounding controls and labels;46- preserve screenshot or contact sheet evidence.4748## Common Mistakes4950- Verifying source code but not pixels.51- Allowing hover text, loading labels, or controls to resize the canvas.52- Using viewport-scaled type that breaks at narrow sizes.53- Forgetting to wait for async drawing before screenshot capture.
dachent