capacitor-app-development

Guides Capacitor app development across configuration, platforms, storage, security, and troubleshooting.

Updated Sep 15, 2026
One-click install
npx skills add https://github.com/Nadav011/nadavai-claude --skill capacitor-app-development-nadav011
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: capacitor-app-development
Source: https://github.com/Nadav011/nadavai-claude/tree/main/plugins/nadavai/skills/capacitor-app-development
Command: npx skills add https://github.com/Nadav011/nadavai-claude --skill capacitor-app-development-nadav011

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Developing cross-platform apps with Capacitor involves many moving parts: native bridge concepts, CLI commands, platform-specific configuration for Android and iOS, safe area handling, storage choices, and build failures. This Skill routes each question to the correct reference guide and applies actionable, project-specific instructions instead of generic advice. ## Core Features & Use Cases - Topic-Routed Guidance: Matches the user's request to one of 18 reference files covering CLI usage, app configuration, deep links, splash screens, live reload, storage, file handling, security, CI/CD, and testing. - Project Auto-Detection: Inspects package.json, platform directories, and config files to detect Capacitor version, platforms, framework, and iOS dependency manager before answering. - Platform Troubleshooting: Provides concrete fixes for common Android issues (Gradle sync, blank screen, cleartext errors) and iOS issues (CocoaPods failures, signing errors, ATS blocking). - Use Case: A developer's Android build fails after changing capacitor.config.ts. The Skill detects the Capacitor version, reads the Android troubleshooting reference, and provides the exact Gradle clean and rebuild commands. ## Quick Start Ask the agent to help configure deep links, fix a build error, or set up live reload in your existing Capacitor project.

Frequently Asked Questions about capacitor-app-development

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure a Capacitor app with capacitor.config.ts?▼

Define appId, appName, and webDir in capacitor.config.ts, then add server, plugin, android, and ios sections as needed. TypeScript format is recommended because it enables autocompletion and environment-specific conditional configuration.

How do I set up live reload in a Capacitor app?▼

Run npx cap run android or ios with the --live-reload flag, which starts the dev server and points the WebView at it automatically. The device and development machine must be on the same Wi-Fi network, and the dev server must bind to 0.0.0.0.

Should I use SPM or CocoaPods for Capacitor iOS dependencies?▼

SPM is the default for new Capacitor 8 projects and requires no extra tooling, while CocoaPods is the legacy default for Capacitor 7 and earlier. Use CocoaPods only if a required plugin or native SDK lacks SPM support.

Why does my Capacitor app show a blank screen on Android?▼

Blank screens usually come from missing web assets, a wrong webDir value, or an outdated Android System WebView. Run npx cap sync android, verify webDir matches your build output, and inspect the WebView console via chrome://inspect.

What storage should I use instead of localStorage in Capacitor?▼

Use @capacitor/preferences for key-value data, since localStorage can be evicted by the OS, especially on iOS. For sensitive data use encrypted secure storage plugins, and for relational data use a SQLite plugin.

When should I not use this Capacitor development guidance?▼

This guidance does not cover creating new Capacitor apps, building custom plugins, in-app purchases, version upgrades, Cordova migration, or framework-specific patterns for Angular, React, or Vue. Those topics belong to separate dedicated skills.