База знаний фронтенд-команды

Frontend Knowledge Base

Единый набор правил, процессов и инструментов, с которым фронтенд funtech работает одинаково на разных проектах: от онбординга и Figma→код до Cursor-агента и профилей ролей.

источник: /home/1.Knowledge base/frontend стек: React · Next.js · Vite · SCSS пакет: cursor-package-funtech
Скорость

Одинаковый старт на любом проекте

Один workflow, один npm-пакет правил, один путь Figma→код. Новый человек и новый репозиторий подключаются за минуты, а не за неделю «как у нас принято».

Качество

Правила живут в Cursor, не в голове

Rules и skills заставляют агента и разработчика следовать Feature/UI слоям, токенам, naming и API-контрактам. Меньше регрессий и разнобоя между проектами.

Масштаб

Найм, рост и стандарты в одном месте

Вакансии, вопросы к собесу, профили Middle→Lead и учебные треки — общая лестница компетенций, а не разрозненные Google Docs.

01

Что лежит в базе

Пять блоков: инструменты агента, рабочие процессы, дизайн→код, люди и обучение.

A
cursor-package/
npm-пакет rules + skills + hooks для Cursor
 B
Процессы
workflow, ветки, Figma MCP, стиль-стратегия
 C
Дизайн → код
правила подготовки макетов и переноса
 D
Люди
вакансия, собес, профили ролей
 E
Обучение
базовый курс, React, практические задания
 F
Внешние документы
презентации и план развития Frontend
02

Что это нам даёт на практике

  • Единый «операционный системный» слой фронтендаНовый проект = npm i cursor-package-funtech → в корне появляются rules/skills/hooks. Агент сразу знает, как у нас пишут код.
  • Предсказуемый deliveryYouTrack → ветка → Figma → код по skills → lint/build/rules:review → PR. Меньше «у каждого свой ритуал».
  • Меньше трения дизайн↔разработкаdesign-rules для дизайнеров + figma-connect + figma-to-code для разработчиков. Макеты уже «готовы к коду».
  • Прозрачная лестница ролейMiddle / Middle+ / Senior / Lead — зоны ответственности и ожидания зафиксированы. Проще онбордить, оценивать и растить.
  • Обоснованный стек стилейtailwind-fit фиксирует вывод: для брендовых pixel-perfect проектов основа — CSS Modules + токены; Tailwind — точечно.
  • Общий язык с AIПравила на русском для диалога, код и идентификаторы на английском. Агент не «придумывает стиль команды» — он его читает.
03

cursor-package-funtech

Главный артефакт базы. Ставится в React + Vite + SCSS проекты и копирует папку .cursor в корень репозитория (postinstall + CLI).

01
npm i cursor-package-funtech
02
В корне появляется .cursor/
03
Агент читает rules + skills
04
npm run rules:review
05
Отчёт в .cursor/reviews/

Rules — короткие hard-правила

general.mdcalways

Ответы на русском; discover-first; слои Feature / UI / pages; aliases; ассеты WEBP_/SVG_; без fetch внутри UI-примитивов.

components.mdc

FC, папка-тройка, ≤70 строк, вынос логики и effects, a11y, порядок тела компонента.

naming.mdc

PascalCase / useX / camelCase / UPPER_SNAKE и layout папок.

api.mdc

ENDPOINTS + apiClient + domain API; вызовы из thunks/loaders.

errors.mdc

rejectWithValue, осмысленный console.error, без пустых catch.

figma-rules.mdc

MCP get_design_context → адаптировать под SCSS/токены, не копировать Tailwind as-is.

markdown.mdc

Как писать docs/rules: английский в .cursor, без лишних md без запроса.

Skills — развёрнутые гайды

project-conventions coding-standards react-components react-feature-ui data-layer figma-to-code ui-motion git-workflow linting-formatting project-rules-review

Плюс references у figma-to-code: Auto Layout → flex/gap/`--ui-scale` и чеклист сверки со скриншотом MCP.

Hooks

rules-review.pyreport-only

Смотрит staged-дифф (webp, токены, type vs interface, deep imports…) и пишет отчёт. Всегда exit 0.

rules-review-checklist.md

Чеклист ручной проверки перед PR: ассеты, токены, UI reuse, размер файлов, hooks, aliases.

04

Процессы и решения

frontend-workflow.md

корень

End-to-end: YouTrack → установка пакета → ветка → Figma → реализация по rules/skills → lint/build/rules:review → PR → тест. Точка входа для онбординга разработчика.

feature-branches.md

корень

Ветки только от dev, имя dev/<feature-name>, rebase, MR в dev, ревью, merge. Прямые коммиты в dev запрещены.

figma-connect.md

корень

Figma Desktop Dev Mode MCP → Cursor: URL 127.0.0.1:3845, плагин, проверка через Agent.

tailwind-fit.md

решение

Сравнение Tailwind vs CSS Modules+токены vs гибрид на опыте брендовых проектов. Вывод: основа — CSS Modules; Tailwind — точечно для типовых UI.

05

Дизайн → код

design-rules.md

для дизайна и AI

Как готовить Figma, чтобы макет был структурным описанием будущей реализации: Frames вместо Groups, Auto Layout, naming в PascalCase, variants, tokens, типографика, иконки, адаптив, чеклист перед передачей в разработку.

один экран = один Frame Auto Layout first Variables / spacing scale без «Group 5»
06

Люди: найм и роли

job-description-frontend.md

вакансия

Middle Frontend (React / Next.js): обязанности, обязательные требования, стек, плюсы (Canvas / Three / GSAP), ожидания по AI/Cursor, оффер.

interview-questions.md

собес

Вопросы с опорными ответами: browser pipeline, FSD/Atomic, Virtual DOM, immutability, события, CORS, CSR/SSG/SSR + устное задание.

role-profiles/

middle.md

UI по Figma, API, state, качество и перф, зоны ответственности в команде.

advanced-middle.md

Middle+: ownership фронтенда проекта, архитектура, наставничество, code review.

senior.md

Frontend Owner нескольких проектов, поддержка Middle+, внедрение стандартов Lead.

lead.md

Стандарты и консистентность между проектами. Не delivery/PM и не CTO — владелец фронтенд-практик.

07

Обучение

learning/base.md

Основы: браузер, HTML, CSS, JS, TypeScript — курируемые ссылки (YouTube, learn.javascript.ru, памятка по тегам).

learning/react-advanced.md

React + Redux трек и материалы «как работает React».

learning/task1.md

практика

Todo List на чистом HTML/CSS/JS: CRUD, счётчики, опционально фильтры — проверка базовых навыков без фреймворка.

08

Внешние документы

Ссылки из docs.md — живые презентации и план развития.

Промежуточный результат по внедрению Cursor
Google Slides — статус внедрения AI-инструментов во фронтенд
План развития Frontend
Google Doc — roadmap направления
Онбординг frontend-разработчика
Google Slides — презентация для новых людей
09

Как это связано

Найм → роль → обучение. Вакансия и собес отбирают Middle; role-profiles задают ожидания по мере роста; learning/ закрывает пробелы.

Онбординг → ежедневная работа. frontend-workflow + feature-branches + figma-connect + пакет — один контур от первого дня до PR.

Дизайн ↔ код. design-rules готовят макет; MCP и figma-to-code переносят его в React+SCSS без «перевода через Tailwind».

Стиль как политика. tailwind-fit — зафиксированное архитектурное решение, чтобы не спорить в каждом новом проекте.