skills.rest
Vinicius-B-Leite
Vinicius-B-LeiteCOMMUNITY
Explore all skills by this author →
GitHub

create-screens-and-routing

Scaffold screens and routing configurations for Expo Router React Native projects.

Updated Jun 12, 2025
Search Tags:#typescript#architecture#routing#scaffold#navigation#react-native#expo-router
One-click install
npx skills add https://github.com/Vinicius-B-Leite/blcalisteniaV2 --skill create-screens-and-routing
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-screens-and-routing
Source: https://github.com/Vinicius-B-Leite/blcalisteniaV2/tree/main/.cursor/skills/create-screens-and-routing
Command: npx skills add https://github.com/Vinicius-B-Leite/blcalisteniaV2 --skill create-screens-and-routing

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automates scaffolding of screens and routing configurations for Expo Router-based React Native projects.

Core Features & Use Cases

  • File-based routing: generate route files that delegate to screen components.
  • Route groups and protected routes: support (application) and (tabs) groupings with access control.
  • Screen-component architecture: enforces separation of route files and UI screens with hooks and theme styling.
  • Pattern-driven guidance: standardizes app structure under src/app and src/ui/screens as described in the skill guide.

Quick Start

Create a new screen scaffold following the project's conventions and reference the routing patterns to wire it into the app.

Frequently Asked Questions about create-screens-and-routing

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

FAQPage Schema
How do I scaffold new screens and routing in Expo Router?▼

Expo Router scaffolding is automated by generating route files that delegate to screen components, enforcing separation between routing configuration and UI logic under src/app and src/ui/screens.

Does this routing approach support protected routes and tabs in React Native?▼

Protected routes and tabs are supported through route groupings like (application) and (tabs), enabling access control and organized navigation structures within Expo Router-based React Native projects.

What is the best way to structure screen components for Expo Router?▼

The best structure enforces screen-component separation by keeping route files in src/app distinct from UI screens in src/ui/screens, utilizing hook-based UI patterns and consistent theming.

Can I use this scaffolding pattern with TypeScript in React Native?▼

TypeScript is fully supported for scaffolding screens and routing configurations, applying pattern-driven guidance to standardize app architecture and component structure across React Native projects.

Why separate route files from screen components in Expo Router?▼

Separating route files from screen components ensures routing logic stays isolated from UI implementation, enforcing hook-based patterns, core component usage, and consistent theming across the application.

Related Skills

Explore More Software Engineering Skills→
kinneyyankinneyyan
2

react-native-architecture

Scaffold scalable React Native apps with Expo Router and React Query.

Community
Advanced
BIGSHOLBIGSHOL

verify-permissions

Validate RBAC configurations for tab access, button visibility, and permission checks.

Community
Intermediate
LutimiLutimi

ckm:ui-styling

Integrate shadcn/ui, Radix primitives, and Tailwind CSS into React interfaces.

Community
Advanced
martinacostadevmartinacostadev
3

new-screen

Generate Expo Router screens with TypeScript and SafeArea integration.

Community
Intermediate