--- name: ionic-framework description: "Comprehensive Ionic Framework expert skill consolidating core concepts, component reference, CLI usage, theming, layout, page lifecycle, framework-specific patterns for Angular/React/Vue, navigation, upgrading, Capacitor integration, and Capawesome Cloud CI/CD. Provides inline guidance for the most common Ionic development tasks and links to detailed skills for deeper coverage. Do not use for Capacitor-only apps without Ionic UI components (use capacitor-app-development), for creating a new Ionic app from scratch (use ionic-app-creation), or for detailed framework-specific patterns beyond what is summarized here (use ionic-angular, ionic-react, or ionic-vue)." metadata: author: capawesome-team source: https://github.com/capawesome-team/skills/tree/main/skills/ionic-framework --- # Ionic Framework Comprehensive reference for Ionic Framework development — core concepts, components, theming, lifecycle, navigation, framework-specific patterns (Angular, React, Vue), upgrading, and Capawesome Cloud integration. ## Core Concepts Ionic Framework is a UI toolkit for building cross-platform apps with web technologies. It provides 80+ pre-built UI components as Web Components prefixed with `ion-` (e.g., ``, ``). - **Platform modes**: Components adapt styling to the platform. iOS devices use `ios` mode; Android and all other platforms use `md` (Material Design). The `` element receives a class (`ios` or `md`). - **Capacitor integration**: Ionic handles the UI; Capacitor handles native device APIs. See the `capacitor-app-development` skill for Capacitor guidance. - **Framework support**: Ionic integrates with Angular (`@ionic/angular`), React (`@ionic/react`), and Vue (`@ionic/vue`). ## Creating a New App ```bash npm install -g @ionic/cli ionic start