Популярное
Свежее
Моя лента
Сообщения
Рейтинг
Курсы
Темы
Маркетинг
Сервисы
AI
Личный опыт
Деньги
Инвестиции
Право
Карьера
Путешествия
Крипто
Показать все
vc.ru
О проекте
Правила
Реклама
Приложения
Max Bantsevich
Разработка

Как мы ускорили разработку админок с помощью Cursor и собственного фреймворка

Как мы ускорили разработку админок с помощью Cursor и собственного фреймворка

Мы описали правила для AI прямо в проекте и подключили их к Cursor. В итоге админки собираются быстрее, код стал чище, а рутину — можно не трогать. Рассказываем, как именно это работает на практике.

В команде dev.family мы используем Cursor и свой open source-фреймворк Admiral. Недавно мы объединили их — и теперь AI сам собирает CRUD-страницы по нашим правилам. Объясняем, как устроена автоматизация и как это может пригодиться другим командам.

Мы не делаем вид, что пишем всё вручную — в работе активно используем ИИ-инструменты вроде Cursor. Это удобный способ автоматизировать рутину, ускорить типовые задачи и держать код в рамках заданных стандартов. Главное — задать эти стандарты правильно.

Параллельно мы развиваем свой open source фреймворк Admiral для сборки административных панелей. Там уже есть готовые компоненты, структура, документация — можно быстро собрать админку без лишней возни с базовыми вещами.

В какой-то момент мы решили объединить Cursor и Admiral. Добавили в проект директорию .cursor/rules, где описали правила для генерации CRUD-страниц, использования компонентов и хуков. Теперь не нужно каждый раз проверять структуру, валидность пропсов или соответствие внутренним стандартам — всё уже описано, и Cursor сам подсказывает, если что-то не так.

По сути, мы сформировали набор инструкций для ИИ, который помогает генерировать и поддерживать код в нужном состоянии. Это упростило процесс, уменьшило количество ошибок и позволило разработчикам сфокусироваться на нетривиальных задачах.

Расскажем, как устроена интеграция, что именно автоматизируется и какие плюсы это даёт в реальной разработке.

Что такое .cursor/rules

.cursor/rules — это директория с markdown-файлами, содержащими правила для разработки. Cursor подхватывает эти правила и использует их как контекст при генерации кода. Подробнее — в официальной документации.

Какие правила мы описали

На текущий момент в Admiral используются три правила:

  1. crud-page.mdc — описание структуры CRUD-страниц и всей сопутствующей логики;
  2. admiral-components.mdc — документация по компонентам из библиотеки;
  3. admiral-hooks.mdc — документация по хукам.

admiral-components.mdc и admiral-hooks.mdc автоматически подключаются к каждому запросу в IDE. Это позволяет AI избегать типичных ошибок — например, использования несуществующих пропсов или компонентов не по назначению.

crud-page.mdc — это инструкция по созданию стандартизированных CRUD-страниц. В ней описаны:

  • структура файлов и директорий;
  • правила именования переменных и функций;
  • список допустимых компонентов из @devfamily/admiral;
  • базовые требования к формам, таблицам и фильтрам.

От разработчика нужно только продумать, какие поля будут в таблицах и формах. Всё остальное — от структуры до типизации — Cursor соберёт сам.

Как работает crud-page.mdc внутри Cursor

Файл crud-page.mdc содержит детальное описание, как должна выглядеть типовая CRUD-страница. Вот как это воспринимает AI-агент:

1. Базовые принципы:

  • единая структура страниц;
  • правила наименования файлов и переменных;
  • ограничение на используемые компоненты;
  • жёсткая структура директорий.

2. Шаблон CRUD-страницы:

  • импорты (React, хуки, компоненты);
  • конфигурация через createCRUD;
  • обязательные секции (path, resource, index, filter, form);
  • опциональные секции (actions, create, update, topContent и др.).

3. Файловая структура:

admin/ ├── src/ │ └── crud/ │ └─── [resource]/ │ ├──── index.tsx # файл с конфигурацией CRUD-страницы │ ├──── types.ts # Типизация │ └────components/ # На случай необходимости использования кастомных компонентов └── config/ └─── menu.tsx # Файл, описывающий как должно выглядеть меню навигации └── pages/ Роутинг └─── [resource]/ ├──── index.tsx # Страница с таблицей ├──── create.tsx # Страница с формой создания └──── [id].tsx # Страница с формой редактирования

4. Процесс генерации:

  • создание файлов и директорий;
  • настройка роутинга;
  • добавление пунктов меню;
  • проверка типизации и линтинга.

5. Рекомендации по формам и таблицам:

  • настройки ширины колонок;
  • рендеринг сложных типов данных;
  • allowClear в селектах;
  • columnSpan в формах и др.

6. Типизация:

  • типы подтягиваются из @devfamily/admiral/lib/admiral/crud;
  • Cursor использует их при генерации и проверке кода.

7. Взаимодействие с пользователем:

  • AI запрашивает список из 7 пунктов (название, ресурс, поля таблиц и форм);
  • если данных нет, Cursor задаёт вопросы;
  • затем создаёт структуру на их основе.

8. Примеры кода:

  • доступны внутри rules;
  • AI использует их как шаблоны при генерации.

Что получает разработчик на выходе

Когда запускается генерация CRUD-страницы с использованием правила:

  1. AI проверяет входные данные;
  2. создаёт структуру файлов;
  3. генерирует код по заданным правилам;
  4. использует только допустимые компоненты;
  5. связывает все файлы между собой;
  6. обновляет меню и роутинг;
  7. проверяет и исправляет ошибки типов и линтера.

В результате получаем чистый, стандартизированный код, который не требует ручной доработки на базовом уровне и легко расширяется.

Как использовать crud-page.mdc

Чтобы сгенерировать CRUD-страницу, достаточно упомянуть правило @crud-page в чате Cursor. AI запросит базовую информацию:

  1. Название ресурса (в PascalCase/kebab-case);
  2. API-ресурс;
  3. Список колонок для таблицы;
  4. Поля для формы создания;
  5. Поля для формы редактирования (если отличаются);
  6. Поля для фильтров;
  7. Поля для быстрых фильтров (если нужны).

На основе этих данных Cursor создаёт структуру, пишет код и проводит первичную проверку.

Пример:

Сначала вызываем правило в чате.

Как мы ускорили разработку админок с помощью Cursor и собственного фреймворка

AI-агент не находит пользовательский список и запрашивает его, а мы в ответ присылаем все необходимые данные.

Как мы ускорили разработку админок с помощью Cursor и собственного фреймворка

Далее AI-агент создает все необходимые файлы и проверяет заново созданный код на наличие ошибок типизации и линтеров, находит их и исправляет.

Как мы ускорили разработку админок с помощью Cursor и собственного фреймворка

На выходе мы получаем все необходимые файлы без единой ошибки и можем дальше описывать инструкции для агента, чтобы и дальше редактировать новые файлы – с помощью Cursor либо вручную.

Заключение

Сейчас мы используем .cursor/rules в Admiral на реальных проектах. По мере необходимости дописываем и дополняем правила. В планах — покрыть больше сценариев: от настройки таблиц до управления правами доступа. Уже сейчас интеграция экономит десятки часов и повышает стабильность кода — и с этим легко можно работать в любых проектах, не только наших.

Начать дискуссию