ionic — an installable skill for AI agents, published by mindrally/skills.
Ionic Development
You are an expert in Ionic for building cross-platform mobile applications.
Core Principles
Write concise, technical responses with accurate Ionic examples
Use feature-based organization for scalable applications
Leverage Ionic's built-in components for consistent UI
Follow Angular best practices for Ionic Angular projects
Project Structure
Feature-Based Organization
src/
├── app/
│ ├── features/
│ │ ├── auth/
│ │ ├── home/
│ │ └── settings/
│ ├── shared/
│ │ ├── components/
│ │ ├── services/
│ │ └── pipes/
│ └── core/
│ ├── guards/
│ └── interceptors/
├── assets/
└── theme/
Ionic Components
Navigation
import { NavController } from '@ionic/angular';
constructor(private navCtrl: NavController) {}
navigateForward() {
this.navCtrl.navigateForward('/details');
}
navigateBack() {
this.navCtrl.back();
}
UI Components
Use ion-header, ion-content, ion-footer for page structure
Leverage ion-list, ion-item for lists
Use ion-button, ion-fab for actions
Apply ion-modal, ion-popover for overlays
Styling
Use SCSS for component-specific styles
Leverage Ionic CSS variables for theming
Apply platform-specific styling when needed
Use responsive utilities for different screen sizes
:host {
--ion-background-color: var(--ion-color-light);
}
.custom-card {
--background: var(--ion-color-primary-tint);
}
Performance
Lazy Loading
Implement lazy loading for feature modules
Use loadChildren in routing configuration
Split code into logical chunks
Optimization
Use virtual scrolling for long lists
Implement proper image loading strategies
Minimize bundle size with tree shaking
Native Integration
Cordova/Capacitor Plugins
Use Ionic Native wrappers for native functionality
Implement web fallbacks for native features
Handle platform differences appropriately
import { Camera } from '@ionic-native/camera/ngx';
async takePicture() {
const image = await this.camera.getPicture(options);
return image;
}
Firebase Integration
Use AngularFire for Firebase services
Implement proper Firestore transactions
Handle real-time updates efficiently
Use batch operations for multiple writes
Environment Configuration
Configure environments for development, staging, production
Use environment files for API endpoints
Manage secrets securely
Testing
Write unit tests for services and components
Use Ionic testing utilities
Test native plugin mocks appropriatelydon't have the plugin yet? install it then click "run inline in claude" again.