106.9K+Download
Skip to the usage guide
Component Canvasby ibelick

Component Canvas Skill.

Inspect real UI components and variants on a pan-and-zoom canvas.

  • Component Variants
  • Comparison
Download OpenDesignView Usage Guide
Source Review · component-canvasSKILL.md
Task Inspect real UI components and variants on a pan-and-zoom canvas. Produces An isolated canvas route or entry point containing requested components. Before You Start The canvas must not change component source, hooks or styling to make a preview work.
Editorial summary · source reviewed 2026-11-02 · not a generated example

01 What It Does

Inspect real UI components and variants on a pan-and-zoom canvas

Build an isolated canvas for existing components, compare supported variants and preserve real keyboard, portal and input behavior.

Source-based workflowNot an execution benchmark

The Working Approach

Component Canvas builds a full-screen inspection surface around components that already exist in a project. It groups supported variants and useful states so designers can compare them at a glance, then interact with the actual controls. The source keeps the component implementation independent of the canvas.

The workflow is unusually specific about what comparison means. A size comparison keeps text, styling and data constant; a style comparison changes the style alone. It also preserves native portals, focus and nested scrolling, so a useful preview must survive more than a screenshot of its default state.

Expected Deliverables

  • An isolated canvas route or entry point containing requested components.
  • Named variant groups with a recorded coverage list and explained omissions.
  • A report of changed files, checks run, decisions and untested behavior.
See the Example Brief

From Brief to Review

  1. 01
    Mount one safe example

    Read component public APIs and project conventions. Use fixture data, mocks or existing callbacks to prevent live writes before mounting a single component.

  2. 02
    Build comparable groups

    Add supported variants in consistent groups. Change one comparison dimension at a time and preserve the component's real disabled, focused and interactive behavior.

  3. 03
    Verify the canvas around the components

    Test pan, zoom, fit and keyboard navigation alongside nested scrolling and native portal behavior. Persist only the camera and confirm reset preserves preview state.

02 When to Use It

When to Use It

The canvas must not change component source, hooks or styling to make a preview work.

A Good Fit

  • Variant inspectionCompare buttons, inputs or other existing components using their real public APIs.
  • Component reviewGive designers a place to exercise supported states without altering production implementations.

Limits to Check

  • Read-only component contractThe canvas must not change component source, hooks or styling to make a preview work.
  • Restricted workspaceGroups cannot be dragged, and the canvas has no editing history or undo/redo.
  • Safe fixturesA live example is omitted if production calls and writes cannot be safely isolated.

Bring These Inputs

  • Component scopeName the components and public variants to include.
  • Fixture setupProvide safe data, providers and callbacks for interactive examples.
  • Project conventionsUse existing routes, theme APIs, dependencies and access controls.

03 Decisions That Matter

Decisions That Matter

  1. Real behavior

    Examples respond through native pointer and keyboard interaction.

  2. Fair comparisons

    Holding other properties constant exposes what a variant actually changes.

  3. Contained implementation

    Camera and layout logic remain separate from component source.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Source and Setup

Name the components and public variants to include.

Upstream Source File
https://github.com/ibelick/ui-skills/blob/4907a526b07943b3a338177558d42fae4fdf0a86/skills/component-canvas/SKILL.md

The reference below opens the upstream instructions. Review the repository setup before using them; it is not an installation command.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief
Use component-canvas to inspect our existing Button, Select and Dialog components. Read their public APIs and show the supported named variants using fixture data. Compare one property at a time, keeping labels and other settings constant. Keep component source unchanged and use the current theme provider. Start with one safe example, then add the remaining groups. Verify keyboard input, focus, nested scrolling and portal placement at multiple zoom levels. Report omitted cases and any checks that require unavailable devices.

Inspect the Result

Check the actual output against these observable criteria.

  • The component source diff is empty and fixtures make no real writes.
  • Portal alignment, focus and native input remain usable under zoom.
  • Camera position restores after reload; reset preserves current preview state. Reloaded drafts are not guaranteed, and storage failures fall back safely.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesignRead the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner
ibelick
Repository
ibelick/ui-skills
Skill File
SKILL.md
License
MIT
Reviewed Snapshot
2026-11-02 · 4907a526b079
Editorial Source Summary
Inspect real UI components and variants on a pan-and-zoom canvas.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Can I drag component groups?

The source explicitly keeps groups fixed. Pan and zoom move the camera instead.

Does it invent missing component variants?

No. It reads the public API and lists omitted cases rather than modifying a component to simulate support.

What survives reload?

The prescribed persistence stores the camera. Preview drafts do not need to survive reload unless separately requested.

OpenDesign

Keep Your Brief and Design Work Together.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesignBrowse Design Skills
Upstream Source File
https://github.com/ibelick/ui-skills/blob/4907a526b07943b3a338177558d42fae4fdf0a86/skills/component-canvas/SKILL.md