# Canvas Design Codex

> 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.

- **Type:** Skill
- **Install:** `agentstack add skill-dachent-skills-canvas-design-codex`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [dachent](https://agentstack.voostack.com/s/dachent)
- **Installs:** 0
- **Category:** [Web & Browser](https://agentstack.voostack.com/c/web-and-browser)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [dachent](https://github.com/dachent)
- **Source:** https://github.com/dachent/skills/tree/main/canvas-design-codex

## Install

```sh
agentstack add skill-dachent-skills-canvas-design-codex
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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

1. Identify the rendering mode: canvas, SVG, WebGL, Three.js, charting library, or mixed DOM and drawing.
2. Use existing libraries for established mechanics or 3D rendering instead of hand-rolling complex engines.
3. Set stable canvas or SVG dimensions with responsive constraints.
4. Add loading, error, empty, and reduced-motion behavior when relevant.
5. Capture screenshots and inspect image bounds after meaningful changes.
6. 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.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [dachent](https://github.com/dachent)
- **Source:** [dachent/skills](https://github.com/dachent/skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-dachent-skills-canvas-design-codex
- Seller: https://agentstack.voostack.com/s/dachent
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.