building-ui

Guide developers to build Expo Router-based UIs with styling and navigation conventions.

Updated Jan 14, 2026

Search Tags:#patterns #navigation #animations #react-native #ui-design #responsive-design #expo-router

Ready to run

npx skills add https://github.com/marcoodignoti/couple-diary --skill building-ui-marcoodignoti

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: building-ui
Source: https://github.com/marcoodignoti/couple-diary/tree/main/.cursor/skills/building-ui
Command: npx skills add https://github.com/marcoodignoti/couple-diary --skill building-ui-marcoodignoti

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Reduces design drift and onboarding time by providing a reusable blueprint for building beautiful Expo Router-based UIs.

Core Features & Use Cases

Comprehensive UI guidelines covering fundamentals, styling, components, navigation, animations, patterns, and native tabs that can be applied across screens and tabs.
Use cases include planning scalable route structures, enforcing design systems, and delivering consistent user experiences across multiple features in an Expo Router app.

Quick Start

Scaffold an Expo Router project and follow these guidelines to structure routes, components, and styling consistently.

Frequently Asked Questions about building-ui

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

FAQPage Schema

How do I structure scalable navigation and routes in an Expo Router app?▼

To structure Expo Router navigation, apply reusable guidelines covering route structures, components, and native tabs to ensure consistent user experiences across multiple features. This enforces routing and styling conventions across your codebase.

What is the best way to prevent design drift in React Native UI design?▼

Preventing design drift in React Native UI design involves using a structured blueprint of conventions and references for styling and components. This enforces a consistent design system across all screens and tabs.

How do I implement consistent UI patterns and animations across Expo Router screens?▼

Implement consistent UI patterns and animations across Expo Router screens by following established guidelines for styling, components, and navigation. This provides reusable references and examples to enforce consistent results across projects.

Do I need an existing Expo Router project to apply these responsive design guidelines?▼

Yes, you need an existing Expo Router project. You should scaffold an Expo Router project first, then follow these guidelines to structure routes, components, and styling consistently across the application.

Can I use these UI design guidelines to set up native tabs in a mobile app?▼

Yes, you can apply these UI design guidelines to set up native tabs in a mobile app. They provide specific patterns and examples for building navigation and native tabs that scale across different features.