# Create Canvas

Build a freeform canvas to explore, compare, and iterate on anything.

- Repository: https://github.com/ibelick/ui-skills (10455 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add ibelick/ui-skills --skill create-canvas -g -a claude-code -y`
Codex: `npx skills add ibelick/ui-skills --skill create-canvas -g -a codex -y`
Cursor: `npx skills add ibelick/ui-skills --skill create-canvas -g -a cursor -y`
Gemini CLI: `npx skills add ibelick/ui-skills --skill create-canvas -g -a gemini-cli -y`

## Description

Build a freeform canvas to explore, compare, and iterate on anything.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Create canvas

Build a freeform workspace for exploration and iteration through conversation. The model changes content in source files. The canvas makes that content live, named, movable, and easy to reference.

## Start with the project

- Read repository rules, routes, component APIs, themes, design tokens, and tests.
- Look for an existing canvas before creating another.
- Use the project's framework, components, typography, design tokens, themes, and access controls.
- Respect restrictions on edits, commands, and browser access.
- Ask before changing scope, adding dependencies, changing shared code, or exposing the canvas publicly.
- If safe isolation is unclear, ask before proceeding. Never mount an unsafe preview.
- Choose sensible defaults for other decisions. Do not ask the user to repeat clear requests.
- Keep canvas code together. Separate camera and placement logic from previews, test data, and their registry. Do not build a framework.
- Start with one safe live preview, a readable label, and a separate move handle. Make sure that it mounts.
- Add the registry and requested content next. Then add copying, camera controls, existing themes, and saved layout.

## Keep content in source

A registry is a typed list of canvas items. Each entry defines a stable ID, unique readable name, component, safe test data, initial position, and dimensions.

The rest: https://github.com/ibelick/ui-skills/blob/HEAD/skills/create-canvas/SKILL.md