Canvas design decomposition

Mandatory triggers (load this skill first)

Load and follow this skill before proposing component structure for a component library, writing implementation plans, or implementing React—including when the user only asks for a plan or breakdown—whenever you are modeling how UI should split into Canvas components (a component library, section, or full page). The same applies when you are about to build, add, or scaffold components (see below). Treat any of the following as a trigger:

• Building or adding Canvas components: creating new folders under src/components/, authoring component.yml and index.jsx (or .tsx), scaffolding a component from a ticket or spec, coding a section from a design, or implementing a named block (hero, footer, card, and so on). Decompose before writing schema or React so names, slots, variants, and reuse stay aligned—unless the task is a trivial one-line tweak inside an existing, stable API.