react-component-builderlisted

# react-component-builder Most React components render fine in the demo and fall apart the moment a second team uses them: they can't be controlled, they're inaccessible to a keyboard or screen reader, they forget the loading/empty/error states, and their props are typed as `any`. This skill builds the other kind — a component a design system can stand on. ## Use when - Adding a component to a shared library / design system. - Promoting a one-off into something two or more places will use. - Refactoring a component that "works" but is unusable by keyboard or screen reader. ## The five things that separate reusable from throwaway 1. **The controlled/uncontrolled contract.** A form-ish component must support both: controlled (`value` + `onChange`, parent owns state) and uncontrolled (`defaultValue`, component owns state via a ref). Pick based on whether `value` is provided; never silently ignore one. Warn (dev-only) if a component flips between the two across renders. 2. **Accessibility is not optional.** Real semantic elements first (`<button>`, `<label>`, `<nav>`); ARIA only to fill gaps. Every interactive element is keyboard-operable and focus-visible. Custom widgets follow the WAI-ARIA authoring pattern for their role (a "combobox" has the roles, states, and key bindings a combobox is specified to have). 4. **All the states, not just the happy one.** Design and implement: default, loading, empty, error, disabled, and (where relevant) read-only. A list component that only