sync

README.md

@@ -1,13 +1,56 @@
-# Frontend Style Guide для проектов на React/Next.js и TypeScript
+# NextJS Style Guide
 
-Это набор правил и практик для разработки фронтенд-проектов: архитектура, типизация, стили, компоненты, API и инфраструктурные разделы.
+Rules and standards for NextJS and TypeScript development: architecture, typing, styles, components, API, and infrastructure.
 
-## Как пользоваться
+## Documentation Structure
 
-- Начните с «Технологии и библиотеки», чтобы понимать базовые допущения.
-- Затем прочитайте разделы из «Базовых правил».
-- При реализации используйте соответствующие прикладные разделы.
+### Processes
 
-## Для ассистентов
+**What to do** in a specific situation — step-by-step instructions.
 
-Полная документация в одном MD файле: https://gromlab.ru/docs/frontend-style-guide/raw/branch/main/RULES.md
+| Section | Answers the question |
+|---------|---------------------|
+| Getting Started | What tools to install before starting development? |
+| Creating an App | How to create a new project, where to get a template? |
+| Creating Pages | How to add a page: routing and screen? |
+| Creating Components | How to generate components using templates? |
+| Styling | What to use: Mantine, tokens, or PostCSS? |
+| Data Fetching | How to fetch data: SWR, codegen, sockets? |
+| State Management | When and how to create a store (Zustand)? |
+| Localization | How to add translations and work with i18next? |
+
+### Basic Rules
+
+**What the code should look like** — standards not tied to a specific technology.
+
+| Section | Answers the question |
+|---------|---------------------|
+| Tech Stack | What stack do we use? |
+| Architecture | How are FSD layers, dependencies, and public API structured? |
+| Code Style | How to format code: indentation, quotes, imports, early return? |
+| Naming | How to name files, variables, components, hooks? |
+| Documentation | How to write JSDoc: what to document and what not? |
+| Typing | How to type: type vs interface, any/unknown, FC? |
+
+### Applied Sections
+
+**How a specific area works** — rules, structure, and code examples for specific technologies and tools.
+
+| Section | Answers the question |
+|---------|---------------------|
+| Project Structure | How are folders and files organized by FSD? |
+| Components | How is a component structured: files, props, clsx, FC? |
+| Templates & Code Generation | How do templates work: syntax, variables, modifiers? |
+| Styles | How to write CSS: PostCSS Modules, nesting, media, tokens? |
+| Images | _(not filled)_ |
+| SVG Sprites | _(not filled)_ |
+| Video | _(not filled)_ |
+| API | _(not filled)_ |
+| Stores | _(not filled)_ |
+| Hooks | _(not filled)_ |
+| Fonts | _(not filled)_ |
+| Localization | _(not filled)_ |
+
+## For Assistants
+
+Full documentation in a single MD file: https://gromlab.ru/docs/frontend-style-guide/raw/branch/main/generated/en/RULES.md