frontend-guidelines

为本仓库的前端开发制定编码规范。当您在创建或组织 Next.js App Router 功能、决定 React 组件的摆放位置，或规划前端共享的 UI 与工具模块时，此技能将为您提供有力指导——无论是将页面专属组件归置于 app 路由文件夹下，还是将通用组件收纳进 src 目录，皆可轻松应对。

SKILL.md

--- frontmatter

name: frontend-guidelines
description: Frontend coding conventions for this repo. Use when creating or organizing Next.js App Router features, deciding where to place React components, or structuring shared UI/utilities in frontend/. Applies to collocating page-specific components under app route folders and placing shared pieces under src/.

Frontend Guidelines

Placement rules

•Collocate page-specific components: create a _components/ folder inside the App Router page directory (the same directory as the page.tsx, layout.tsx, etc.) and place components used only by that page there.
•Keep shared components and utilities under frontend/src/ following the existing architecture (src/ui/, src/shared/, src/theme/, etc.).
•Prefer shared placement when a component is reused across routes, layouts, or features.

Examples

•frontend/app/dashboard/_components/StatsCard.tsx for a dashboard-only component.
•frontend/src/ui/Button.tsx for a reusable button.

Notes

•Follow existing naming conventions (PascalCase components, useX hooks) and lint/format rules.
•When unsure about reuse, start collocated; promote to src/ when a second usage appears.