skills.rest
involvex
involvexCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ionic-expert

Provides reference guidance for building Ionic Framework apps with Angular, React, and Vue.

1|Updated Aug 25, 2026
Search Tags:#react#angular#vue#cross-platform#mobile development#ionic#capacitor
One-click install
npx skills add https://github.com/involvex/ionic-everywhere --skill ionic-expert-involvex
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ionic-expert
Source: https://github.com/involvex/ionic-everywhere/tree/main/.agents/skills/ionic-expert
Command: npx skills add https://github.com/involvex/ionic-everywhere --skill ionic-expert-involvex

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Developers working with the Ionic Framework often struggle with framework-specific setup differences, page lifecycle quirks caused by DOM caching, and the breadth of 80+ UI components. This Skill gives an AI agent a comprehensive reference so it can produce correct Ionic code for Angular, React, or Vue without common pitfalls like missing IonPage wrappers or wrong event handlers. ## Core Features & Use Cases - Component and CLI Reference: Covers layout, navigation, form, overlay, data display, and scroll components plus the Ionic CLI commands for scaffolding, serving, and building apps. - Framework-Specific Patterns: Details setup, routing, lifecycle hooks, and navigation for Angular (standalone vs NgModule), React (IonReactRouter, hooks), and Vue (composables, IonPage requirement). - Theming and Troubleshooting: Explains color customization, dark mode palettes, platform-specific styling, and fixes for frequent issues like lifecycle hooks not firing or icons not rendering. - Use Case: Ask the agent to build a tab-based Ionic React page with pull-to-refresh and a sheet modal, and it will apply the correct IonPage wrapper, useIonViewWillEnter hook, and onIonInput event bindings automatically. ## Quick Start Ask the agent to create an Ionic React page with a form and navigation using the ionic-expert guidance.

Frequently Asked Questions about ionic-expert

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a new Ionic app with the Ionic CLI?▼

Run ionic start with a project name, template (blank, tabs, or sidemenu), and a --type flag for the framework: angular, angular-standalone, react, or vue. Add --capacitor and --package-id to include native platform support from the start.

How do I handle page lifecycle events in Ionic React?▼

Use hooks from @ionic/react such as useIonViewWillEnter and useIonViewDidEnter instead of useEffect. Ionic caches pages in the DOM, so framework-native hooks only fire once; Ionic lifecycle hooks fire on every page visit.

Why is ionViewWillEnter not firing on my Ionic page?▼

The hook only fires on components directly routed through ion-router-outlet, not child components. In React and Vue, the page must also use IonPage as its root element, otherwise transitions and lifecycle events silently fail.

Does Ionic support dark mode theming?▼

Yes, Ionic offers three dark mode approaches via CSS palette imports: system preference (dark.system.css), always dark (dark.always.css), or a CSS class toggle (dark.class.css) using the .ion-palette-dark class on the html element.

What is the difference between onIonInput and onIonChange in Ionic React?▼

onIonInput fires on every keystroke and should be used for IonInput and IonTextarea. onIonChange fires when a value is committed and suits IonSelect, IonToggle, IonCheckbox, and IonRange. Access values via e.detail.value.

Can Ionic apps access native device features?▼

Yes, Ionic pairs with Capacitor for native APIs like camera, filesystem, and push notifications. Build the web app, run npx cap sync, then deploy with npx cap run android or ios, with optional live reload flags.

Related Skills

Explore More Software Engineering Skills→
capawesome-teamcapawesome-team
37

ionic-app-creation

Creates a new Ionic app project with selected framework, starter template, and optional Capacitor integration via Ionic CLI.

Official
Intermediate
capawesome-teamcapawesome-team
37

capawesome-cloud

Configure Capawesome Cloud workflows for Capacitor apps with CI/CD integration.

Official
Advanced
JNZader-VaultJNZader-Vault

mobile-ionic

Develop cross-platform mobile apps with Ionic 8, Capacitor 6, and SQLite.

Official
Advanced
gluestackgluestack
1

gluestack-ui-v4:performance

Optimize Gluestack UI v4 component rendering across native and web platforms.

Official
Intermediate