# Ionic

> Ionic development guidelines for building cross-platform mobile applications with Angular, Cordova, and Firebase integration.

- Skill: `majiayu000/ionic` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/ionic`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/ionic/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Integrations & APIs
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/ionic

---


# 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
```typescript
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

```scss
: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

```typescript
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 appropriately