# Mobile Native

> SkullRender Standards for Mobile Native Apps (Capacitor + Ionic).

- Skill: `crozzbite/mobile-native` (Agent Skill)
- Install (CLI): `npx skillmds@latest add crozzbite/mobile-native`
- Raw SKILL.md: https://api.skillmd.com/api/skills/crozzbite/mobile-native/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: crozzbite (https://skillmd.com/u/crozzbite)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/crozzbite/mobile-native

---


# SKILL: Mobile Native Architecture

> [!IMPORTANT]
> **Philosophy**: Web First, Native Enhanced.
> The core application is an Angular SPA. Capacitor provides the native shell. Ionic provides the "feeling".

## 1. Technology Stack
- **Runtime**: Capacitor 7+ (Latest)
- **UI Framework**: Ionic 8+ (Modular components)
- **Build Target**: standard `web` (SPA), no SSR.

## 2. Capacitor Integration
- **Initialization**: `npx cap init [AppName] [AppId]`
- **Web Dir**: `dist/[project-name]/browser`
- **Sync**: Always run `npx cap sync` after build.

## 3. Ionic usage guidelines
- **Scope**: Use Ionic ONLY for mobile-specific interactions or structural containers that handle Safe Areas automatically.
- **Components**:
    - `<ion-header>`: Handles status bar padding.
    - `<ion-content>`: Handles native scrolling and bounce.
    - `<ion-router-outlet>`: Needed for native page transitions.
- **Styling**: Override Ionic CSS variables to match SkullRender (Black/Red).
    - `--ion-background-color: #000000;`
    - `--ion-text-color: #ffffff;`
    - `--ion-color-primary: #ff0000;`

## 4. Native Plugins (Core Set)
- `@capacitor/status-bar`: Control color and overlay.
- `@capacitor/splash-screen`: Manage launch experience.
- `@capacitor/preferences`: Native key-value storage (replaces localStorage).
- `@capacitor/haptics`: Vibration feedback for UI interactions.

## 5. Development Workflow
1. `ng build`
2. `npx cap sync`
3. `npx cap open android` or `npx cap open ios`