expo-app-design

What it does

This skill allows you to generate the code for mobile applications using the Expo framework. It leverages Expo Router for navigation, NativeWind for styling (a utility-first CSS framework), and React Native as the core technology. The resulting apps are cross-platform, meaning they can be deployed to both iOS and Android from a single codebase.

When to use it

• Rapid Prototyping: Quickly generate initial app layouts and components to test ideas before full development.
• Cross-Platform Development: Create an application that functions on both iOS and Android without separate codebases.
• Native Styling with Ease: Utilize NativeWind's utility classes for efficient and maintainable styling.
• Navigation Setup: Automatically generate navigation structures using Expo Router, simplifying app flow management.

Key capabilities

• Expo Router integration for declarative routing.
• NativeWind styling implementation.
• React Native component generation.
• Cross-platform mobile application development.

Example prompts

• "Create an Expo app with a screen called 'Home' and a button that navigates to a 'Details' screen."
• "Generate the code for a React Native list view using NativeWind styling for each item."
• “Build an Expo Router layout with two tabs: ‘Feed’ and ‘Profile’.”

Tips & gotchas

• Familiarity with React Native concepts will be helpful to understand the generated code.
• NativeWind relies on a design system; ensure you have a clear understanding of its utility classes for consistent styling.