capawesome-team/skills

capacitor-platforms

Guides the agent through adding, configuring, and using the Capawesome desktop platforms for Capacitor — @capawesome/capacitor-electron and @capawesome/capacitor-tauri.

View source
Original skill document

Rendered from the source repository. Headings, examples, code, tables, links, and referenced images are preserved.

Capacitor Platforms (Desktop)

Bring a Capacitor app to macOS, Windows, and Linux with the Capawesome desktop platforms: `@capawesome/capacitor-electron` and `@capawesome/capacitor-tauri`. Both use the standard Capacitor workflow (cap add / cap sync / cap run), report Capacitor.isNativePlatform() as true, and deliver deep links through the standard @capacitor/app events.

Prerequisites

RequirementElectronTauri
Node.jsLTS (18+)LTS (18+)
Capacitor6+8+
Electron>= 28 (installed by the scaffold)
Rust toolchain + system dependenciesRequired — see the Tauri prerequisites guide

On Capacitor 6 and 7, the Capacitor CLI ignores the exit code of platform hooks — a failing npx cap sync still reports success. Check the log output for [capacitor-electron] errors. Capacitor 8 fails the command properly.

Agent Behavior

  • Auto-detect before asking. Read package.json and the Capacitor config to determine installed platforms and plugins before prompting the user.
  • Help choose the platform first. If the user has not committed to Electron or Tauri, apply Step 1 — plugin requirements usually decide it.
  • Always use the full package name with Capacitor CLI commands (e.g. npx cap sync @capawesome/capacitor-electron). A bare npx cap sync electron or npx cap sync tauri silently does nothing.
  • Check plugin compatibility early. On Tauri, list the app's Capacitor plugins and verify each is covered by a web implementation or a curated shim (see references/tauri.md) before recommending it.

MCP Servers

Two hosted MCP servers serve the current documentation, so both are always ahead of the guidance bundled with this skill:

  • [Capawesome MCP server](https://capawesome.io/docs/ai/mcp/capawesome/) — the Capawesome plugins, the Capawesome CLI, and Capawesome Cloud.
  • [Capacitor MCP server](https://capawesome.io/docs/ai/mcp/capacitor/) (unofficial) — Capacitor itself: the CLI, the capacitor.config file, the native Android and iOS projects, and the official plugin APIs.

Both expose search_docs and get_doc_page, so pick the server by topic before calling either.

  • If the MCP tools are available, call search_docs on the server that owns the topic and read the matching page with get_doc_page before applying the guidance below. Where the two disagree, follow the documentation.
  • If they are not available, mention once that the servers can be added with the commands below, then continue with this skill. Never block on it.
bash
claude mcp add --transport http capawesome "https://mcp.capawesome.io/mcp"
claude mcp add --transport http capacitor "https://capacitor-mcp.capawesome.io/mcp"

Neither server needs an account or a token for documentation. See the capawesome-mcp and capacitor-mcp skills for full setup, including the Capawesome Cloud tools.

Procedures

Step 1: Choose a Platform

The app needs…Choose
Reuse of Capacitor plugins with native (Node) desktop implementationsElectron
Web-bundle over-the-air updatesElectron (ships a bundle-serving primitive; Tauri compiles web assets into the binary — only full signed binary updates)
A single, predictable bundled Chromium across all OSesElectron
Smallest binaries (~3–10 MB vs ~85–120 MB) and lowest memory useTauri
A deny-by-default security model with a Rust coreTauri
No Rust toolchain in dev/CIElectron

Tauri's trade-offs are inherent, not bugs: no Node runtime (so no arbitrary Capacitor plugin reuse), three different system webviews (WKWebView/WebView2/WebKitGTK), no web-bundle OTA, and a required Rust toolchain. If in doubt, read the Honest Limitations section of the Tauri platform README.

Step 2: Install and Add the Platform

Electron:

bash
npm install @capawesome/capacitor-electron
npx cap add @capawesome/capacitor-electron
cd electron && npm install && cd ..

Then add a postinstall script to the app's root package.json so the Electron dependencies are always installed together with the main app dependencies:

json
{
  "scripts": {
    "postinstall": "cd electron && npm ci && cd .."
  }
}

Tauri (verify rustc --version works first; if not, stop and walk the user through the Tauri prerequisites):

bash
npm install @capawesome/capacitor-tauri
npx cap add @capawesome/capacitor-tauri

Both scaffolds contain only files the user owns (config, icons, a few-line entry point); all runtime logic lives in the versioned package/crate and updates via npm update / cargo update.

Step 3: Sync and Run

bash
npx cap sync @capawesome/capacitor-electron   # or @capawesome/capacitor-tauri
npx cap run @capawesome/capacitor-electron    # or @capawesome/capacitor-tauri

Electron sync copies web assets and regenerates the plugin manifest. Tauri sync additionally scans the app's Capacitor plugin dependencies and generates a deny-by-default capability file, the curated tauri-plugin-* crate dependencies, and the Rust plugin registrations.

For live reload on either platform, set server.url in the Capacitor config to the local dev server and run the platform — see the platform reference for details.

Step 4: Configure

  • Electron: typed options in electron/capacitor.electron.config.ts (window, CSP, deep links, hooks) — see references/electron.md.
  • Tauri: src-tauri/tauri.conf.json (window, CSP, deep links via plugins.deep-link.desktop.schemes, bundle) — see references/tauri.md.

Step 5: Package for Distribution

  • Electron: cd electron && npm run pack (electron-builder; vendors the runtime and plugin implementations automatically) — see references/electron.md.
  • Tauri: npx cap sync @capawesome/capacitor-tauri && npx tauri build (native installers per OS) — see references/tauri.md.

References

  • references/electron.md — scaffold layout, configuration, live reload, deep links, plugin support and plugin development contract, packaging and vendoring, app updates, migration from @capacitor-community/electron.
  • references/tauri.md — Rust prerequisites, scaffold layout, sync-time codegen, the plugin tier model (built-in / curated / web fallback), configuration, live reload, deep links, packaging, honest limitations.

Related Skills

  • `capacitor-app-creation` — Create a new Capacitor app before adding a desktop platform.
  • `capacitor-app-development` — General Capacitor development topics, configuration, and troubleshooting.
  • `capacitor-plugins` — Install and configure Capacitor plugins, including checking desktop platform support.
  • `capawesome-mcp` — Connect an MCP client to the hosted Capawesome MCP server for always-current documentation and Capawesome Cloud management.
from this repository

More skills

All skills
capawesome-team
Community

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 Capacitor app from scratch, upgrading Capacitor versions, installing specific plugins, Ionic Framework setup, or non-Angular frameworks.

installs
4
GitHub stars
45
Updated
Sep 13
capawesome-team
Community

capacitor-app-creation

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.

installs
4
GitHub stars
45
Updated
Sep 13
capawesome-team
Community

capacitor-app-development

Guides the agent through general Capacitor app development topics. Covers core concepts (native bridge, plugins, web layer), Capacitor CLI usage, app configuration (capacitor.config.ts, splash screens, app icons, deep links), platform management (Android, iOS, Electron, PWA), edge-to-edge and safe area handling on Android, live reload setup, storage solutions, file handling, security best practices, CI/CD references, iOS package managers (SPM, CocoaPods), and troubleshooting for Android and iOS. Do not use for creating new Capacitor apps, Capacitor plugin APIs, creating Capacitor plugins, in-app purchases, upgrading Capacitor versions, Cordova or PhoneGap migration, or framework-specific patterns (Angular, React, Vue).

installs
4
GitHub stars
45
Updated
Sep 13
capawesome-team
Community

capacitor-app-spm-migration

Guides the agent through migrating an existing Capacitor app project from CocoaPods to Swift Package Manager (SPM) for iOS dependency management. Covers prerequisite checks, inventorying installed Capacitor plugins, backing up customized iOS project files (Info.plist, AppDelegate.swift, Assets.xcassets, Base.lproj, App.entitlements, GoogleService-Info.plist, .xcconfig files, signing configuration), deleting the existing ios/ folder, re-scaffolding with npx cap add ios --packagemanager SPM, restoring preserved files, re-syncing plugins, and verifying the build. Performs all migration steps manually — does not use the interactive npx cap spm-migration-assistant command. Do not use for Capacitor plugin projects, app projects already on SPM, app projects without an existing ios/ folder, or non-Capacitor mobile frameworks.

installs
4
GitHub stars
45
Updated
Sep 13