# frontend-dev-guidelines

Скилл задаёт агенту единый стиль работы с React и TypeScript: Suspense, ленивая загрузка, структура features, MUI v7 и TanStack.

- скилл · `type=skill` · Claude Code · 556 установок
- Автор: davila7
- Лицензия: не указана · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/development/frontend-dev-guidelines
- Обновлён: 2026-10-24
- HTML: https://affpapa.org/nevibecode/skills/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`.

## Установка

### Claude Code (родная платформа)

1. **Через claude-code-templates**
```bash
npx claude-code-templates@latest --skill development/frontend-dev-guidelines
```

2. **Через Skills CLI (Vercel)**
```bash
npx skills add davila7/claude-code-templates --skill frontend-dev-guidelines -a claude-code
```

3. **Вручную: положить файлы**
- Файл: `~/.claude/skills/frontend-dev-guidelines/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/frontend-dev-guidelines/

### Codex

**Вручную: положить файлы**
- Файл: `.agents/skills/frontend-dev-guidelines/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

**Вручную: положить файлы**
- Файл: `.cursor/skills/frontend-dev-guidelines/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install davila7/claude-code-templates frontend-dev-guidelines
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/frontend-dev-guidelines/SKILL.md`

### Gemini CLI

**Командой платформы**
```bash
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/development/frontend-dev-guidelines
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/frontend-dev-guidelines/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/davila7/claude-code-templates/tree/HEAD/cli-tool/components/skills/development/frontend-dev-guidelines

## Когда брать
- задать структуру папок для новой фичи
- перевести запросы данных на `useSuspenseQuery`
- убрать ранние возвраты со спиннером и скачки вёрстки
- разложить стили на `sx` и вынести их в отдельный файл
- настроить ленивую загрузку тяжёлых компонентов

## Примеры запросов агенту
- Создай фичу `billing` по структуре из скилла: `api/`, `components/`, `hooks/`, `types/`
- Перепиши этот компонент на `useSuspenseQuery` и убери проверку `isLoading`
- Настрой роут `/billing/` через `createFileRoute` и ленивую загрузку страницы

## Похожие
- [tanstack-store](https://affpapa.org/nevibecode/skills/tanstack-store.md) — скилл · 1800 установок
- [frontend-developer](https://affpapa.org/nevibecode/skills/frontend-developer.md) — скилл · 1300 установок
- [router-core](https://affpapa.org/nevibecode/skills/router-core.md) — скилл · 589 установок
- [dynamic-import](https://affpapa.org/nevibecode/skills/dynamic-import.md) — скилл · 1500 установок
- [nextjs-use-search-params-suspense](https://affpapa.org/nevibecode/skills/nextjs-use-search-params-suspense.md) — скилл · 311 установок
- [clerk-tanstack-patterns](https://affpapa.org/nevibecode/skills/clerk-tanstack-patterns.md) — скилл · 15500 установок

## Другие версии с тем же именем
- [frontend-dev-guidelines · sickn33](https://affpapa.org/nevibecode/skills/sickn33-frontend-dev-guidelines.md) — 1500 установок

Из того же набора: [davila7/claude-code-templates](https://affpapa.org/nevibecode/by/davila7/claude-code-templates.md) — 205 карточек

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md