Skills for Real Engineers. Straight from my .agents directory.
component-canvas
Agent skill fromibelick/ui-skills
Build a full-screen, interactive canvas to explore existing UI components and their variants with pan and zoom.
How to install component-canvas
npx skills add ibelick/ui-skills# or add only this skill to Claude Code: copy the folder
skills/component-canvas/
# into
~/.claude/skills/component-canvas/ (all projects)
.claude/skills/component-canvas/ (one project)
1# Component canvas23Build a canvas that shows the project's existing components as they really behave. The canvas wraps components. It never changes them.45## Ground rules67- Do not modify component source, exports, styles, hooks, or behavior to make the canvas work. Components must not import or depend on canvas code.8- Do not patch libraries, browser APIs, rendered component DOM, or portal roots.9- 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.10- Keep existing access controls.11- Leave unrelated work alone. If removing an earlier canvas integration, undo only its changes to components.12- Follow any restrictions on commands, browser access, dependencies, and edits.1314## Before building1516Read the repository conventions, routes, component public APIs, design tokens, and test setup. Use the existing framework and libraries.1718Ask 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.1920## Build order21221. Add a minimal canvas route or entry point with one group and one component. Confirm it works.232. Add the remaining groups with sample data.243. Add variant comparisons, then advanced gestures and persistence, one feature at a time.25…
Excerpt shown under the repository's MIT license.
More skills in ui-skills
Similar skill repositories
An agentic skills framework & software development methodology that works.
Public repository for Agent Skills
An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
Persistent Context Across Sessions for Every Agent – Captures everything your agent does during sessions, compresses it with AI, and injects relevant context back into future sessions. Works with Claude Code, OpenClaw, Codex, Gemini, Hermes, Copilot, OpenCode + More
Production-grade engineering skills for AI coding agents.
