building-native-ui

Organize native UI guidelines for Expo Router apps with YAML frontmatter.

Updated Jan 19, 2026
One-click install
npx skills add https://github.com/dcoon/kbms --skill building-native-ui-dcoon
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: building-native-ui
Source: https://github.com/dcoon/kbms/tree/main/.gemini/skills/building-native-ui
Command: npx skills add https://github.com/dcoon/kbms --skill building-native-ui-dcoon

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Complete guide for building beautiful apps with Expo Router. It consolidates fundamentals, styling, components, navigation, animations, patterns, and native tabs into a single reference.

Core Features & Use Cases

  • Guidance on architecture and styling for Expo Router-based native UIs.
  • Patterns for navigation, tabs, toolbars, and modal sheets.
  • Reference-driven learning with topics such as animations, controls, form sheets, gradients, icons, media, route structure, search, storage, tabs, toolbar and headers, visual effects, WebGPU integration, and zoom transitions.

Quick Start

Open this skill and follow the guidelines to start implementing native UI patterns in your Expo Router project.

Frequently Asked Questions about building-native-ui

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

FAQPage Schema
How do I build native UI with Expo Router?

Build native UI with Expo Router by following documented guidelines for route structure, styling, components, and navigation patterns. This reference covers fundamentals, tabs, toolbars, headers, and modal sheets to consolidate the architecture process.

What is the best way to structure navigation and tabs in an Expo Router app?

The best way to structure navigation and tabs in an Expo Router app is using native patterns. This reference provides specific guidance on route structure, native tabs, toolbars, and headers for consistent navigation architecture.

Does this Expo Router guide cover animations and visual effects?

Yes, this Expo Router guide covers animations and visual effects. It includes reference topics for zoom transitions, gradients, media handling, icons, and WebGPU integration for building rich app interfaces.

Can I use form sheets and search functionality with Expo Router?

Yes, you can use form sheets and search functionality with Expo Router. The reference documents specific patterns and controls for implementing modal form sheets, search, and storage within your native application.

Do I need a populated references directory to use these Expo Router patterns?

Yes, a populated references directory is required. It serves as the knowledge base for these Expo Router patterns, requiring YAML frontmatter with name and description to organize and communicate the native UI guidelines.