// Styling and structure conventions for stream-chat-react. Use when adding or editing components, SCSS, or icons in this repo—file layout, styling folder structure, SCSS imports, and icon placement.
| name | dev-patterns |
| description | Styling and structure conventions for stream-chat-react. Use when adding or editing components, SCSS, or icons in this repo—file layout, styling folder structure, SCSS imports, and icon placement. |
Apply when generating or modifying UI code in this repo.
.scss only.src/components/<ComponentName>/styling/.index.scss.src/components/<ComponentName>/styling/index.scss is imported in src/styling/index.scss with an alias..scss file in the src/components/<ComponentName>/styling folderImport order in src/styling/index.scss:
src/styling/.&__suffix so selectors are easy to search.src/components/Icons.src/components/Icons; keep existing icon placement unless explicitly refactoring icons.Source: .ai/DEV_PATTERNS.md.
_one, _other, and _few, _many where the locale requires them."{{count}} new messages"). Only add quantified variants: "{{count}} new messages_one", "{{count}} new messages_other", etc.src/i18n/ (e.g. {{count}} unread_one, unreadMessagesSeparatorText_other).en, de, nl, tr, hi, ko, ja use _one + _other; es, fr, it, pt add _many; ru uses _one, _few, _many, _other.When importing from 'stream-chat' library, always import by library name (from 'stream-chat'), not relative path (from '..path/to/from 'stream-chat-js/src').
Try to avoid inline style attribute and prefer adding styles to .scss files.
Maintain WCAG-focused accessibility in stream-chat-react. Use when changing interactive components, dialogs, menus, forms, media controls, notifications, focus behavior, keyboard flows, aria attributes, or screen-reader announcements.
Structures plan.md files for parallel, non-overlapping agent work. Use when creating or editing execution plans, task lists for multiple agents, or when the user asks how to structure plans or split work into tasks.
Collaboration protocol for Ralph loop (Plan → Act → Reflect → Refine). Use when working from spec files in specs/<name>/ (goal.md/spec.md, plan.md, state.json, decisions.md); when executing tasks in a shared plan; or when the user mentions Ralph, multi-agent, or file-based collaboration.
Creates and manages git worktrees for isolated plan execution. Use when setting up a worktree for a plan, syncing with base branch, rebasing, or cleaning up worktrees. Never modify the main repo for plan work—all work happens in the worktree.
Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.