frontend-dev-guidelines · davila7 — скилл для Claude Code: правила
Скилл задаёт агенту единый стиль работы с React и TypeScript: Suspense, ленивая загрузка, структура features, MUI v7 и TanStack.
npx claude-code-templates@latest --skill development/frontend-dev-guidelinesЧто делает frontend-dev-guidelines
Скилл включается, когда агент пишет компоненты, страницы, хуки, настраивает роутинг или тянет данные. Внутри — чек-листы для нового компонента и новой фичи, шпаргалка по импортам и разбор тем: паттерны компонентов, загрузка данных, организация файлов, стили, роутинг, состояния загрузки и ошибок, производительность, TypeScript. Каждая тема ведёт в отдельный файл в resources/.
Основной паттерн для данных — useSuspenseQuery вместе с Suspense-границами вместо проверок isLoading. Ранние возвраты со спиннером скилл запрещает: из-за них прыгает вёрстка. Уведомления — через useMuiSnackbar, react-toastify не используется. Стили на sx с SxProps<Theme>, а в MUI v7 сетка пишется как <Grid size={{ xs: 12, md: 6 }}> — старый синтаксис с xs и md напрямую уже не подойдёт.
Фичи живут в features/{feature-name}/ с подпапками api/, components/, hooks/, helpers/, types/, а переиспользуемое уходит в components/. Алиасы @/, ~types, ~components, ~features прописаны в vite.config.ts, поэтому проект без них скилл не покроет. Тяжёлые компоненты вроде таблиц и графиков грузятся через React.lazy и оборачиваются в SuspenseLoader.
Какие задачи решает
- задать структуру папок для новой фичи
- перевести запросы данных на
useSuspenseQuery - убрать ранние возвраты со спиннером и скачки вёрстки
- разложить стили на
sxи вынести их в отдельный файл - настроить ленивую загрузку тяжёлых компонентов
Примеры запросов агенту
- Создай фичу
billingпо структуре из скилла:api/,components/,hooks/,types/ - Перепиши этот компонент на
useSuspenseQueryи убери проверкуisLoading - Настрой роут
/billing/черезcreateFileRouteи ленивую загрузку страницы
Как установить frontend-dev-guidelines
1Через claude-code-templates
npx claude-code-templates@latest --skill development/frontend-dev-guidelines2Через Skills CLI (Vercel)
npx skills add davila7/claude-code-templates --skill frontend-dev-guidelines -a claude-code3Вручную: положить файлы
~/.claude/skills/frontend-dev-guidelines/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/frontend-dev-guidelines/
Вручную: положить файлы
.agents/skills/frontend-dev-guidelines/SKILL.mdДля всех проектов — ~/.agents/skills/
Вручную: положить файлы
.cursor/skills/frontend-dev-guidelines/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install davila7/claude-code-templates frontend-dev-guidelines2Вручную: положить файлы
.github/skills/frontend-dev-guidelines/SKILL.mdКомандой платформы
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/development/frontend-dev-guidelinesВручную: положить файлы
.devin/skills/frontend-dev-guidelines/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Claude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о frontend-dev-guidelines
Как установить frontend-dev-guidelines в Claude?
Через шаблоны автора: npx claude-code-templates@latest --skill development/frontend-dev-guidelines. Второй способ — npx skills add davila7/claude-code-templates --skill frontend-dev-guidelines -a claude-code. После установки файл лежит в ~/.claude/skills/frontend-dev-guidelines/SKILL.md.
Что делает frontend-dev-guidelines?
Даёт агенту набор правил по React и TypeScript: паттерны компонентов, загрузка данных через TanStack Query, структура features/, стили MUI v7, роутинг TanStack Router, состояния загрузки и ошибок, оптимизация производительности.
Какие алиасы импортов использует скилл?
@/ ведёт в src/, ~types — в src/types, ~components — в src/components, ~features — в src/features. Они объявлены в vite.config.ts, так что в проекте без этих алиасов примеры придётся править.
Похожие скиллы
Всё по теме «Фронтенд и UI» →Сначала — frontend-dev-guidelines от других авторов.
