# web-frameworks

Скилл-группа для фуллстек-разработки: подсказывает агенту, как собирать приложения на Next.js, монорепозитории на Turborepo и подключать иконки RemixIcon.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 372 установки · ★ 2228
- Автор: mrgoonie
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/mrgoonie/claudekit-skills/tree/HEAD/.claude/skills/web-frameworks/SKILL.md
- Обновлён: 2026-04-03
- HTML: https://affpapa.org/nevibecode/skills/web-frameworks

## Что делает

Скилл объединяет три темы. Next.js разбирается по частям: App Router, Server Components, RSC, PPR, SSR, SSG и ISR. Отдельные справочники посвящены маршрутизации, загрузке данных с кешем и ревалидацией, оптимизации картинок, шрифтов и бандла. Turborepo закрывает монорепозитории: настройка воркспейсов, пайплайны задач с зависимостями, параллельный запуск и кеш — локальный и удалённый. Третья часть — RemixIcon, больше 3100 SVG-иконок в outlined и filled стилях, с вариантами подключения через webfont и React-компоненты.

Внутри лежит `SKILL.md` и набор справочников в `references/`: по App Router, Server Components, data fetching, оптимизации, setup и пайплайнам Turborepo, кешированию и интеграции RemixIcon. Есть готовые шаблоны: структура монорепозитория с `apps/` и `packages/`, конфиг `turbo.json` с задачами build, dev, lint и test, пример общей кнопки из `packages/ui`. Стартовые команды — `npx create-next-app@latest` и `npx create-turbo@latest`.

Скилл рассчитан на TypeScript-проекты, поэтому в чистом JavaScript-коде примеры придётся переписывать под себя. Ставится через `npx skills add` в Claude, Codex, Cursor, Gemini CLI и OpenCode, для GitHub Copilot есть `gh skill install`.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mrgoonie/claudekit-skills --skill web-frameworks -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mrgoonie/claudekit-skills --skill web-frameworks -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mrgoonie/claudekit-skills --skill web-frameworks -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install mrgoonie/claudekit-skills web-frameworks
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mrgoonie/claudekit-skills --skill web-frameworks -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/mrgoonie/claudekit-skills --path .claude/skills/web-frameworks
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add mrgoonie/claudekit-skills --skill web-frameworks -a opencode
```

### Claude.ai

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

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/mrgoonie/claudekit-skills/tree/HEAD/.claude/skills/web-frameworks/SKILL.md

## Когда брать
- собрать фуллстек-приложение на Next.js с App Router
- настроить монорепозиторий с общими пакетами и apps
- выбрать между SSR, SSG и ISR для конкретной страницы
- ускорить сборку через кеш и параллельные задачи Turborepo
- подключить набор SVG-иконок в React-компоненты

## Примеры запросов агенту
- Создай монорепозиторий на Turborepo с apps/web и packages/ui
- Настрой кеширование fetch в Next.js App Router с ревалидацией
- Подключи RemixIcon в общий пакет UI и сделай кнопку с иконкой

## Похожие
- [monorepo](https://affpapa.org/nevibecode/skills/monorepo.md) — скилл · 694 установки
- [turborepo-monorepo](https://affpapa.org/nevibecode/skills/turborepo-monorepo.md) — скилл · 4100 установок
- [modern-web-development](https://affpapa.org/nevibecode/skills/modern-web-development.md) — скилл · 1200 установок
- [scaffold-nextjs](https://affpapa.org/nevibecode/skills/scaffold-nextjs.md) — скилл · 720 установок
- [Monorepo taste](https://affpapa.org/nevibecode/prompts/monorepo-taste.md) — промпт · ★ 174597
- [turborepo](https://affpapa.org/nevibecode/skills/vercel-turborepo.md) — скилл · 84700 установок

Из того же набора: [mrgoonie/claudekit-skills](https://affpapa.org/nevibecode/by/mrgoonie/claudekit-skills.md) — 20 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

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