What are Claude Code Skills?

Claude Code Skills are reusable prompt templates stored as markdown files in your project's .claude/skills/ directory. They let you codify best practices and common workflows into slash commands that Claude follows consistently.

How do I create a Claude Code Skill?

Create a markdown file in .claude/skills/ with instructions for Claude. The filename becomes the command name — for example, .claude/skills/code-review.md can be invoked with /code-review during a Claude Code session.

Can I share skills with my team?

Yes. Skills stored in .claude/skills/ can be committed to version control so every team member has access to the same standardized workflows. You can also organize skills into subdirectories by category.

What is the difference between project and global skills?

Project skills (.claude/skills/) are specific to the current project and are committed to git. Global skills (~/.claude/skills/) are personal skills available across all your projects.

react-native-mobile-design

New

Community RegistryGeneralby Syaifullah H

Expert React Native mobile development skill with modern best practices. Build beautiful, performant cross-platform apps for iOS and Android with Zustand, NativeWind, and React Navigation.

Community PluginView Source

Overview

Crafted mobile development skills for Flutter and React Native by @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

Add the marketplace:

bash

/plugin marketplace add saaip7/ipdev-mobileApps-skill

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

code

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.

Install & Usage

Create the skills directory

mkdir -p .claude/skills

Download the skill file

mkdir -p .claude/skills && curl -o .claude/skills/react-native-mobile-design.md https://raw.githubusercontent.com/saaip7/ip-mobile-craft/main/SKILL.md

Invoke in Claude Code

/react-native-mobile-design

View source on GitHub

designreact-nativetypescriptmobilezustandnativewindexpoandroid

Frequently Asked Questions

What is react-native-mobile-design?

Expert React Native mobile development skill with modern best practices. Build beautiful, performant cross-platform apps for iOS and Android with Zustand, NativeWind, and React Navigation.

How to install react-native-mobile-design?

To install react-native-mobile-design, create the .claude/skills directory in your project, then run the curl command to download the skill file. Once installed, invoke it in Claude Code with /react-native-mobile-design.

What is react-native-mobile-design best for?

react-native-mobile-design is a community categorized under General. It is designed for: design, react-native, typescript, mobile, zustand, nativewind, expo, android. Created by Syaifullah H.