前端开发

component-canvas

ibelick/ui-skills

Build a full-screen, interactive canvas to explore existing UI components and their variants with pan and zoom.

  • 841 次安装
  • 1万 星标
  • 收录于

安装命令

npx skills add https://github.com/ibelick/ui-skills --skill component-canvas

SKILL.md

Component canvas

Build a canvas that shows the project's existing components as they really behave. The canvas wraps components. It never changes them.

Ground rules

  • Do not modify component source, exports, styles, hooks, or behavior to make the canvas work. Components must not import or depend on canvas code.
  • Do not patch libraries, browser APIs, rendered component DOM, or portal roots.
  • Show only the components the user asked for. Adding components, installing dependencies, changing a component's design, or making the canvas public requires permission first.
  • Keep existing access controls.
  • Leave unrelated work alone. If removing an earlier canvas integration, undo only its changes to components.
  • Follow any restrictions on commands, browser access, dependencies, and edits.

Before building

Read the repository conventions, routes, component public APIs, design tokens, and test setup. Use the existing framework and libraries.

Ask the user only when the answer changes what gets built or touches shared code: which components are in scope, whether a new dependency is acceptable, or whether a live service may be previewed. For everything else, choose a sensible default, state it in the report, and proceed.