скилл CX Codex

vite-react-best-practices — скилл для Claude Code: обзор и запуск

Q: Как установить vite-react-best-practices в Claude Code?

Выполните команду `npx skills add claudiocebpaz/vite-react-best-practices --skill vite-react-best-practices -a claude-code`. Она разместит инструкцию по пути `~/.claude/skills/vite-react-best-practices/SKILL.md`.

Сборник правил для разработки React SPA на Vite: настройка раздачи статики и управление кешированием ассетов.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓

npx skills add claudiocebpaz/vite-react-best-practices --skill vite-react-best-practices -a claude-code

Открыть на GitHub

Что делает vite-react-best-practices

Скилл содержит набор инструкций для создания одностраничных приложений на React со сборщиком Vite. Документация сфокусирована на деплое и оптимизации производительности React. Правила раздачи статики требуют обязательной настройки перенаправления запросов, иначе клиентский роутинг перестанет открывать страницы по прямым ссылкам. Для сборки предписана стратегия с неизменяемыми ассетами и запретом кеширования index.html.

В блоке React-паттернов разбирается ленивая загрузка маршрутов и предотвращение сдвига макета у картинок. Управление серверным состоянием предлагается выносить в React Query или SWR. Также описаны случаи применения хуков useMemo и useCallback. Отдельное правило запрещает импорты из папки dist, чтобы бандлер не упаковывал один код дважды.

Переменные окружения требуют префикса VITE_ для безопасного доступа на клиенте. Перед отправкой изменений в репозиторий правила предписывают локальную проверку сборки через команду preview. Свод всех инструкций доступен в файле AGENTS.md.

Какие задачи решает

настроить статические перенаправления для клиентского роутинга
сконфигурировать кеширование ассетов и index.html при сборке
разделить маршруты приложения с помощью ленивой загрузки
устранить дублирование бандлов из-за импортов из dist

Примеры запросов агенту

Проверь настройки хостинга и сборки Vite для работы клиентского роутинга.
Оптимизируй компоненты React и настрой ленивую загрузку маршрутов.
Помоги настроить кеширование ассетов и index.html перед публикацией.

Как установить vite-react-best-practices

1Через Skills CLI (Vercel)

npx skills add claudiocebpaz/vite-react-best-practices --skill vite-react-best-practices -a claude-code

2Вручную: положить файлы

~/.claude/skills/vite-react-best-practices/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/vite-react-best-practices/

1Через Skills CLI (Vercel)

npx skills add claudiocebpaz/vite-react-best-practices --skill vite-react-best-practices -a codex

2Вручную: положить файлы

.agents/skills/vite-react-best-practices/SKILL.md

Для всех проектов — ~/.agents/skills/

1Через Skills CLI (Vercel)

npx skills add claudiocebpaz/vite-react-best-practices --skill vite-react-best-practices -a cursor

2Вручную: положить файлы

.cursor/skills/vite-react-best-practices/SKILL.md

Cursor читает и .agents/skills/, и .claude/skills/

1GitHub CLI

gh skill install claudiocebpaz/vite-react-best-practices vite-react-best-practices

2Вручную: положить файлы

.github/skills/vite-react-best-practices/SKILL.md

1Через Skills CLI (Vercel)

npx skills add claudiocebpaz/vite-react-best-practices --skill vite-react-best-practices -a gemini-cli

2Командой платформы

gemini skills install https://github.com/claudiocebpaz/vite-react-best-practices

Вручную: положить файлы

.devin/skills/vite-react-best-practices/SKILL.md

Старый путь .windsurf/skills/ тоже читается

Через Skills CLI (Vercel)

npx skills add claudiocebpaz/vite-react-best-practices --skill vite-react-best-practices -a opencode

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о vite-react-best-practices

Как установить vite-react-best-practices в Claude Code?

Выполните команду npx skills add claudiocebpaz/vite-react-best-practices --skill vite-react-best-practices -a claude-code. Она разместит инструкцию по пути ~/.claude/skills/vite-react-best-practices/SKILL.md.

Зачем нужен скилл vite-react-best-practices?

Он даёт ассистенту практические правила для разработки React SPA на Vite: настройку редиректов хостинга, политики кеширования, ленивую загрузку компонентов и предотвращение утечек переменных окружения.

Почему скилл требует настройки статических перенаправлений?

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

Исходный текст

SKILL.md · MIT

---
name: vite-react-best-practices
description: Comprehensive React and Vite SPA performance, architecture, and deployment guidelines. Use this skill when building, reviewing, or refactoring React applications built with Vite (SPA). Covers Vite-specific build configurations, static hosting requirements, and core React performance patterns.
license: MIT
metadata:
  author: ant-gravity
  version: "1.1.0"
---

# Vite React Best Practices

A senior-level guide for building production-ready React Single Page Applications (SPAs) with Vite.

## When to Apply

Reference these guidelines when:
- Setting up a new Vite + React project
- Configuring build pipelines and CI/CD for SPAs
- Troubleshooting production build or caching issues
- Refactoring React components for performance

## Rule Categories

### 1. Vite SPA Deployment (CRITICAL)

- [Static Rewrites](rules/vite-spa-rewrites.md) - **Mandatory** for client-side routing.
- [Caching Strategy](rules/vite-caching-strategy.md) - Immutable assets, no-cache index.html.
- [Build Validation](rules/vite-build-validation.md) - Preview before push.
- [Environment Variables](rules/vite-env-vars.md) - `VITE_` prefix and security.

### 2. React Core Performance

- [Route Splitting](rules/react-route-splitting.md) - Lazy load pages.
- [Server State](rules/react-server-state.md) - Use React Query/SWR.
- [Memoization](rules/react-memoization.md) - When to use useMemo/useCallback.
- [Image Optimization](rules/react-image-optimization.md) - CLS prevention.

### 3. Architecture & Cleanup

- [Colocation](rules/react-colocation.md) - Feature-based structure.
- [Anti-Patterns: Import from Dist](rules/anti-import-dist.md) - Avoid bundling twice.
- [Troubleshooting](rules/vite-troubleshooting.md) - Common Vite fixes.

## Full Compiled Document

For the complete guide with all rules expanded: `AGENTS.md`