ワンクリックで
nezam-visual-canvas-engine
Orchestrates high-performance infinite canvas systems, viewport transforms, and spatial indexing.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
メニュー
Orchestrates high-performance infinite canvas systems, viewport transforms, and spatial indexing.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
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.