🎁 Get the FREE AI Skills Starter Guide β€” Subscribe β†’
BytesAgainBytesAgain
BytesAgain β€Ί Skills β€Ί Capacitor Expert
πŸ¦€ ClawHub

Capacitor Expert

by @robingenz

A comprehensive starting point for AI agents to work with Capacitor. Covers core concepts, CLI, app creation, plugins, framework integration, best practices,...

Versionv1.0.0
#clawhub
πŸ’‘ Examples

# 1. Create a web app (React example with Vite)
npm create vite@latest my-app -- --template react-ts
cd my-app && npm install
2. Install Capacitor

npm install @capacitor/core
npm install -D @capacitor/cli
3. Initialize Capacitor

npx cap init "My App" com.example.myapp --web-dir dist
4. Build web assets

npm run build
5. Add platforms

npm install @capacitor/android @capacitor/ios
npx cap add android
npx cap add ios
6. Sync and run

npx cap sync
npx cap run android
npx cap run ios

Web asset directories by framework:

  • Angular: dist//browser (Angular 17+ with application builder)
  • React (Vite): dist
  • Vue (Vite): dist
  • Vanilla: www

    • For the full guided creation flow, see capacitor-app-creation.

    πŸ“‹ Tips & Best Practices

    Android

  • npx cap sync fails: Verify @capacitor/core and @capacitor/cli versions match. Run cd android && ./gradlew clean.
  • Build fails after config changes: Clean with cd android && ./gradlew clean, then rebuild.
  • Plugin not found at runtime: Run npx cap sync after plugin installation. Verify Gradle sync completed.
  • SDK errors: Verify ANDROID_HOME is set. Install missing SDK versions via Android Studio SDK Manager.
  • White square notification icon: Push notification icons must be white pixels on transparent background.

    • iOS

  • Build fails with "no such module": Run npx cap sync ios. For CocoaPods: cd ios/App && pod install --repo-update.
  • Build fails after config changes: Clean build folder (Xcode Product > Clean Build Folder) or delete ios/App/Pods and re-run pod install.
  • Simulator cannot receive push notifications: Use a physical device for push notification testing.
  • Permission denied permanently: Cannot re-request on iOS. Guide user to Settings > App > Permissions.
  • WebView not loading: Verify webDir in capacitor.config.ts matches the actual build output directory.

    • General

  • Live reload not connecting: Ensure device and dev machine are on the same network. Use --external flag.
  • Plugin not found: Run npx cap sync. Verify plugin is in package.json dependencies.
  • Capacitor is not defined: Install @capacitor/core (npm install @capacitor/core).

    • For full troubleshooting, see Android Troubleshooting and iOS Troubleshooting.

    View on ClawHub
    TERMINAL
    clawhub install capacitor-expert

    πŸ§ͺ Use this skill with your agent

    Most visitors already have an agent. Pick your environment, install or copy the workflow, then run the smoke-test prompt above.

    Manus
    Task-oriented agent. Great for testing AI skills end-to-end.
    Try Manus β†’
    OpenClaw
    Local-first agent. Install skills via ClawHub CLI.
    Set up OpenClaw β†’
    Claude Code
    Anthropic's coding agent. Paste the prompt or SKILL.md into your session.
    Claude Code docs β†’
    Cursor
    AI-powered IDE. Use the smoke-test prompt in Cursor Agent.
    Open Cursor β†’
    Continue.dev
    Open-source AI code assistant. Add SKILL.md as a custom tool.
    Continue docs β†’
    Windsurf
    Agentic IDE by Codeium. Paste the prompt into Cascade.
    Try Windsurf β†’
    Cline
    VS Code extension for autonomous coding with MCP tools.
    Cline on GitHub β†’
    Copilot Workspace
    GitHub's AI dev environment. Suitable for code-generation skills.
    Copilot Workspace β†’

    πŸ” Can't find the right skill?

    Search 60,000+ AI agent skills β€” free, no login needed.

    Search Skills β†’