canvas-design-codex

Name: canvas-design-codex
Availability: InStock
Author: dachent

Verify canvas, SVG, and WebGL rendering via screenshot analysis.

18|1|Updated Mar 19, 2026

Search Tags:#design #rendering #canvas #svg #webgl #visual-qa

Ready to run

npx skills add https://github.com/dachent/skills --skill canvas-design-codex

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: canvas-design-codex
Source: https://github.com/dachent/skills/tree/main/canvas-design-codex
Command: npx skills add https://github.com/dachent/skills --skill canvas-design-codex

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the common issue where programmatic visual output like canvas, SVG, or WebGL appears correct in code but renders incorrectly, blank, or misaligned in the browser.

Core Features & Use Cases

Visual QA: Automatically verifies that drawn elements are visible, correctly framed, and not cropped or blurry.
Evidence-Based Design: Uses screenshot capture and image bounds analysis to prove that visual assets exist and meet design specifications.
Use Case: When building a complex Three.js scene or a custom data visualization, use this skill to ensure the scene renders correctly across different viewports and that no UI elements overlap the canvas.

Quick Start

Use the canvas-design-codex skill to render the current visual component and verify its dimensions and pixel evidence.

Frequently Asked Questions about canvas-design-codex

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I verify canvas rendering is pixel-perfect and not cropped in the browser?▼

You can verify canvas rendering by using automated visual quality assurance to capture screenshots and analyze image bounds. This checks that drawn elements are visible, correctly framed, and meet design specifications without manual inspection.

What is automated visual QA for WebGL and SVG browser rendering?▼

Automated visual QA for WebGL and SVG is the process of programmatically capturing screenshots to verify graphical output. It ensures complex scenes and visual assets render correctly, preventing blank or misaligned elements in the browser.

How do I debug a Three.js scene that appears blank or misaligned?▼

Debug a blank or misaligned Three.js scene by running automated rendering checks that capture screenshot evidence. This programmatic analysis proves visual assets exist and confirms elements are not blurry or cropped across viewports.

Do I need a visual runtime environment to check SVG and canvas dimensions?▼

Yes, you need a visual runtime environment to execute rendering checks for SVG and canvas. This environment allows the tool to capture screenshot evidence and perform image bounds analysis to verify pixel-perfect design.

Why does my data visualization code look correct but render incorrectly in the browser?▼

Code may look correct but render incorrectly due to browser-specific graphical issues. Automated visual QA captures screenshot evidence to verify that visual assets exist, are visible, and meet design specifications.

Can I use screenshot analysis to prevent UI elements from overlapping my canvas?▼

Yes, you can use screenshot analysis to ensure no UI elements overlap your canvas. This visual quality assurance verifies that complex visual components render correctly across different viewports without cropping.