Organizing conversations code

Conversations-specific layout. Repo-wide UI rules still apply — read writing-ui-components for one-component-per-file, no barrels, and import sweeps. This skill owns where in conversations a file goes.

Use this skill when

• Creating, moving, or renaming a file under products/conversations/
• Adding a React component, helper, or test to conversations frontend
• Reviewing a conversations diff that adds files

Components

Every React component lives in its own folder under products/conversations/frontend/components/. The file is named after the export.

products/conversations/frontend/components/<Name>/<Name>.tsx
products/conversations/frontend/components/<Name>/<Name>.test.tsx   # colocated

Import the file, not the folder:

import { SlaDisplay } from '../../components/SlaDisplay/SlaDisplay'
import { SlaDisplay } from 'products/conversations/frontend/components/SlaDisplay/SlaDisplay'

Do not:

• Drop a component as a loose file in frontend/components/
• Put a component at products/conversations/frontend/ (the product frontend root)
• Add an index.ts barrel so callers can import the folder

A helper that returns props or data — not markup — is not a component. Keep it next to the feature or at products/conversations/frontend/<name>.ts(x) (see clearFilterButtonProps.tsx).

When you move a component, git mv, point every consumer at the new path, and delete the old one. No re-export shim.