# React (Web)

## Признаки платформы
- `package.json` с `react`, `react-dom`
- `vite.config.ts`, `next.config.js`, `craco.config.js`
- `tsconfig.json` или `jsconfig.json`
- `src/App.tsx` или `src/App.jsx`
- `public/index.html` (CRA)

## Признаки многомодульного проекта
- `pnpm-workspace.yaml`, `lerna.json`
- Несколько `package.json` в подкаталогах
- `packages/`, `apps/` каталоги
- Рабочая область Nx (`nx.json`)

## Источники перед созданием навыка
- `package.json` (зависимости и команды)
- `tsconfig.json` (пути и параметры компилятора)
- `vite.config.*`, `next.config.*`, `webpack.config.*`
- `.env.example` (переменные окружения)

## Что искать в кодовой базе

### Корневые каталоги исходников
- `src/`, `app/`, `pages/`

### Типовые слои и каталоги: зафиксируй найденные
`components/`, `hooks/`, `services/`, `utils/`, `store/`, `api/`, `types/`, `contexts/`, `features/`, `layouts/`

### Признаки шаблонов

| Шаблон | Критерии обнаружения | Имя навыка |
|---------|-------------------|------------|
| Component | `export function *()`, `export const * =` с JSX | react-component |
| Hook | `use*`, `export function use*()` | custom-hook |
| Context | `createContext`, `useContext`, `*Provider` | react-context |
| Redux | `createSlice`, `configureStore`, `useSelector` | redux-slice |
| Zustand | `create(`, `useStore` | zustand-store |
| React Query | `useQuery`, `useMutation`, `QueryClient` | react-query |
| Form | `useForm`, `react-hook-form`, `Formik` | form-handling |
| Router | `createBrowserRouter`, `Route`, `useNavigate` | react-router |
| API Client | `axios`, `fetch`, `ky` | api-client |
| Testing | `@testing-library/react`, `render`, `screen` | rtl-test |
| Storybook | `*.stories.tsx`, `Meta`, `StoryObj` | storybook |
| Styled | `styled-components`, `@emotion`, `styled(` | styled-component |
| Tailwind | `className="*"`, `tailwind.config.js` | tailwind-usage |
| i18n | `useTranslation`, `i18next`, `t()` | i18n-usage |
| Auth | `useAuth`, `AuthProvider`, `PrivateRoute` | auth-pattern |

## Обязательные разделы результата

Добавь, если найдено:
- **Состав компонентов**: каталоги в `components/`
- **Функциональные модули/страницы**: каталоги в `features/`, `pages/`
- **Управление состоянием**: Redux, Zustand, Context
- **Настройка маршрутизации**: React Router и страницы Next.js
- **Слой API**: экземпляры axios и обёртки fetch
- **Способ оформления**: CSS-модули, Tailwind и styled-components
- **Обработка форм**: react-hook-form, Formik

## Откуда брать команды
- `package.json` раздел команд
- README и документация
- Сценарии CI
- Обычные команды: `npm run dev`, `npm run build`, `npm test`
- Добавляй только команды, которые есть в репозитории

## Основные пути
- `src/components/`, `src/hooks/`
- `src/pages/`, `src/features/`
- `src/store/`, `src/api/`
- `public/`, `dist/`, `build/`