Menu
Orchestrates high-performance infinite canvas systems, viewport transforms, and spatial indexing.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Workspace-level visual asset and canvas pipeline for generating documents, slides, and posters with rich layouts.
Enforces the full-width header / max-width body / full-width footer chrome pattern. Implements the filter+split rendering technique so background bleeds reach the viewport edge while inner content stays constrained.
Apply high-quality frontend design patterns with token-first implementation rules and NEZAM gate compliance.
Run before any design work on an unfamiliar codebase โ extracts full UI context (components, layouts, routes, tokens, pages, extractable components) into 6 structured files in .cursor/context/design-init/.
Enforces the two-step design discipline: Step A pixel-perfect ground-truth reproduction โ Step B exactly 2 branch variations. Applies to all design work in NEZAM.
Pure-Markdown context loader for design tasks. Agents call this skill at the start of any design task to load the correct subset of reference material from docs/reference/. Equivalent to impeccable's load-context.mjs but works without Node.js โ pure agent instruction.
| skill_id | nezam-visual-canvas-engine |
| name | nezam-Visual Canvas Engine |
| tier | 3 |
| description | Orchestrates high-performance infinite canvas systems, viewport transforms, and spatial indexing. |
| version | 1.0.0 |
| updated | "2026-05-13T00:00:00.000Z" |
| changelog | null |
Provides a deterministic workflow for designing and implementing infinite canvas systems with optimized rendering and viewport management.
docs/specs/canvas-requirements.md// Example viewport transform calculation
const screenToWorld = (screenX, screenY, viewport) => {
return {
x: (screenX - viewport.offset.x) / viewport.zoom,
y: (screenY - viewport.offset.y) / viewport.zoom
};
};
spatial-index-config.jsonviewport-transform-logic.tsinfinite-grid-specs.md/PLAN design for canvas-based apps.visual-canvas-architect persona activation.