Back to Skills

building-native-ui

Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs.

1,653stars75forksUpdated 4/10/2026

Security Assessment

Medium Risk(50/100)

Detected risks:

Sensitive File Access([SKILL.md] .env)
Command Injection([references/toolbar-and-headers.md] os.system)
Privilege Escalation([references/storage.md] runAs)
Security Score50/100

About building-native-ui

building-native-ui is a reusable AI skill focused on a specific workflow. name: building-native-ui

The skill packages instructions, conventions, and task-specific guidance so an agent can execute the job more consistently. description: Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs. Consult these resources as needed: animations.md Reanimated: entering, exiting, layout, scroll-driven, gestures

In practice, this skill is best suited for users who need repeatable execution with fewer setup steps and less ambiguity. controls.md Native iOS: Switch, Slider, SegmentedControl, DateTimePicker, Picker form-sheet.md Form sheets in expo-router: configuration, footers and background interaction. gradients.md CSS gradients via experimental_backgroundImage (New Arch only) icons.md SF Symbols via expo-image (sf: source), names, animations, weights

FAQ

What does building-native-ui help with?

building-native-ui helps agents follow a focused workflow described in the source documentation, reducing ambiguity and keeping execution aligned with the intended task.

When should this skill be used?

Use it when the task matches the workflow, domain, or operating rules described in the skill documentation, especially when consistent execution matters.

What are the main limitations?

The skill is constrained by the quality and scope of its source instructions. If the underlying documentation is incomplete, the agent may still need extra context or manual validation.

All Files

15 files
references/form-sheet.md6.2 KB
View
SKILL.md10.2 KB
View
references/media.md6.1 KB
View
references/visual-effects.md4.2 KB
View
references/animations.md4.6 KB
View
references/route-structure.md5.0 KB
View
references/webgpu-three.md14.0 KB
View
references/controls.md4.9 KB
View
references/search.md5.1 KB
View
references/zoom-transitions.md4.7 KB
View
references/icons.md4.7 KB
View
references/toolbar-and-headers.md7.9 KB
View
references/gradients.md2.7 KB
View
references/tabs.md13.0 KB
View
references/storage.md2.9 KB
View

Install building-native-ui

Download and extract the skill files to your .claude/skills/ directory.

Quick Setup:

  1. Copy the skill folder to .claude/skills/
  2. Claude will automatically detect and use the skill

Repository

expo/skills