capawesome-team/capacitor-app-creation
skills/capacitor-app-creation/SKILL.md
Guides the agent through creating a new Capacitor app from scratch. Covers project scaffolding with the Capacitor CLI, configuring the app (appId, appName, webDir), adding native platforms (iOS, Android), and syncing. Includes decision points for Ionic Framework integration, live updates, and CI/CD setup. Do not use for upgrading existing Capacitor apps, migrating from other frameworks, or plugin installation.
$ install --global
skillsauthnpx skillsauth add capawesome-team/skills capacitor-app-creationInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 1, 2026, 4:17 AM51.5s1 file scanned
SKILL.md
- name:
- capacitor-app-creation
- description:
- Guides the agent through creating a new Capacitor app from scratch. Covers project scaffolding with the Capacitor CLI, configuring the app (appId, appName, webDir), adding native platforms (iOS, Android), and syncing. Includes decision points for Ionic Framework integration, live updates, and CI/CD setup. Do not use for upgrading existing Capacitor apps, migrating from other frameworks, or plugin installation.
- author:
- capawesome-team
- source:
- https://github.com/capawesome-team/skills/tree/main/skills/capacitor-app-creation
Capacitor App Creation
Create a new Capacitor app from scratch, including project scaffolding, platform setup, and optional integrations.
Prerequisites
- Node.js 22+ installed. Verify with
node --version. - For iOS: macOS with Xcode 26.0+ installed. Install Xcode Command Line Tools:
xcode-select --install. - For Android: Android Studio 2025.2.1+ installed with Android SDK (API 24+).
Agent Behavior
- Guide step-by-step. Walk the user through the process one step at a time. Never present multiple unrelated questions at once.
- One decision at a time. When a step requires user input, ask that single question, wait for the answer, then continue.
- Present clear options. Provide concrete choices (e.g., "Do you want to add the iOS platform? (yes/no)") instead of open-ended questions.
Procedures
Step 1: Check for Ionic Framework
Before creating the app, ask the user:
Do you want to use the Ionic Framework for UI components and theming? (yes/no)
If the user answers yes, stop this skill and switch to the ionic-app-creation skill instead. If no, continue with Step 2.
Step 2: Create the Web App
Ask the user which web framework they want to use. Present these options:
- Angular
- React
- Vue
- None (vanilla JS/TS or existing web app)
Based on the selection, scaffold the web project:
Angular
npm install -g @angular/cli
ng new my-app
cd my-app
The default web asset directory for Angular is dist/my-app/browser. Adjust the directory name based on the actual project name.
React
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install
The default web asset directory for React (Vite) is dist.
Vue
npm create vite@latest my-app -- --template vue-ts
cd my-app
npm install
The default web asset directory for Vue (Vite) is dist.
None (vanilla or existing web app)
If the user has an existing web app, confirm it meets these requirements:
- A
package.jsonfile exists at the project root. - A build output directory exists (e.g.,
dist,www,build). - An
index.htmlfile exists at the root of the build output directory. - The
index.htmlfile contains a<head>tag (required for Capacitor plugins to work).
If the user wants a vanilla project:
mkdir my-app && cd my-app
npm init -y
mkdir www
Then create www/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My App</title>
</head>
<body>
<h1>My App</h1>
</body>
</html>
The web asset directory is www.
Step 3: Install Capacitor
Navigate to the project root directory and install the Capacitor core packages:
npm install @capacitor/core
npm install -D @capacitor/cli
Step 4: Initialize Capacitor
Run the Capacitor init command with the app name, app ID, and web asset directory:
npx cap init <appName> <appID> --web-dir <webDir>
<appName>: Ask the user for the display name of the app (e.g.,"My App").<appID>: Ask the user for the app ID in reverse-domain format (e.g.,com.example.myapp).<webDir>: Use the web asset directory determined in Step 2 (e.g.,dist,www,dist/my-app/browser).
This creates a capacitor.config.ts file in the project root.
Step 5: Build the Web App
Before adding native platforms, build the web app so the output directory exists:
Angular
ng build
React / Vue (Vite)
npm run build
Vanilla
No build step needed if using a static www/ directory.
Step 6: Add Native Platforms
Ask the user which platforms to add:
Which platforms do you want to add? (android/ios/both)
Add Android
npm install @capacitor/android
npx cap add android
This creates the android/ directory with a native Android project.
Add iOS
npm install @capacitor/ios
npx cap add ios
This creates the ios/ directory with a native iOS project. By default, Capacitor 8 uses Swift Package Manager (SPM) for iOS dependency management.
Step 7: Sync the Project
Sync the web assets and native dependencies:
npx cap sync
This copies the built web assets into each native platform project and installs native dependencies (Gradle for Android, SPM for iOS).
Step 8: Run the App
Run the app on a connected device or emulator/simulator:
Android
npx cap run android
This prompts for a target device (emulator or physical device).
iOS
npx cap run ios
This prompts for a target simulator or physical device.
Step 9: Post-Creation Options
After the app is running, ask the user:
Do you want to set up Live Updates for over-the-air updates? (yes/no)
If yes, refer the user to the capawesome-cloud skill for live update setup.
Then ask:
Do you want to set up CI/CD for native builds and app store publishing? (yes/no)
If yes, refer the user to the capawesome-cloud skill for CI/CD setup.
Error Handling
npx cap initfails with "already initialized": Acapacitor.config.tsorcapacitor.config.jsonfile already exists. The project is already a Capacitor project. Delete the existing config file if re-initialization is intended.npx cap addfails with "platform already exists": Theandroid/orios/directory already exists. Remove the directory first:rm -rf androidorrm -rf ios, then re-runnpx cap add.npx cap syncfails with "could not find the web assets directory": The web app has not been built yet, or thewebDirincapacitor.config.tspoints to a non-existent directory. Run the web app build command first (e.g.,npm run build,ng build).- iOS build fails with "no such module": Run
npx cap sync iosto ensure SPM dependencies are resolved. - Android build fails with SDK errors: Verify that Android SDK is installed and
ANDROID_HOMEorANDROID_SDK_ROOTenvironment variable is set. Open Android Studio SDK Manager to install missing SDK versions. index.htmlmissing<head>tag: Capacitor plugins inject scripts into the<head>tag. Ensure theindex.htmlin the web asset directory contains a<head>element.
Related Skills
ionic-app-creation— Create a new Ionic app with UI components and theming instead of a plain Capacitor app.capacitor-app-development— General Capacitor app development guidance after app creation.capacitor-angular— Angular-specific patterns and best practices for Capacitor apps.capacitor-react— React-specific patterns and best practices for Capacitor apps.capacitor-vue— Vue-specific patterns and best practices for Capacitor apps.capacitor-plugins— Install and configure Capacitor plugins after app creation.capawesome-cloud— Set up live updates, native builds, and CI/CD for the app.
Related Skills
capawesome-team/ionic-expert
tools
VerifiedTrustedCommunity
A comprehensive starting point for AI agents to work with the Ionic Framework. Covers core concepts, components, CLI, theming, layout, lifecycle, navigation, and framework-specific patterns for Angular, React, and Vue. Pair with the other Ionic skills in this collection for deeper topic-specific guidance like app creation, framework integration, and upgrades.
27SKILL.mdUpdated May 2, 2026
capawesome-team/capawesome-cloud
tools
VerifiedTrustedCommunity
Guides the agent through setting up and using Capawesome Cloud for Capacitor and Cordova apps. Covers three core workflows: (1) Native Builds — cloud builds for iOS and Android (Capacitor, Cordova, or native projects), signing certificates, environments, Trapeze configuration, and build artifacts; (2) Live Updates — OTA updates via the @capawesome/capacitor-live-update or @capawesome/cordova-live-update plugin, channels, versioning, rollbacks, and code signing; (3) App Store Publishing — automated submissions to Apple App Store (TestFlight) and Google Play Store. Includes CI/CD integration for all workflows. Do not use for non-Capacitor, non-Cordova mobile frameworks such as React Native or Flutter.
27SKILL.mdUpdated May 2, 2026
capawesome-team/capawesome-cli
tools
VerifiedTrustedCommunity
Guides the agent through installing, authenticating, configuring, and using the Capawesome CLI (@capawesome/cli). Covers installation, interactive and token-based authentication, project linking via capawesome.config.json, the full command reference (app management, native builds, live updates, certificates, environments, channels, deployments, destinations, devices), CI/CD integration with token auth and JSON output, and diagnostics via the doctor command. Do not use for Capawesome Cloud feature setup (native builds workflow, live updates workflow, app store publishing) — use the capawesome-cloud skill instead.
27SKILL.mdUpdated May 2, 2026
capawesome-team/capacitor-expert
tools
VerifiedTrustedCommunity
A comprehensive starting point for AI agents to work with Capacitor. Covers core concepts, CLI, app creation, plugins, framework integration, best practices, storage, security, testing, troubleshooting, upgrading, and Capawesome Cloud (live updates, native builds, app store publishing). Pair with the other Capacitor skills in this collection for deeper topic-specific guidance.
27SKILL.mdUpdated May 1, 2026