AIKraft/AI/Войти
AIKraft/Skills/capacitor react

capacitor react

Guides the agent through Capacitor app development with React — project structure, hooks for native features, state management patterns, using Capacitor plugins in React components, and React-specific best practices. Do not use for Ionic Framework with React (use ionic-react), migrating or upgrading Capacitor apps or plugins, or non-React frameworks.

capawesome-team official Разработка

Что делает навык

Направляет разработчика через создание приложений Capacitor с использованием React, включая настройку структуры проекта, управление состоянием и доступ к нативным функциям устройства. Решает задачу интеграции React-компонентов с платформенными API iOS и Android.

Когда применять

  • Создание новой структуры проекта для приложения Capacitor с React.
  • Реализация хуков и паттернов для доступа к нативным функциям устройства.
  • Использование плагинов Capacitor в компонентах React.
  • Адаптация кода под существующий стиль проекта (TypeScript/JS, функциональные/классовые компоненты).

Как работает

  1. Автоматически обнаруживает зависимости (react, @capacitor/core), платформы (android/, ios/) и инструменты сборки (vite, next, webpack) в package.json.
  2. Определяет используемый стиль кода (TypeScript или JavaScript, функциональные или классовые компоненты, CSS modules или styled-components).
  3. Пошагово проводит пользователя через процесс разработки, не задавая множественные несвязанные вопросы одновременно.
  4. Генерирует код, соответствующий стилю и конфигурации существующего проекта.
  5. Запрашивает у пользователя информацию только в случаях, когда автоматическое обнаружение невозможно.

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

Как настроить структуру проекта Capacitor с React и TypeScript?
Напиши хук для доступа к камере через плагин Capacitor в функциональном компоненте.
Как интегрировать нативный плагин в существующий проект на Next.js и Capacitor?

Что понадобится

  • Capacitor 6, 7 или 8 с React
  • Node.js и npm
  • React 18 или новее

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «capacitor-react» из репозитория: # https://github.com/capawesome-team/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r capacitor-react/ ~/.claude/skills/capacitor-react/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.