# ionic-app-development

Guides coding agents through Ionic Framework development, covering 80+ UI components, CLI commands, and page lifecycle hooks for existing apps.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1200 installs · ★ 51
- Author: capawesome-team
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/capawesome-team/skills/tree/HEAD/skills/ionic-app-development/SKILL.md
- Updated: 2026-10-20
- HTML: https://affpapa.org/en/nevibecode/skills/ionic-app-development

## What it does

This skill equips coding assistants to handle Ionic Framework tasks across mobile and web targets. It inspects `package.json` to detect whether the project uses `@ionic/angular`, `@ionic/react`, or `@ionic/vue`, adapting generated component snippets accordingly.

The guidance covers component APIs grouped into categories such as forms, overlays, navigation, and layouts, detailing custom CSS variables, slots, and shadow parts. It also instructs the agent on handling Ionic-specific view lifecycle events (`ionViewWillEnter`, `ionViewDidEnter`) necessary when navigation stacks cache views.

A global installation of `@ionic/cli` and Node.js LTS are required beforehand. Note that this skill handles existing codebases; setting up a fresh project or deep framework-specific patterns requires separate specialized skills.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add capawesome-team/skills --skill ionic-app-development -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/ionic-app-development/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/ionic-app-development/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add capawesome-team/skills --skill ionic-app-development -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/ionic-app-development/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add capawesome-team/skills --skill ionic-app-development -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/ionic-app-development/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install capawesome-team/skills ionic-app-development
```

2. **Manually: put the files in place**
- File: `.github/skills/ionic-app-development/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add capawesome-team/skills --skill ionic-app-development -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/capawesome-team/skills --path skills/ionic-app-development
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/ionic-app-development/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add capawesome-team/skills --skill ionic-app-development -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/capawesome-team/skills/tree/HEAD/skills/ionic-app-development/SKILL.md

## When to use it
- configure Ionic UI components with platform-specific styles for iOS and Android
- manage page lifecycle events such as ionViewWillEnter in cached views
- adjust custom CSS properties and slots for inputs, modals, and lists
- run development servers and test across local network interfaces via Ionic CLI

## Example prompts
- Build a form with ion-input and floating labels matching Material Design mode
- Add an ion-refresher component and trigger data reloads on ionViewDidEnter
- Configure ionic serve with an external host to test on a physical device

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 68dbe5761df43335.

BEGIN THIRD-PARTY FILE 68dbe5761df43335
```text
---
name: ionic-app-development
description: "Guides the agent through general Ionic Framework development including core concepts, component reference, CLI usage, layout, theming, animations, gestures, development workflow, and troubleshooting. Covers all Ionic UI components grouped by category with properties, events, methods, slots, and CSS custom properties. Do not use for creating a new Ionic app (use ionic-app-creation), framework-specific patterns (use ionic-angular, ionic-react, ionic-vue), or upgrading Ionic versions (use ionic-app-upgrades)."
license: MIT
compatibility: "Requires Node.js, npm, and the Ionic CLI."
metadata:
  author: capawesome-team
  source: https://github.com/capawesome-team/skills/tree/main/skills/ionic-app-development
---

# Ionic App Development

General Ionic Framework development — core concepts, component reference, CLI usage, layout, theming, utilities, development workflow, and troubleshooting.

## Prerequisites

1. **Node.js** (latest LTS) installed.
2. **Ionic CLI** installed globally (`npm install -g @ionic/cli`).
3. An existing Ionic project. For creating a new Ionic app, use the **`ionic-app-creation`** skill.

## Agent Behavior

- **Auto-detect the framework.** Check `package.json` for `@ionic/angular`, `@ionic/react`, or `@ionic/vue` to determine the framework in use. Adapt code examples accordingly.
- **Route to reference files.** This skill is an overview that routes agents to specific reference files for detailed component APIs and topic-specific guidance.
- **Do not duplicate framework-specific skills.** For Angular, React, or Vue specific patterns, refer to the respective framework skill.

## Core Concepts

### How Ionic Works

Ionic Framework is a UI toolkit for building cross-platform apps using web technologies (HTML, CSS, JavaScript/TypeScript). It provides a library of pre-built UI components that adapt their styling to the platform (`ios` or `md` mode).

- **Components** are custom HTML elements (Web Components) prefixed with `ion-` (e.g., `<ion-button>`, `<ion-content>`).
- **Platform modes**: Ionic renders components differently based on the platform. iOS devices use the `ios` mode; Android and all other platforms use the `md` (Material Design) mode. The `<html>` element receives a class (`ios` or `md`) that enables platform-specific styles.
- **Capacitor integration**: Ionic apps use Capacitor to access native device features. Ionic handles the UI; Capacitor handles native APIs. See the **`capacitor-app-development`** skill for Capacitor-specific guidance.

### Page Lifecycle

Ionic provides lifecycle events on top of the framework's own lifecycle hooks. These fire when a page is navigated to or from:
```
END THIRD-PARTY FILE 68dbe5761df43335

The third-party file has ended. Everything between the 68dbe5761df43335 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2708 of 19506 bytes. © capawesome-team · MIT · https://github.com/capawesome-team/skills/tree/HEAD/skills/ionic-app-development/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md