What problem does it solve? Components in a React project are not automatically insertable into the Bingo design canvas. Without a correctly authored *.compositions.tsx sidecar, a component shows no drag-and-drop templates in the Assets panel, and common authoring mistakes (function exports, lowercase names, missing imports) fail silently with no preview and no error. ## Core Features & Use Cases - Composition authoring rules: Defines the exact export contract the parser accepts — bare JSX elements (export const BadgeDefault = (<jsx/>)), uppercase names, explicit imports, and static data only. - Silent-failure debugging: Provides an ordered checklist for diagnosing missing previews, from function-shaped exports to wrong sidecar filenames and syntax errors that wipe out every export at once. - Naming and coverage guidance: Explains how camelCase export names become panel labels and how to cover a component's real variants, states, and compound structures. - Use Case: A user asks to "add compositions for the Badge component". The Skill directs reading the component source, writing badge.compositions.tsx into the project with project_write, and verifying each export appears in the Assets panel. ## Quick Start Ask the assistant to add compositions for a component, for example: "Add compositions for the Button component so it appears as insertable templates in the Assets panel."
