skills.rest
Selfdb-io
Selfdb-ioCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

building-ui

Guide UI architecture for Expo Router apps with styling and navigation patterns.

Updated Feb 4, 2026
Search Tags:#design#navigation#animations#react-native#ui-design#expo#expo-router
One-click install
npx skills add https://github.com/Selfdb-io/StreamX --skill building-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-ui
Source: https://github.com/Selfdb-io/StreamX/tree/main/.agentone/skills/expo-app-design/skills/building-ui
Command: npx skills add https://github.com/Selfdb-io/StreamX --skill building-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a complete guide for designing and implementing beautiful user interfaces in Expo Router apps, consolidating fundamentals, styling patterns, components, navigation, and native tabs into a practical, reusable blueprint.

Core Features & Use Cases

  • Guided UI design: practical patterns for layout, typography, and accessibility in Expo Router.
  • Reusable components: encourages consistent UI blocks and navigation structures.
  • Use Case: imagine building a new Expo Router app; this guide helps you wire a cohesive UI from splash to tabbed navigation.

Quick Start

Install or review the Expo UI guidelines sections in the skill, then start a sample project following the patterns described.

Frequently Asked Questions about building-ui

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

FAQPage Schema
How do I structure navigation and layouts for an Expo Router app?▼

To build consistent UI in an Expo Router app, use a frontmatter-driven guide covering route structure, styling tokens, and native tabs to consolidate layout systems and navigation schemas without external tooling.

What is the best way to manage styling tokens and typography in Expo Router?▼

The best way to manage styling tokens in Expo Router is by applying practical UI design patterns for typography, layout, and accessibility, creating a reusable blueprint for cohesive component libraries.

Can I implement native tabs and animations in Expo Router without external libraries?▼

Yes, you can implement native tabs and animations in Expo Router without external libraries by referencing the skill's body guide, which details styling patterns and navigation structures directly within the Expo environment.

Does this Expo Router UI guide require any dependencies or external tooling?▼

This Expo Router UI guide requires no dependencies or external tooling, providing a standalone blueprint that covers layout systems, component libraries, and navigation schemas purely through frontmatter and body references.

How do I fix inconsistent UI design when building Expo Router applications?▼

To fix inconsistent UI design in Expo Router applications, apply a reusable blueprint that consolidates fundamentals, styling patterns, and navigation structures from splash screens to tabbed navigation.

Related Skills

Explore More Design & Creative Skills→
paulinghampaulingham
1

react-native-patterns

Standardize React Native project patterns for Expo apps using Expo Router v4, NativeWind, and Maestro E2E testing.

Community
Intermediate
kyamsSRLkyamsSRL

tailwind-design-system

Build Tailwind CSS v4 design systems with @theme tokens and CVA variants.

Community
Advanced
shalevaminshalevamin

react-native-expert

Develop, optimize, and debug React Native and Expo mobile apps.

Community
Advanced
Yukine5377Yukine5377

ba-html-to-react-native-ds-code-gen

Convert HTML prototypes into React Native/Expo components with design tokens.

Community
Advanced