A collection of agent skills for building production-ready Ionic Capacitor mobile applications with Angular, React, or Vue.
npx skills add erkamyaman/ionic-skills| Skill | Description |
|---|---|
| ionic-angular | Ionic + Angular standalone components, lazy routes, Signals, services, @ngx-translate/core |
| ionic-react | Ionic + React functional components, hooks, @ionic/react-router, react-i18next |
| ionic-vue | Ionic + Vue 3 Composition API, composables, @ionic/vue-router, vue-i18n |
| ionic-shared | Framework-agnostic Capacitor concerns — AdMob, RevenueCat, push, storage, theme, localization, env vars, store-submission notes. Referenced by all three framework skills |
| Skill | Description |
|---|---|
| ionic-cmp-consent | Google UMP consent dialog — required in EU/UK before AdMob serves personalized ads |
| ionic-att | iOS App Tracking Transparency — required for personalized ads on iOS 14+; App Review rejects without it |
| Skill | Description |
|---|---|
| ionic-app-icon-splash | @capacitor/assets — generate every iOS/Android icon + splash size from one source PNG |
| ionic-deep-links | Custom URL schemes + iOS Universal Links + Android App Links |
| ionic-apple-sign-in | Sign in with Apple — required by Apple if you offer any other social login on iOS |
| Skill | Description |
|---|---|
| ionic-native-essentials | Camera, Filesystem, Share, Haptics, Network, Keyboard — six small Capacitor plugins bundled |
| ionic-biometric-auth | Face ID / Touch ID / fingerprint via @aparajita/capacitor-biometric-auth |
| ionic-local-notifications | Device-scheduled reminders via @capacitor/local-notifications (distinct from push) |
| Skill | Description |
|---|---|
| ionic-firebase | Firebase Auth + Firestore + native social sign-in |
| ionic-supabase | Supabase Auth + Postgres + RLS + realtime |
| Skill | Description |
|---|---|
| ionic-sentry | Crash + error reporting via @sentry/capacitor + framework SDK |
| ionic-analytics | Product analytics — Firebase Analytics or PostHog, with event taxonomy |
| ionic-in-app-review | Native App Store / Play Store rating prompt |
skills/<skill-name>/
├── SKILL.md ← short orientation + links to references/
└── references/
├── <topic>.md ← one focused topic per file
└── ...
SKILL.md is a short router with frontmatter. The agent loads only the references/ files it needs for the task at hand.
| Feature | Implementation |
|---|---|
| Framework | Ionic Framework + Angular / React / Vue (latest stable) |
| Native Runtime | Capacitor (latest stable) |
| Onboarding | Swiper slides over a fullscreen HTML5 video + gradient overlay |
| Paywall | RevenueCat (weekly / yearly with 50% OFF badge) + Restore Purchases |
| Ads | AdMob banner via @capacitor-community/admob, hidden for premium users |
| i18n | Turkish / English — @ngx-translate/core (Angular), react-i18next (React), vue-i18n (Vue) |
| Theming | Light / Dark / System via the ion-palette-dark class |
| Navigation | ion-tabs + framework-specific router |
| Storage | @capacitor/preferences |
| Notifications | @capacitor/push-notifications |
| Onboarding guard | CanMatchFn (Angular), wrapper component (React), beforeEach (Vue) |
| State | Angular services exposing readonly Signals (OnPush-friendly) / React hooks / Vue composables |
Onboarding (video bg) → Paywall (subscriptions) → Main App (tabs)
- Onboarding — fullscreen video background, swipe-based slides
- Paywall — weekly/yearly subscription options, restore purchases
- Settings — language, theme, notifications, remove ads, reset onboarding
- Home / Explore / Settings — three-tab default layout
A shared utilities + framework wrappers pattern keeps Capacitor logic in one place:
utils/— framework-agnostic TypeScript functions calling Capacitor plugins (AdMob, RevenueCat, Preferences, etc.). Defined once inionic-shared, copied identically into each framework's project.- Angular —
services/wrap the utilities with@Injectable({ providedIn: 'root' })and expose state as readonly Signals (signal-store pattern). Pages useChangeDetectionStrategy.OnPush, modern built-in control flow (@if/@for), andinject()for DI. Skill avoids any APIs marked "developer preview" / "experimental" (nolinkedSignal,resource, or Signal Forms until they graduate). - React —
hooks/wrap the utilities withuseCallback. - Vue —
composables/wrap the utilities as functions returning state + actions.
Add a new skill by creating a folder in skills/<skill-name>/ containing:
SKILL.md— short orientation with frontmatter and a list of references.references/*.md— focused topic files referenced fromSKILL.md.
Then add the skill name to the skills array in package.json and a row in this README's table.
See AGENTS.md for the full contributor guide.
MIT