A Component is a reusable responsive visual unit whose structure, public contract, behavior, animation, and generated React output live together.
Property: Identity · Current behavior: files below components/, except components/code/
Property: Creation · Current behavior: nested atomic folders such as Atoms/Molecules/Organisms/Templates
Property: Workspace · Current behavior: Files/Elements, canvas, Design/Animate/Logic, bottom timeline
Property: Reuse · Current behavior: instances in Pages, Components, and Documents
Property: Result · Current behavior: named generated Component API and scoped SCSS
Property: MCP · Current behavior: broadest production authoring/inspection coverage
shared element tree with responsive screens;
properties, internal states, emitted events, validators, children slots, variants, combinations, and test cases;
conditions, repeat, bindings, listeners, API/Storage mounts, Content/Database Views, and state actions;
base, responsive, variant, hover, focus, active, and per-node style layers;
timelines, keyframes, easing, audio lanes, and state/scroll/appear/mount control;
instances that preserve source ownership while accepting exposed values;
Preview, runtime inspection, diagnostics, and React/SCSS generation.
Use screen/element, style, data-structure, logic, timeline, Preview, diagnostic, and export families. Call build-playbook before building or materially editing a visual Component. Prefer planned add-tree construction and targeted updates.
The generated contract can include Props, DefaultProps, Variants, Children, and Component, depending on authored features. The consumer needs compatible runtime, styling, dependencies, and data modules.
Eligible content transactions share UI/MCP undo. Whole-file deletion cannot be reversed there. Parent/child and reference compatibility rules are enforced; foreign library source remains read-only.