refactor: привести проект к стайлгайду

- Убран FC из всех шаблонов и компонентов
- Заменён interface на type, .interface.ts на .type.ts
- Добавлен паттерн Params/Props/RootAttrs в типы
- Деструктуризация пропсов перенесена в тело компонента
- Добавлены styles/ и types/ для feature, entity, widget, screen
- Добавлен расширенный JSDoc-шаблон с назначением и сценариями
- Исправлен баг в index.ts шаблона component
- Добавлены .editorconfig, .env.example
- Добавлен organizeImports.biome в .vscode/settings.json
- Исправлен .gitignore для .env.example
- Переписан README под проект-шаблон
- Удалён CLAUDE.md

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

.env.example

@@ -0,0 +1,2 @@
+# Базовый URL приложения
+NEXT_PUBLIC_APP_URL=http://localhost:3000

.gitignore

@@ -32,6 +32,7 @@ yarn-error.log*
 
 # env files (can opt-in for committing if needed)
 .env*
+!.env.example
 
 # vercel
 .vercel

.templates/component/{{name.kebabCase}}/index.ts

@@ -1 +1 @@
-export { {name.pascalCase} } from './{{name.kebabCase}}'
+export { {{name.pascalCase}} } from './{{name.kebabCase}}'

.templates/component/{{name.kebabCase}}/types/{{name.kebabCase}}.interface.ts

@@ -1,6 +0,0 @@
-import type { HTMLAttributes } from 'react'
-
-/**
- * Параметры {{name.pascalCase}}.
- */
-export interface {{name.pascalCase}}Props extends HTMLAttributes<HTMLDivElement> {}

.templates/component/{{name.kebabCase}}/types/{{name.kebabCase}}.type.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'react'
+
+/**
+ * Параметры {{name.pascalCase}}.
+ */
+export type {{name.pascalCase}}Params = {}
+
+/** HTML-атрибуты корневого элемента. */
+type RootAttrs = HTMLAttributes<HTMLDivElement>
+
+export type {{name.pascalCase}}Props = RootAttrs & {{name.pascalCase}}Params

.templates/component/{{name.kebabCase}}/{{name.kebabCase}}.tsx

@@ -1,15 +1,20 @@
-import type { FC } from 'react'
 import cl from 'clsx'
-import type { {{name.pascalCase}}Props } from './types/{{name.kebabCase}}.interface'
+import type { {{name.pascalCase}}Props } from './types/{{name.kebabCase}}.type'
 import styles from './styles/{{name.kebabCase}}.module.css'
 
 /**
- * {{name.pascalCase}}.
+ * <Назначение компонента {{name.pascalCase}} в 1 строке>.
+ *
+ * Используется для:
+ *  - <сценарий 1>
+ *  - <сценарий 2>
  */
-export const {{name.pascalCase}}: FC<{{name.pascalCase}}Props> = ({ className, ...htmlAttr }) => {
+export const {{name.pascalCase}} = (props: {{name.pascalCase}}Props) => {
+  const { children, className, ...htmlAttr } = props
+
   return (
     <div {...htmlAttr} className={cl(styles.root, className)}>
-      {{name.kebabCase}}
+      {children}
     </div>
   )
 }

.templates/entity/{{name.kebabCase}}/styles/{{name.kebabCase}}.module.css

@@ -0,0 +1,2 @@
+.root {
+}

.templates/entity/{{name.kebabCase}}/types/{{name.kebabCase}}.type.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'react'
+
+/**
+ * Параметры сущности {{name.pascalCase}}.
+ */
+export type {{name.pascalCase}}EntityParams = {}
+
+/** HTML-атрибуты корневого элемента. */
+type RootAttrs = HTMLAttributes<HTMLDivElement>
+
+export type {{name.pascalCase}}EntityProps = RootAttrs & {{name.pascalCase}}EntityParams

.templates/entity/{{name.kebabCase}}/{{name.kebabCase}}.entity.tsx

@@ -1,12 +1,20 @@
-import type { FC } from 'react'
+import cl from 'clsx'
+import type { {{name.pascalCase}}EntityProps } from './types/{{name.kebabCase}}.type'
+import styles from './styles/{{name.kebabCase}}.module.css'
 
 /**
- * Сущность {{name.pascalCase}}.
+ * <Назначение сущности {{name.pascalCase}} в 1 строке>.
+ *
+ * Используется для:
+ *  - <сценарий 1>
+ *  - <сценарий 2>
  */
-export const {{name.pascalCase}}Entity: FC = () => {
+export const {{name.pascalCase}}Entity = (props: {{name.pascalCase}}EntityProps) => {
+  const { children, className, ...htmlAttr } = props
+
   return (
-    <div>
+    <div {...htmlAttr} className={cl(styles.root, className)}>
-      {{name.kebabCase}}
+      {children}
     </div>
   )
 }

.templates/feature/{{name.kebabCase}}/styles/{{name.kebabCase}}.module.css

@@ -0,0 +1,2 @@
+.root {
+}

.templates/feature/{{name.kebabCase}}/types/{{name.kebabCase}}.type.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'react'
+
+/**
+ * Параметры фичи {{name.pascalCase}}.
+ */
+export type {{name.pascalCase}}FeatureParams = {}
+
+/** HTML-атрибуты корневого элемента. */
+type RootAttrs = HTMLAttributes<HTMLDivElement>
+
+export type {{name.pascalCase}}FeatureProps = RootAttrs & {{name.pascalCase}}FeatureParams

.templates/feature/{{name.kebabCase}}/{{name.kebabCase}}.feature.tsx

@@ -1,12 +1,20 @@
-import type { FC } from 'react'
+import cl from 'clsx'
+import type { {{name.pascalCase}}FeatureProps } from './types/{{name.kebabCase}}.type'
+import styles from './styles/{{name.kebabCase}}.module.css'
 
 /**
- * Фича {{name.pascalCase}}.
+ * <Назначение фичи {{name.pascalCase}} в 1 строке>.
+ *
+ * Используется для:
+ *  - <сценарий 1>
+ *  - <сценарий 2>
  */
-export const {{name.pascalCase}}Feature: FC = () => {
+export const {{name.pascalCase}}Feature = (props: {{name.pascalCase}}FeatureProps) => {
+  const { children, className, ...htmlAttr } = props
+
   return (
-    <div>
+    <div {...htmlAttr} className={cl(styles.root, className)}>
-      {{name.kebabCase}}
+      {children}
     </div>
   )
 }

.templates/layout/{{name.kebabCase}}/types/{{name.kebabCase}}.interface.ts

@@ -1,6 +0,0 @@
-/**
- * Параметры {{name.pascalCase}}Layout.
- */
-export interface {{name.pascalCase}}LayoutProps {
-  children: React.ReactNode
-}

.templates/layout/{{name.kebabCase}}/types/{{name.kebabCase}}.type.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'react'
+
+/**
+ * Параметры {{name.pascalCase}}Layout.
+ */
+export type {{name.pascalCase}}LayoutParams = {}
+
+/** HTML-атрибуты корневого элемента. */
+type RootAttrs = HTMLAttributes<HTMLDivElement>
+
+export type {{name.pascalCase}}LayoutProps = RootAttrs & {{name.pascalCase}}LayoutParams

.templates/layout/{{name.kebabCase}}/{{name.kebabCase}}.layout.tsx

@@ -1,13 +1,19 @@
-import type { FC } from 'react'
+import cl from 'clsx'
-import type { {{name.pascalCase}}LayoutProps } from './types/{{name.kebabCase}}.interface'
+import type { {{name.pascalCase}}LayoutProps } from './types/{{name.kebabCase}}.type'
 import styles from './styles/{{name.kebabCase}}.module.css'
 
 /**
- * Layout {{name.pascalCase}}.
+ * <Назначение layout {{name.pascalCase}} в 1 строке>.
+ *
+ * Используется для:
+ *  - <сценарий 1>
+ *  - <сценарий 2>
  */
-export const {{name.pascalCase}}Layout: FC<{{name.pascalCase}}LayoutProps> = ({ children }) => {
+export const {{name.pascalCase}}Layout = (props: {{name.pascalCase}}LayoutProps) => {
+  const { children, className, ...htmlAttr } = props
+
   return (
-    <div className={styles.root}>
+    <div {...htmlAttr} className={cl(styles.root, className)}>
       {children}
     </div>
   )

.templates/screen/{{name.kebabCase}}/types/{{name.kebabCase}}.type.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'react'
+
+/**
+ * Параметры экрана {{name.pascalCase}}.
+ */
+export type {{name.pascalCase}}ScreenParams = {}
+
+/** HTML-атрибуты корневого элемента. */
+type RootAttrs = HTMLAttributes<HTMLDivElement>
+
+export type {{name.pascalCase}}ScreenProps = RootAttrs & {{name.pascalCase}}ScreenParams

.templates/screen/{{name.kebabCase}}/{{name.kebabCase}}.screen.tsx

@@ -1,13 +1,20 @@
-import type { FC } from 'react'
+import cl from 'clsx'
+import type { {{name.pascalCase}}ScreenProps } from './types/{{name.kebabCase}}.type'
 import styles from './styles/{{name.kebabCase}}.module.css'
 
 /**
- * Экран {{name.pascalCase}}.
+ * <Назначение экрана {{name.pascalCase}} в 1 строке>.
+ *
+ * Используется для:
+ *  - <сценарий 1>
+ *  - <сценарий 2>
  */
-export const {{name.pascalCase}}Screen: FC = () => {
+export const {{name.pascalCase}}Screen = (props: {{name.pascalCase}}ScreenProps) => {
+  const { children, className, ...htmlAttr } = props
+
   return (
-    <div className={styles.root}>
+    <div {...htmlAttr} className={cl(styles.root, className)}>
-      {{name.kebabCase}}
+      {children}
     </div>
   )
 }

.templates/widget/{{name.kebabCase}}/types/{{name.kebabCase}}.type.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from 'react'
+
+/**
+ * Параметры виджета {{name.pascalCase}}.
+ */
+export type {{name.pascalCase}}WidgetParams = {}
+
+/** HTML-атрибуты корневого элемента. */
+type RootAttrs = HTMLAttributes<HTMLDivElement>
+
+export type {{name.pascalCase}}WidgetProps = RootAttrs & {{name.pascalCase}}WidgetParams

.templates/widget/{{name.kebabCase}}/{{name.kebabCase}}.widget.tsx

@@ -1,13 +1,20 @@
-import type { FC } from 'react'
+import cl from 'clsx'
+import type { {{name.pascalCase}}WidgetProps } from './types/{{name.kebabCase}}.type'
 import styles from './styles/{{name.kebabCase}}.module.css'
 
 /**
- * Виджет {{name.pascalCase}}.
+ * <Назначение виджета {{name.pascalCase}} в 1 строке>.
+ *
+ * Используется для:
+ *  - <сценарий 1>
+ *  - <сценарий 2>
  */
-export const {{name.pascalCase}}Widget: FC = () => {
+export const {{name.pascalCase}}Widget = (props: {{name.pascalCase}}WidgetProps) => {
+  const { children, className, ...htmlAttr } = props
+
   return (
-    <div className={styles.root}>
+    <div {...htmlAttr} className={cl(styles.root, className)}>
-      {{name.kebabCase}}
+      {children}
     </div>
   )
 }

.vscode/settings.json

@@ -2,7 +2,8 @@
   "editor.defaultFormatter": "biomejs.biome",
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.biome": "explicit"
+    "source.fixAll.biome": "explicit",
+    "source.organizeImports.biome": "explicit"
   },
   "files.associations": {
     "*.css": "postcss"

CLAUDE.md

@@ -1 +0,0 @@
-@AGENTS.md

README.md

@@ -1,36 +1,64 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# Next.js Template
 
-## Getting Started
+Шаблон проекта на Next.js, построенный по [стайлгайду](https://gromlab.ru/docs/nextjs-style-guide).
 
-First, run the development server:
+## Стек
 
-```bash
+- **Next.js 16** — фреймворк
-npm run dev
+- **React 19** / **TypeScript 5** — UI и типизация
-# or
+- **Mantine UI 8** — компоненты
-yarn dev
+- **Zustand 5** — глобальное состояние
-# or
+- **SWR 2** — получение данных
-pnpm dev
+- **PostCSS Modules** — стили
-# or
+- **Biome** — линтер и форматтер
-bun dev
+- **clsx** — конкатенация CSS-классов
+
+## Архитектура
+
+Проект использует кастомизированный FSD (Feature-Sliced Design):
+
+```
+src/
+├── app/        # Роутинг Next.js, провайдеры, глобальные стили
+├── screens/    # Собранные страницы (UI)
+├── layouts/    # Каркасы и шаблоны страниц
+├── widgets/    # Крупные самостоятельные блоки интерфейса
+├── features/   # Пользовательские сценарии
+├── entities/   # Бизнес-сущности
+└── shared/     # Переиспользуемый код (UI, утилиты, типы)
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Зависимости идут строго сверху вниз: `app` -> `screens` -> `layouts` -> `widgets` -> `features` -> `entities` -> `shared`.
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+## Быстрый старт
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+```bash
+npx tiged git@gromlab.ru:templates/nextjs.git my-app
+cd my-app
+npm install
+npm run dev
+```
 
-## Learn More
+## Генерация кода
 
-To learn more about Next.js, take a look at the following resources:
+Модули создаются из шаблонов `.templates/`:
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+```bash
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+npx @gromlab/create component button src/shared/ui
+npx @gromlab/create feature auth src/features
+npx @gromlab/create widget header src/widgets
+npx @gromlab/create entity user src/entities
+npx @gromlab/create layout admin src/layouts
+npx @gromlab/create screen profile src/screens
+npx @gromlab/create store auth src/shared/model
+```
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+## Скрипты
 
-## Deploy on Vercel
+| Команда | Описание |
-
+|---|---|
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+| `npm run dev` | Запуск dev-сервера |
-
+| `npm run build` | Сборка для продакшена |
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+| `npm run start` | Запуск продакшен-сервера |
+| `npm run lint` | Проверка кода (Biome) |
+| `npm run format` | Форматирование кода (Biome) |

src/screens/home/home.screen.tsx

@@ -1,11 +1,10 @@
 import { Container, Image, Stack, Text, Title } from '@mantine/core';
-import type { FC } from 'react';
 import styles from './styles/home.module.css';
 
 /**
  * Главный экран приложения.
  */
-export const HomeScreen: FC = () => {
+export const HomeScreen = () => {
   return (
     <div className={styles.root}>
       <Container size="sm">