AIKraft/Skills/capacitor angular

capacitor angular

Guides the agent through Angular-specific patterns for Capacitor app development. Covers project structure, adding Capacitor to Angular projects, using Capacitor plugins in Angular services and components, NgZone integration for plugin event listeners, lifecycle hook patterns, dependency injection, routing with deep links, and environment-based platform detection. Do not use for creating a new Cap

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

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

Направляет разработчика через специфичные для Angular паттерны интеграции с Capacitor, включая настройку структуры проекта, использование плагинов и NgZone. Охватывает внедрение зависимостей, маршрутизацию с deep links и определение платформы на основе окружения.

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

  • Добавление Capacitor в существующий проект Angular (версии 16+) и настройка конфигурации.
  • Использование плагинов Capacitor в сервисах и компонентах Angular с учетом архитектуры (standalone или NgModule).
  • Интеграция слушателей событий плагинов через NgZone для корректной работы с Angular Change Detection.
  • Реализация хуков жизненного цикла и маршрутизации с поддержкой deep links.

Как работает

  1. Автоматически обнаруживает структуру проекта, проверяя наличие angular.json, package.json, capacitor.config.ts (или .json) и директорий.
  2. Адаптирует примеры кода под стиль проекта: определяет использование standalone компонентов или NgModule-архитектуры.
  3. Пошагово проводит пользователя через процесс интеграции, запрашивая данные только при невозможности автоопределения.
  4. Объясняет применение паттернов для сервисов, компонентов, NgZone, хуков жизненного цикла и deep links.

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

Как добавить Capacitor в мой Angular проект и настроить структуру?
Используй плагины Capacitor в Angular сервисе с учетом NgZone.
Настрой маршрутизацию с deep links и определение платформы в Angular приложении на Capacitor.

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

  • Capacitor 6, 7 или 8 с Angular 16+
  • Node.js и npm
  • Angular CLI (npm install -g @angular/cli)

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

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

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

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