Ionic Design

This covers Ionic Framework components for building native-looking mobile apps with Capacitor. It walks through the essential UI components like lists, forms, buttons, and cards, plus setup instructions for React and Vue. The skill includes platform-specific styling patterns (like iOS collapsing headers) and practical code examples for common mobile UI needs. If you're building a hybrid mobile app and want it to feel native rather than just a wrapped website, this gives you the component patterns and theming setup to get there. The focus is squarely on UI implementation rather than navigation or state management.

skills.sh installs: 1.6K
GitHub stars: 77
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add cap-go/capgo-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+