ionic-capacitorlisted

MUST USE for any task involving Ionic Framework or Capacitor. REQUIRED whenever the user's code or project involves: ion-* components (ion-button, ion-content, ion-tabs, ion-modal, ion-grid, ion-page), @ionic/react, @ionic/angular, @ionic/vue, @capacitor/core, Capacitor plugins (Camera, Preferences, Geolocation, Push Notifications, Filesystem, Haptics, StatusBar, SplashScreen), capacitor.config.ts, the Ionic CLI, IonPage wrappers, Ionic lifecycle hooks (useIonViewWillEnter, onIonViewWillEnter), Ionic theming (ion-palette-dark, CSS custom properties), IonRouterOutlet, sheet modals with breakpoints, or cross-platform mobile apps deployed to iOS/Android via Capacitor. Trigger even if the user doesn't say "Ionic" but references ion-* components, Capacitor APIs, or hybrid mobile patterns. Contains critical patterns Claude does not know from training: correct dark mode classes, lifecycle hooks vs useEffect/onMounted, IonGrid vs IonList for galleries, standalone Angular imports, and more.
Nyctanassabillingsgate832/ionic-capacitor-skills · ★ 0 · Web & Frontend · score 72

Install: claude install-skill Nyctanassabillingsgate832/ionic-capacitor-skills

# Ionic Capacitor Development Skill Build performant, native-feeling mobile apps using Ionic UI components and Capacitor's native runtime. This skill covers the full stack: project setup, component patterns, state management, native APIs, theming, and deployment across React, Angular, and Vue. ## Quick Decision: Which Framework? | Factor | React | Angular | Vue | |--------|-------|---------|-----| | Learning curve | Moderate | Steeper | Gentle | | Ecosystem | Largest | Enterprise-strong | Growing fast | | State management | Zustand/TanStack Query | Signals + Services | Pinia | | Best for | Startups, flexibility | Enterprise, structure | Simplicity, speed | | Ionic integration | `@ionic/react` | `@ionic/angular` | `@ionic/vue` | All three are first-class citizens in Ionic. Pick based on team familiarity. Read `references/react.md`, `references/angular.md`, or `references/vue.md` for framework-specific deep dives. ## Project Setup ### Create a New Project ```bash # Install Ionic CLI npm install -g @ionic/cli # Create project (pick your framework) ionic start myApp tabs --type=react # React ionic start myApp tabs --type=angular # Angular ionic start myApp tabs --type=vue # Vue # Templates: blank, tabs, sidemenu, list, conference ``` ### Project Structure (Universal) ``` myApp/ ├── src/ │ ├── components/ # Reusable UI components │ ├── pages/ # Route-level page components │ ├── services/ # API calls, business logic │ ├── h