一键在 Manus 中运行任何 Skill

dev-patterns

星标837

分支298

更新时间2026年7月7日 05:39

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.

安装

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

在 Manus 中运行

来源

GetStream

GetStream/stream-chat-react

打开 GitHub 仓库查看创作者相关仓库

下载

在 Manus 中运行

stream-chat-react Development Patterns

Apply when generating or modifying UI code in this repo.

Styling

File and folder structure

Format: .scss only.
Location: src/components/<ComponentName>/styling/.
Required: Each component styling folder has an index.scss.
Registration: Each src/components/<ComponentName>/styling/index.scss is imported in src/styling/index.scss with an alias.
Specificity: Each component has own .scss file in the src/components/<ComponentName>/styling folder

Import order in src/styling/index.scss:

Three groups; within each group, alphabetical order.
Group 1: imports from src/styling/.
Group 2: general components (Button, Dialog, etc.).
Group 3: chat components (MessageList, etc.).

SCSS practices

Use full class names instead of only &__suffix so selectors are easy to search.
Avoid duplicate blocks for the same resolved CSS selector (after nesting).

Icons

Icons live in src/components/Icons.
Do not move icons out of SCSS into src/components/Icons; keep existing icon placement unless explicitly refactoring icons.

Source: .ai/DEV_PATTERNS.md.

Translating quantities (plurals)

Use plural suffixes only: _one, _other, and _few, _many where the locale requires them.
Do not add a standalone key (e.g. "{{count}} new messages"). Only add quantified variants: "{{count}} new messages_one", "{{count}} new messages_other", etc.
Follow existing patterns in src/i18n/ (e.g. {{count}} unread_one, unreadMessagesSeparatorText_other).
Locale plural rules (CLDR): en, de, nl, tr, hi, ko, ja use _one + _other; es, fr, it, pt add _many; ru uses _one, _few, _many, _other.

Imports

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').

React components

Try to avoid inline style attribute and prefer adding styles to .scss files.

How a plugin works in stream-chat-react

A "plugin" is just a separate build entry point that ships as a subpath export (e.g. stream-chat-react/emojis, stream-chat-react/mp3-encoder). Concretely, each plugin is wired in 4 places:

Source folder — src/plugins// with an index.ts re-exporting its public API (see src/plugins/Emojis/index.ts).
Vite entry — a new key in build.lib.entry in vite.config.ts:20.
package.json — an exports subpath + a typesVersions entry (package.json:18,44).
Styling (optional) — a styling/index.scss added as a separate sass target in the build-styling script (package.json:185), producing its own CSS file like dist/css/emoji-picker.css.

同仓库更多 Skills

同仓库

accessibility

GetStream/stream-chat-react

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.

2026-07-07837

make-plans

GetStream/stream-chat-react

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.

2026-03-17837

ralph-protocol

GetStream/stream-chat-react

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.

2026-03-17837

worktrees

GetStream/stream-chat-react

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.

2026-03-17837

playwright-cli

GetStream/stream-chat-react

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.

2026-02-23837

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.

stream-chat-react Development Patterns

Apply when generating or modifying UI code in this repo.

Styling

File and folder structure

Format: .scss only.
Location: src/components/<ComponentName>/styling/.
Required: Each component styling folder has an index.scss.
Registration: Each src/components/<ComponentName>/styling/index.scss is imported in src/styling/index.scss with an alias.
Specificity: Each component has own .scss file in the src/components/<ComponentName>/styling folder

Import order in src/styling/index.scss:

Three groups; within each group, alphabetical order.
Group 1: imports from src/styling/.
Group 2: general components (Button, Dialog, etc.).
Group 3: chat components (MessageList, etc.).

SCSS practices

Use full class names instead of only &__suffix so selectors are easy to search.
Avoid duplicate blocks for the same resolved CSS selector (after nesting).

Icons

Icons live in src/components/Icons.
Do not move icons out of SCSS into src/components/Icons; keep existing icon placement unless explicitly refactoring icons.

Source: .ai/DEV_PATTERNS.md.

Translating quantities (plurals)

Use plural suffixes only: _one, _other, and _few, _many where the locale requires them.
Do not add a standalone key (e.g. "{{count}} new messages"). Only add quantified variants: "{{count}} new messages_one", "{{count}} new messages_other", etc.
Follow existing patterns in src/i18n/ (e.g. {{count}} unread_one, unreadMessagesSeparatorText_other).
Locale plural rules (CLDR): en, de, nl, tr, hi, ko, ja use _one + _other; es, fr, it, pt add _many; ru uses _one, _few, _many, _other.

Imports

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').

React components

Try to avoid inline style attribute and prefer adding styles to .scss files.

How a plugin works in stream-chat-react

A "plugin" is just a separate build entry point that ships as a subpath export (e.g. stream-chat-react/emojis, stream-chat-react/mp3-encoder). Concretely, each plugin is wired in 4 places:

Source folder — src/plugins// with an index.ts re-exporting its public API (see src/plugins/Emojis/index.ts).
Vite entry — a new key in build.lib.entry in vite.config.ts:20.
package.json — an exports subpath + a typesVersions entry (package.json:18,44).
Styling (optional) — a styling/index.scss added as a separate sass target in the build-styling script (package.json:185), producing its own CSS file like dist/css/emoji-picker.css.