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

ionic-app-development

Guides Ionic Framework development with component references, CLI usage, theming, and troubleshooting.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @ionic/cli, and includes references (resource) components.

What problem does it solve? Building cross-platform apps with Ionic requires knowing 80+ UI components, their properties, events, slots, and CSS custom properties, plus CLI commands, theming rules, and platform-specific behavior. This Skill gives the agent structured, category-organized reference material so it can answer Ionic development questions accurately without guessing component APIs. ## Core Features & Use Cases - Component Reference by Category: Nine reference files covering action, data display, form, layout, media, navigation, overlay, scroll, and progress components with full property, event, method, slot, and CSS custom property tables. - Theming and Layout Guidance: Covers the 12-column grid system, responsive breakpoints, CSS utility classes, color palettes, dark mode strategies, and iOS/MD platform styling. - Workflow and Troubleshooting: Documents Ionic CLI commands, device testing with Capacitor, animations, gestures, hardware back button handling, and fixes for common errors like missing CSS imports or lifecycle events not firing. - Use Case: When asked to build a settings page with toggles, a searchbar, and a sliding item list, the agent reads the relevant reference files and produces correct Ionic markup with proper events and styling hooks. ## Quick Start Ask the agent to help build or fix an Ionic page or component, for example to create a form with an ion-input, ion-toggle, and ion-datetime using the correct properties and events.

Frequently Asked Questions about ionic-app-development

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

FAQPage Schema
How do I use Ionic components like ion-button and ion-modal correctly?▼

Each Ionic component has documented properties, events, methods, slots, and CSS custom properties organized by category in reference files. For example, ion-modal supports sheet breakpoints, a canDismiss guard, and present/dismiss methods, while ion-button supports fill, expand, and routerDirection for navigation.

How do I enable dark mode in an Ionic app?▼

Ionic supports three dark mode approaches: importing dark.system.css to follow the OS setting, dark.always.css to force dark mode, or dark.class.css for manual control via the .ion-palette-dark class on the html element. Add a color-scheme meta tag to adjust system UI elements.

Does Ionic work with React, Angular, and Vue?▼

Yes, Ionic provides framework integrations via @ionic/angular, @ionic/react, and @ionic/vue, and the agent auto-detects the framework from package.json. Framework-specific patterns like routing are handled by dedicated framework skills, while this skill covers shared core concepts.

Why is ionViewWillEnter not firing in my Ionic app?▼

The ionViewWillEnter lifecycle event only fires when using Ionic's routing components such as ion-router-outlet. It does not fire with standard framework routers unless Ionic's routing integration is used, so verify your routing setup first.

Why are my CSS custom properties not applying to Ionic components?▼

Ionic components use Shadow DOM, so you must style them through their documented CSS custom properties like --background and --color rather than targeting internal elements directly. Check the component's reference file for the exact list of supported properties.

When should I not use this Ionic development skill?▼

Do not use it for creating a new Ionic app, which belongs to the ionic-app-creation skill, or for upgrading Ionic versions, which belongs to ionic-app-upgrades. Framework-specific Angular, React, or Vue patterns are covered by their own dedicated skills.

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
crozzbitecrozzbite

mobile-native

Standardizes a Capitor and Ionic stack for mobile app architecture.

Community
Intermediate
JNZader-VaultJNZader-Vault

mobile-ionic

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

Official
Advanced
capawesome-teamcapawesome-team
37

ionic-expert

Guide AI agents through Ionic concepts, CLI usage, and cross-framework patterns.

Official
Advanced