skills.rest
addisualemu
addisualemuCOMMUNITY
Explore all skills by this author →
GitHub

expo-ui-agent

Generate and modify Expo screens and UI components with NativeWind styling.

Updated Mar 3, 2026
Search Tags:#development#ui#component#tailwind#expo#screen#nativewind
One-click install
npx skills add https://github.com/addisualemu/basic_expo --skill expo-ui-agent
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-ui-agent
Source: https://github.com/addisualemu/basic_expo/tree/main/generator/.cursor/skills/expo-ui-agent
Command: npx skills add https://github.com/addisualemu/basic_expo --skill expo-ui-agent

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill streamlines the creation and modification of user interfaces within Expo applications, specifically leveraging NativeWind for styling.

Core Features & Use Cases

  • Screen Generation: Create new screens and pages following Expo Router conventions.
  • Component Development: Build reusable UI primitives and feature-specific components.
  • NativeWind Styling: Apply Tailwind CSS classes directly for layout and visual design.
  • Design Token Integration: Utilize and extend project-defined design tokens for consistent theming.
  • Use Case: Add a new user profile screen to your Expo app, including input fields for name and email, styled with a primary color theme and appropriate spacing.

Quick Start

Create a new primitive UI component named 'UserProfileCard' in the components/ui directory.

Frequently Asked Questions about expo-ui-agent

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build Expo UI components using NativeWind?▼

To build Expo UI components using NativeWind, this Skill generates and modifies React Native primitives styled directly with Tailwind CSS classes. It creates reusable UI elements, feature-specific components, and layout shells adhering to Expo Router conventions.

Can I generate Expo Router screens with Tailwind CSS styling?▼

Yes, you can generate Expo Router screens with Tailwind CSS styling. This Skill creates new screens and pages following Expo Router conventions, applying NativeWind classes directly for layout and visual design to ensure consistent navigation and styling.

How do I apply design tokens in a NativeWind project?▼

You apply design tokens in a NativeWind project by utilizing and extending project-defined design tokens for consistent theming. This Skill integrates your existing tokens into generated React Native primitives to maintain a unified visual identity across components.

What is the best way to structure primitive UI elements in an Expo app?▼

The best way to structure primitive UI elements in an Expo app is to place them in a dedicated directory. This Skill generates primitive UI components, such as a 'UserProfileCard', in the components/ui directory to ensure modularity and reusability.

Does this work for creating feature-specific components in Expo?▼

Yes, this works for creating feature-specific components in Expo. The Skill supports building both reusable UI primitives and feature-specific components, such as a user profile screen with input fields, styled with a primary color theme and appropriate spacing.

Related Skills

Explore More Software Engineering Skills→
yurkennyurkenn
1

tailwind-setup

Configure Tailwind CSS v4 in Expo projects with NativeWind and react-native-css.

Community
Intermediate
anyulledanyulled

separation-of-concerns

Refactor monolithic code into separate data fetching, business logic, and presentation layers.

Community
Intermediate
gounthargounthar

expo-router-expert

Configure Expo Router file-based routing with dynamic routes and layouts.

Community
Advanced
yashvinthanyashvinthan

ui-styling

Create user interfaces with shadcn/ui components and Tailwind CSS.

Community
Intermediate