SkillsAdd

erkamyaman/ionic-capacitor-skills

ionic-react

Build a production-ready Ionic Capacitor mobile app with React functional components, hooks for cross-cutting concerns, react-router via @ionic/react-router, and react-i18next for i18n.

First seen Apr 26, 2026

Installation

$ npx skills add erkamyaman/ionic-capacitor-skills --skill ionic-react
View on skills.sh ↗ GitHub repository ↗

Summary

  • Build a production-ready Ionic Capacitor mobile app with React functional components, hooks for cross-cutting concerns, react-router via @ionic/react-router, and react-i18next for i18n.
  • Trigger when the user wants to create an Ionic React app, scaffold pages (onboarding, paywall, tabs, settings), or wire RevenueCat / AdMob / push notifications into a React Ionic project.

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

vercel-react-native-skills Shared topics
vercel-labs/agent-skills 205.5K installs
vercel-react-best-practices Shared topics
vercel-labs/agent-skills 697.8K installs
azure-hosted-copilot-sdk Shared topics
microsoft/azure-skills 440.4K installs
vercel-composition-patterns Shared topics
vercel-labs/agent-skills 326.5K installs
react-native-best-practices Shared topics
callstackincubator/agent-skills

Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory lea…

25K installs
expo-brownfield Shared topics
expo/skills

Framework (OSS). Integrate Expo and React Native into an existing native iOS or Android app. Us…

18.7K installs

Also in this package

Other skills from erkamyaman/ionic-capacitor-skills · top by installs.

npx skills add erkamyaman/ionic-capacitor-skills
ionic-skills 56 ionic-angular 30 ionic-app-icon-splash 29 ionic-native-essentials 29 ionic-shared 28 ionic-local-notifications 26 ionic-deep-links 26 ionic-att 24 ionic-biometric-auth 23 ionic-analytics 22

Browse all from erkamyaman/ionic-capacitor-skills

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Also listed on

Alternate registries and mirrors of this skill.

Repository health

Stars 14
License LICENSE
Default branch main
Open issues 0
Status Active

Skill metadata

Parsed from SKILL.md frontmatter.

Version1.0
LicenseMIT
More metadata
author
erkamyaman
version
1.0

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 3,588 B
  • docs SUMMARY.md 392 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 18 installs

SKILL.md

Ionic + React App Guidelines

This is a SKILL file, NOT a project. Never run npm install here. When creating a new project, ask for the project path or scaffold in a separate directory (e.g. ~/Projects/<app>).

When to consult these references

Project setup:

  • Create a new React Ionic project: [new-app.md](references/new-app.md)
  • Project structure: [project-structure.md](references/project-structure.md)
  • App configuration (main.tsx, App.tsx, i18n/index.ts): [app-config.md](references/app-config.md)
  • Routing (IonReactRouter, tab routes): [routing.md](references/routing.md)

Pages and navigation:

  • Onboarding guard (component wrapper): [onboarding-guard.md](references/onboarding-guard.md)
  • Onboarding page (video background + Swiper): [onboarding-page.md](references/onboarding-page.md)
  • Paywall page (RevenueCat): [paywall-page.md](references/paywall-page.md)
  • Tabs layout (with banner ad lifecycle): [tabs-navigation.md](references/tabs-navigation.md)
  • Settings page: [settings-page.md](references/settings-page.md)

Cross-cutting:

  • Hooks (Theme / Onboarding / Ads / Purchases / Notifications): [hooks.md](references/hooks.md)
  • i18n with react-i18next: [i18n-react-i18next.md](references/i18n-react-i18next.md)
  • Best practices (functional + IonPage): [best-practices.md](references/best-practices.md)
  • Commands (build / sync / open): [commands.md](references/commands.md)

Native plugin topics live in ../ionic-shared/references/:

  • [admob.md](../ionic-shared/references/admob.md)
  • [revenuecat.md](../ionic-shared/references/revenuecat.md)
  • [push-notifications.md](../ionic-shared/references/push-notifications.md)
  • [storage.md](../ionic-shared/references/storage.md)
  • [theming.md](../ionic-shared/references/theming.md)
  • [localization-content.md](../ionic-shared/references/localization-content.md)

Required pages (always create)

  • Onboarding — swipe-based, fullscreen background video + gradient overlay.
  • Paywall — RevenueCat (weekly / yearly), shown immediately after onboarding.
  • Settings — language, theme, notifications, remove ads, reset onboarding.

Required navigation

Use IonTabs + IonTabBar. Never build a custom tab bar or pull in a third-party tab library.

Required libraries

npm install \
  @capacitor/preferences @capacitor/push-notifications \
  @capacitor/splash-screen @capacitor/status-bar \
  @revenuecat/purchases-capacitor @capacitor-community/admob \
  react-i18next i18next i18next-http-backend \
  swiper

Hard rules (React-specific)

  • ❌ Class components — use functional components with hooks.
  • ❌ Direct DOM manipulation — use refs / state.
  • ❌ Importing from @ionic/angular or @ionic/vue — only @ionic/react.
  • ❌ any type.
  • ✅ Wrap every page in <IonPage> so Ionic's transitions and lifecycle work.

Before reporting done

npm install
npm run build
npx cap sync

The build must complete without errors. cap sync is required after every web build before testing on native.