---
slug: "flutter-mobile-design"
source_type: "readme"
source_url: "https://cdn.jsdelivr.net/gh/saaip7/flutter-mobile-design@main/README.md"
repo: "https://github.com/saaip7/flutter-mobile-design"
source_file: "README.md"
branch: "main"
---
# ipdev-mobileApps-skill - Claude Code Plugin

Crafted mobile development skills for Flutter and React Native by [@saaip7](https://github.com/saaip7).

## Available Skills

### 1. Flutter Mobile Design
Expert Flutter development with Material Design 3 focus.

**Features:**
- UI Creation - Build beautiful Flutter widgets and screens
- Design-to-Code - Convert Figma/mockups to Flutter code
- Material Design 3 - Full M3 support with ColorScheme, Typography
- Architecture - Riverpod (recommended), BLoC, clean architecture

### 2. React Native Mobile Design
Expert React Native development with modern best practices.

**Features:**
- Cross-Platform - iOS and Android from single codebase
- Modern Stack - TypeScript, Zustand, NativeWind, React Navigation
- Performance - Optimization guides, FlashList, Reanimated
- Architecture - Component patterns, state management, testing

## Installation

1. Add the marketplace:
```bash
/plugin marketplace add saaip7/ipdev-mobileApps-skill
```

2. Install the skills:
```bash
# Flutter skill
/plugin install flutter-mobile-design@ipdev-mobileApps-skill

# React Native skill
/plugin install react-native-mobile-design@ipdev-mobileApps-skill
```

## Usage Examples

### Flutter
- "Build a login screen in Flutter"
- "Create a product card widget with Material 3"
- "Convert this Figma design to Flutter"

### React Native
- "Build a dashboard app in React Native"
- "Create a product list with FlashList"
- "Set up navigation with React Navigation"

> [!TIP]
> If the feature is not triggered automatically, explicitly specify that you want to use the `flutter-mobile-design` skill in the prompt.

## What's Included

```
ipdev-mobileApps-skill/
├── .claude-plugin/
│   └── marketplace.json
├── skills/
│   ├── flutter-mobile-design/
│   │   └── SKILL.md
│   └── react-native-mobile-design/
│       ├── SKILL.md
│       └── references/
│           ├── optimization.md
│           └── patterns.md
└── README.md
```

## License

MIT

## Contributing

Contributions welcome! Feel free to open issues or PRs.