Ensure UI elements (buttons, icons, tooltips, overlays) are only registered or rendered when the corresponding configuration or feature flag is enabled. Also ensure feature flags are passed into components or a central store so components make rendering decisions from configuration rather than hard-coded assumptions. Motivation - Prevents exposing unavailable features, avoids UI clutter, and keeps behavior predictable across environments. - Matches existing patterns where flags are passed from top-level props into stores/components. How to apply 1. Propagate flags: accept feature flags as props at top-level components and pass them into your UI components or into the app/store. Example pattern (top-level): // LikeC4Diagram.tsx (pattern reference) 2. Gate registration: only add buttons/actions to arrays when the flag is true. Example: const buttons = [] if (flags.enableVscode) { buttons.push({ id: 'open-in-vscode', label: 'Open in VSCode', onClick: () => { /* ... */ }, }) } 3. Gate rendering: only render optional UI elements in JSX when the flag is true or derived from the store/props. Example: {flags.enableSearch && ( /* icon */ )} Notes - Prefer a single source of truth for flags (props -> context/store) to avoid mismatches. - Keep gating logic simple and colocated with the registration or render site so it's obvious why an element may be absent. - Include tests or story variants for both enabled and disabled states to prevent regressions.