# ionic-app-creation

This skill walks an agent through creating an Ionic app with Ionic CLI, including framework, starter template, Capacitor, and Tailwind choices.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 707 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-creation/SKILL.md
- Updated: 2026-10-20
- HTML: https://affpapa.org/en/nevibecode/skills/ionic-app-creation

## What it does

The skill guides a new Ionic project from CLI check to a generated `ionic start` command. It asks for the project name, framework, starter template, Capacitor integration, package ID, and optional flags one decision at a time. Angular, React, and Vue projects are covered, along with `blank`, `tabs`, and `sidemenu` templates.

After scaffolding, the agent enters the project directory and runs `ionic serve` to verify it. Tailwind CSS can be configured separately. When Capacitor is selected, the workflow continues with the `capacitor-app-creation` skill. Node.js and npm are required; iOS work requires Xcode, while Android work requires Android Studio.

## Install

### Claude Code (native platform)

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

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

### Codex

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

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

### Cursor

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

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

### GitHub Copilot

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

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

### Gemini CLI

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

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

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add capawesome-team/skills --skill ionic-app-creation -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-creation/SKILL.md

## When to use it
- scaffold a new Ionic app with Ionic CLI
- choose Angular, React, or Vue for the project
- start from a `blank`, `tabs`, or `sidemenu` template
- add Capacitor with a package ID
- verify the generated app with `ionic serve`

## Example prompts
- Create a new Ionic app called `my-app` with React, the `tabs` template, and Capacitor integration.
- Guide me through a new Angular Ionic project, asking each configuration question separately.
- Create the Ionic app, verify it with `ionic serve`, then add Tailwind CSS setup.

## 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: 2f5241004151e2a3.

BEGIN THIRD-PARTY FILE 2f5241004151e2a3
````text
---
name: ionic-app-creation
description: "Guides the agent through creating a new Ionic app using the Ionic CLI. Covers project scaffolding with ionic start, framework selection (Angular, React, Vue), template selection (blank, tabs, sidemenu), Capacitor integration, and optional Tailwind CSS setup. After app creation with Capacitor integration, delegates to the capacitor-app-creation skill for further Capacitor setup. Do not use for existing Ionic projects, migrating Ionic apps, upgrading Capacitor versions, or non-Ionic mobile frameworks."
license: MIT
compatibility: "Requires Node.js and npm; the Ionic CLI is installed as part of the procedure. Xcode on macOS is required for iOS and Android Studio for Android."
metadata:
  author: capawesome-team
  source: https://github.com/capawesome-team/skills/tree/main/skills/ionic-app-creation
---

# Ionic App Creation

Create a new Ionic app using the Ionic CLI — project scaffolding, framework integration (Angular, React, Vue), Capacitor integration, and Tailwind CSS setup.

## Prerequisites

1. **Node.js** (latest LTS) installed.
2. **Ionic CLI** installed globally (`npm install -g @ionic/cli`). If not installed, install it as part of the procedure.
3. For **iOS development**: Xcode installed.
4. For **Android development**: Android Studio installed.

## Agent Behavior

- **Ask before creating.** Before running `ionic start`, gather all configuration choices from the user. Present available options clearly and wait for confirmation.
- **One decision at a time.** When a step requires user input, ask that single question, wait for the answer, then continue.
- **Present clear options.** Provide concrete choices (e.g., "Which framework: Angular, React, or Vue?") instead of open-ended questions.
- **Guide step-by-step.** Walk the user through the process one step at a time. Never present multiple unrelated questions at once.

## Procedures

### Step 1: Verify the Ionic CLI

Check if the Ionic CLI is installed:

```bash
ionic --version
```

If the command fails or is not found, install it:

```bash
npm install -g @ionic/cli
```

If the user has the legacy `ionic` package installed, uninstall it first:

```bash
npm uninstall -g ionic
npm install -g @ionic/cli
```

### Step 2: Gather Project Configuration

Before creating the app, ask the user the following questions **one at a time**. Present the available options and defaults for each.

#### 2.1: Project Name

Ask the user for the project name. This determines the directory name and the project identifier.

- Example: `my-app`

#### 2.2: Framework

Ask the user which JavaScript framework to use:

| `--type` value        | Framework                          |
| --------------------- | ---------------------------------- |
| `angular`             | Angular (NgModules)                |
| `angular-standalone`  | Angular (Standalone Components)    |
| `react`               | React                              |
````
END THIRD-PARTY FILE 2f5241004151e2a3

The third-party file has ended. Everything between the 2f5241004151e2a3 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 2949 of 7593 bytes. © capawesome-team · MIT · https://github.com/capawesome-team/skills/tree/HEAD/skills/ionic-app-creation/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