feat: Progressive Disclosure документация

This commit is contained in:
2026-04-20 06:40:34 +03:00
parent 436c87a986
commit 4aeb1dd6b2
115 changed files with 1861 additions and 4690 deletions

View File

@@ -1,57 +1,53 @@
# NextJS Style Guide
# Style Guide
Rules and standards for NextJS and TypeScript development: architecture, typing, styles, components, API, and infrastructure.
Репозиторий с правилами и стандартами фронтенд-разработки. Исходники документации собираются в разные форматы под разные фреймворки.
## Documentation Structure
## Структура
### Processes
```text
src/ # Исходники — только .md файлы
├── base/ # Общие правила (не поставляется отдельно)
│ ├── basics/ # Базовые: стиль кода, именование, типизация
│ ├── applied/ # Прикладные: компоненты, стили, хуки, API
│ └── triggers/ # Триггеры: создание компонента, стилизация и т.д.
└── nextjs/ # Next.js — самостоятельная единица
├── applied/ # Next.js-специфичные: page-level, project-structure
├── triggers/ # Next.js-специфичные триггеры: create-page, create-layout
├── DEVELOP.md # Точка входа для агента-разработчика
└── REVIEW.md # Точка входа для агента-ревьювера
**What to do** in a specific situation — step-by-step instructions.
scripts/ # Скрипты и манифесты сборки
├── build-ai.js # Скрипт сборки
└── nextjs.build.js # Манифест: какие файлы, куда, как называются
| 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? |
dist/ # Собранные версии (gitignore)
├── ai/{framework}/ # Для AI-агентов
└── vitepress/{framework}/ # Для людей (планируется)
```
### Basic Rules
## Сборка
**What the code should look like** — standards not tied to a specific technology.
```bash
npm run build:ai # Собрать все фреймворки
```
| 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? |
## Манифест
### Applied Sections
Каждый фреймворк имеет манифест `scripts/{framework}.build.js`. Ключ — путь в выходной папке, значение — путь исходника в `src/`.
**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? |
| Page-level Components | How to define layout, page, loading, error, not-found? |
| 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
1. Создать `.md` в `src/base/` (общий) или `src/{framework}/` (специфичный).
2. Добавить frontmatter: `title`, `scope`, `keywords`, `when`.
3. Добавить путь в манифест `scripts/{framework}.build.js`.
4. Обновить точку входа (`DEVELOP.md` и/или `REVIEW.md`).
5. `npm run build:ai`.
Full documentation in a single MD file: https://gromlab.ru/docs/frontend-style-guide/raw/branch/main/generated/en/RULES.md
## Добавление фреймворка
1. Создать `src/{framework}/` с `.md` файлами и точками входа.
2. Создать `scripts/{framework}.build.js`.
3. `npm run build:ai`.