Ionic Design

If you're building mobile apps with Capacitor and want them to feel native without writing platform-specific UI code, this walks you through Ionic's component library. It covers the essentials like page structure, lists, forms, buttons, and cards, plus the CSS imports you need to get the automatic iOS/Android platform styling working. The examples are React-focused but the patterns translate to Vue and Angular since Ionic supports all three. What I appreciate here is the emphasis on details that matter for mobile UX, like the collapsing large title header on iOS and swipeable list items. It's a solid reference when you need to look up component props or remember how to structure a form that doesn't feel like a web form slapped into a mobile wrapper.

skills.sh installs: 623
GitHub stars: 53
last updated: Jul 14, 2026

View on GitHub

Install

$ npx -y skills add cap-go/capacitor-skills --skill ionic-design --agent claude-code

Installs into .claude/skills of the current project.

Files

Ionic Framework Design

When to Use

TRIGGER when:

Writing or reviewing Ion* / ion-* components in a Capacitor app
Theming: --ion-color-*, dark mode, high contrast, per-platform styles
iOS vs Material Design mode looks wrong, or mode overrides misbehave
Upgrading Ionic 7/8 -> 9, or errors after npm i @ionic/*@latest
Choosing Ionic vs another UI kit for a new Capacitor app

Do not use:

Konsta UI components: konsta-ui
Tailwind v4 install / config: tailwind-capacitor
Notch / system bar padding outside Ionic: safe-area-handling
Keyboard covering inputs: capacitor-keyboard (Ionic apps use resize: 'ionic')
Leaving Appflow / Ionic Enterprise plugins: ionic-appflow-migration, ionic-enterprise-sdk-migration

Versions (October 2026)

Package	Current	Notes
`@ionic/core`, `@ionic/react`, `@ionic/vue`, `@ionic/angular`	9.x (`latest`)	8.x on `v8-lts` tag
`ionicons`	8.x
Ionic 9 minimums	Capacitor 7+, iOS 16+, Android Chromium 89+, Angular 18-22, React 18/19 + React Router 6.4+, Vue 3.5 + vue-router 5, TypeScript 5.4+