What problem does it solve? Deciding where new UI code belongs in the Operately codebase is ambiguous: TurboUI holds pure components, the app bridge handles data and APIs, and legacy folders are deprecated. This Skill removes that ambiguity by defining the architecture, reuse rules, and migration scenarios. ## Core Features & Use Cases - Architecture rules: Defines the three-layer model (TurboUI pure components, app bridge pages, Elixir/GraphQL backend) with data flowing down as props and actions up as callbacks. - Component reuse gate: Requires an inventory of existing TurboUI primitives (Forms, buttons, modals, selectors) before writing JSX, with a component selection map. - Legacy migration scenarios: Provides Scenario 2a (full migration for few call sites) and 2b (new pure TurboUI version for new features only) for deprecated app UI. - Use Case: When adding a new feature page, follow the app bridge pattern: prefetch with TanStack Query loaders, pass ApiTypes-shaped data as props, wire mutations through callbacks, and build the UI as a pure TurboUI component with Storybook stories. ## Quick Start Ask the agent to create a new UI component for an Operately feature following the components-architecture rules, placing it in turboui/src with an app bridge page.
