Daniil
e6bfe7c946
- Add Chrome browser access to 6 visual agents (18 tools each) - Add Playwright access to 2 testing agents (22 tools each) - Add 4 MCP servers: Postgres Pro, Redis, Lighthouse, Docker (.mcp.json) - Add 3 new rules: testing.md, security.md, remotion-service.md - Add Context7 library references to all domain agents - Add CLI tool instructions per agent (curl, ffprobe, k6, semgrep, etc.) - Update team protocol with new capabilities column - Add orchestrator dispatch guidance for new agent capabilities - Init git repo tracking docs + Claude config only Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
49 lines
1.9 KiB
Markdown
49 lines
1.9 KiB
Markdown
---
|
|
paths:
|
|
- "cofee_frontend/src/**/*.ts"
|
|
- "cofee_frontend/src/**/*.tsx"
|
|
---
|
|
|
|
# Frontend FSD Rules
|
|
|
|
## Import Direction (strict)
|
|
|
|
`pages → widgets → features → entities → shared` — no upward or cross-slice imports within the same layer. Enforced by `eslint-plugin-boundaries`.
|
|
|
|
## Component Convention
|
|
|
|
Generate components with `bun run gc <layer> <Name>`. Each component folder:
|
|
- `index.ts` — public re-export only
|
|
- `ComponentName.tsx` — implementation
|
|
- `ComponentName.module.scss` — scoped styles
|
|
- `ComponentName.d.ts` — props interface (`IComponentNameProps`)
|
|
|
|
## Features are Module-Aware
|
|
|
|
Features live in domain subfolders (`features/profile/`, `features/project/`), never flat at `src/features/`. Each module has a barrel `index.ts`. Import via barrel: `import { X } from "@features/profile"`.
|
|
|
|
After `bun run gc feature <Name>`, move the generated folder into the correct domain module.
|
|
|
|
## API Client Rules
|
|
|
|
- **In React components**: always use `api.useQuery()` / `api.useMutation()` from `@shared/api` (TanStack Query + openapi-fetch). For polling use `refetchInterval`.
|
|
- **Outside React** (utilities, event handlers): use `fetchClient` from `@shared/api`.
|
|
- **File uploads**: use `uploadFile()` from `@shared/api/uploadFile`.
|
|
- **Never** use raw `fetch()`, `useEffect`-based data fetching, or `axios` for API calls.
|
|
|
|
## Styling
|
|
|
|
- SCSS Modules (`.module.scss`) for all component styles.
|
|
- SCSS partials (`_variables`, `_breakpoints`, `_typography`, `_mixins`) are auto-injected via `next.config.mjs` — no manual imports needed.
|
|
- Class composition: `import cs from "classnames"`.
|
|
|
|
## Path Aliases
|
|
|
|
Use `@shared/*`, `@entities/*`, `@features/*`, `@widgets/*`, `@pages/*`, `@app/*` — never relative paths across layers.
|
|
|
|
## Code Style
|
|
|
|
- Prettier: tabs (width 2), no semicolons, double quotes, sorted imports.
|
|
- `data-testid` on every component root element.
|
|
- Explicit return types on functional components.
|