zafer-skills

This skill provides guidelines for developing Expo mobile applications, ensuring essential screens are created and requirements are met. It is designed for developers using Claude Code to build robust Expo projects.

11300Updated 2mo ago

Development

Quick InstallView Source

$ npx skills add https://github.com/zaferayan/skills --skill zafer-skills

Overview

About This Skill

This skill streamlines Expo mobile app development by automatically generating production-ready project structures with essential screens and integrations. It enforces best practices including onboarding flows, paywall implementation with RevenueCat subscriptions, AdMob ad integration, and multi-language support for Turkish and English. Developers using Claude Code receive properly configured apps with native tab navigation, light/dark theme support, and monetization systems pre-integrated, eliminating repetitive setup work and ensuring consistent architecture across projects.

How to Use

Install the skill using the provided npx command.

Use Cases

Develop onboarding screens for mobile apps

Implement paywall functionality in Expo

Create settings interfaces for user customization

Setup & Installation

Quick Install

Terminal

$ npx skills add https://github.com/zaferayan/skills --skill zafer-skills

Alternative Install (Git Clone)

git clone https://github.com/zaferayan/skills

Requirements

Claude Code or compatible AI agent

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Generate a complete Expo mobile app development plan for [COMPANY_NAME] in the [INDUSTRY] industry. Include all essential screens, navigation structure, and technical requirements. Assume we're using React Native with Expo SDK 50, TypeScript, and a monorepo setup with Turborepo. Focus on scalability and maintainability. Here's the initial data: [APP_SPECIFICS].

Example Output

# Expo App Development Plan for BrightFutures EdTech

## Project Overview
Developing a cross-platform mobile app for an educational technology company specializing in personalized learning paths. The app will serve 10,000+ students and 500+ educators across K-12 institutions.

## Essential Screens Structure

### Authentication Flow
- **Login Screen**: Email/password + Google Sign-In integration
- **Registration Screen**: Multi-step form with student/teacher role selection
- **Password Reset**: Email verification flow
- **Onboarding Screens**: 3 tutorial slides explaining core features

### Core App Screens
- **Dashboard**: Personalized learning path progress with quick actions
- **Course Catalog**: Filterable list of all available subjects with search
- **Course Detail**: In-depth view with enrollment button and prerequisites
- **Learning Module**: Interactive content with progress tracking
- **Assessment**: Quiz interface with timer and scoring
- **Profile**: User information and settings with avatar customization

### Educator-Specific Screens
- **Class Management**: Create/edit classes with student roster
- **Assignment Creator**: Form builder for homework and projects
- **Progress Dashboard**: Analytics for student performance metrics
- **Communication Hub**: Announcements and messaging center

## Technical Requirements

### Core Dependencies
```json
{
  "expo": "~50.0.0",
  "react-native": "0.73.0",
  "react-navigation": "^7.0.0",
  "react-native-reanimated": "^3.6.0",
  "expo-secure-store": "^12.0.0"
}
```

### Monorepo Structure
```
/packages/
  /app          # Main Expo app
  /ui           # Shared component library
  /api          # API service layer
  /types        # TypeScript definitions
```

### API Integration
- GraphQL backend with Apollo Client
- WebSocket support for real-time features
- Offline-first design with local caching

## Development Guidelines

1. **Component Architecture**: All UI components must be in the `/ui` package with Storybook integration
2. **State Management**: Zustand for local state, React Query for server state
3. **Testing**: Jest + React Testing Library, Detox for E2E testing
4. **Performance**: React Native Reanimated for animations, Hermes engine enabled
5. **Accessibility**: WCAG 2.1 AA compliance with react-native-accessibility

## Next Steps
1. Set up the monorepo structure using Turborepo
2. Configure TypeScript strict mode and ESLint rules
3. Implement authentication flow with Expo AuthSession
4. Create shared UI components library
5. Set up CI/CD pipeline with GitHub Actions

Would you like me to elaborate on any specific aspect of this development plan?

Find the right skills for your stack

Take a free 3-minute scan and get personalized AI skill recommendations.

Take free scan

Overview

About This Skill

How to Use

Install the skill using the provided npx command.

Use Cases

Develop onboarding screens for mobile apps

Implement paywall functionality in Expo

Create settings interfaces for user customization

Quick Install

Terminal

$ npx skills add https://github.com/zaferayan/skills --skill zafer-skills

Alternative Install (Git Clone)

git clone https://github.com/zaferayan/skills

Requirements

Claude Code or compatible AI agent

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Generate a complete Expo mobile app development plan for [COMPANY_NAME] in the [INDUSTRY] industry. Include all essential screens, navigation structure, and technical requirements. Assume we're using React Native with Expo SDK 50, TypeScript, and a monorepo setup with Turborepo. Focus on scalability and maintainability. Here's the initial data: [APP_SPECIFICS].

Example Output

# Expo App Development Plan for BrightFutures EdTech

## Project Overview
Developing a cross-platform mobile app for an educational technology company specializing in personalized learning paths. The app will serve 10,000+ students and 500+ educators across K-12 institutions.

## Essential Screens Structure

### Authentication Flow
- **Login Screen**: Email/password + Google Sign-In integration
- **Registration Screen**: Multi-step form with student/teacher role selection
- **Password Reset**: Email verification flow
- **Onboarding Screens**: 3 tutorial slides explaining core features

### Core App Screens
- **Dashboard**: Personalized learning path progress with quick actions
- **Course Catalog**: Filterable list of all available subjects with search
- **Course Detail**: In-depth view with enrollment button and prerequisites
- **Learning Module**: Interactive content with progress tracking
- **Assessment**: Quiz interface with timer and scoring
- **Profile**: User information and settings with avatar customization

### Educator-Specific Screens
- **Class Management**: Create/edit classes with student roster
- **Assignment Creator**: Form builder for homework and projects
- **Progress Dashboard**: Analytics for student performance metrics
- **Communication Hub**: Announcements and messaging center

## Technical Requirements

### Core Dependencies
```json
{
  "expo": "~50.0.0",
  "react-native": "0.73.0",
  "react-navigation": "^7.0.0",
  "react-native-reanimated": "^3.6.0",
  "expo-secure-store": "^12.0.0"
}
```

### Monorepo Structure
```
/packages/
  /app          # Main Expo app
  /ui           # Shared component library
  /api          # API service layer
  /types        # TypeScript definitions
```

### API Integration
- GraphQL backend with Apollo Client
- WebSocket support for real-time features
- Offline-first design with local caching

## Development Guidelines

1. **Component Architecture**: All UI components must be in the `/ui` package with Storybook integration
2. **State Management**: Zustand for local state, React Query for server state
3. **Testing**: Jest + React Testing Library, Detox for E2E testing
4. **Performance**: React Native Reanimated for animations, Hermes engine enabled
5. **Accessibility**: WCAG 2.1 AA compliance with react-native-accessibility

## Next Steps
1. Set up the monorepo structure using Turborepo
2. Configure TypeScript strict mode and ESLint rules
3. Implement authentication flow with Expo AuthSession
4. Create shared UI components library
5. Set up CI/CD pipeline with GitHub Actions

Would you like me to elaborate on any specific aspect of this development plan?

zafer-skills

Overview

About This Skill

How to Use

Use Cases

Tags

Setup & Installation

Quick Install

Alternative Install (Git Clone)

Requirements

Quick Start Guide

Install the Skill

Open Your AI Agent

Try It Out

Customize

Usage Examples

Prompt Template

Example Output

Find the right skills for your stack

zafer-skills

Overview

About This Skill

How to Use

Use Cases

Tags

Setup & Installation

Quick Install

Alternative Install (Git Clone)

Requirements

Quick Start Guide

Install the Skill

Open Your AI Agent

Try It Out

Customize

Usage Examples

Prompt Template

Example Output

Find the right skills for your stack