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.