Ionic + Capacitor Mobile

Build cross-platform mobile apps with Ionic Framework and Capacitor. Covers ion-* components, @ionic/react, angular, and vue, Capacitor plugins (Camera, Geolocation, Push, Filesystem), dark mode, lifecycle hooks, and iOS/Android deployment patterns Claude doesn't know from training.

This skill encodes correct, current Ionic and Capacitor patterns that are easy to get wrong: the right dark mode classes (ion-palette-dark), Ionic lifecycle hooks vs useEffect/onMounted, IonGrid vs IonList for galleries, standalone Angular imports, sheet modals with breakpoints, and IonRouterOutlet routing. It triggers on ion-* components and Capacitor APIs even when the user doesn't name the framework.

When to use

Use when building or debugging Ionic Framework or Capacitor apps — ion-* components, Capacitor plugins, capacitor.config.ts, Ionic theming and lifecycle, or deploying hybrid apps to iOS and Android.

Examples

Dark mode setup

Apply the correct Ionic dark palette

Set up dark mode correctly in my @ionic/react app using ion-palette-dark

Capacitor camera

Wire a native plugin

Add the Capacitor Camera plugin to capture and save a photo, with iOS and Android permissions configured