skills.rest
martinacostadev
martinacostadevCOMMUNITY
Explore all skills by this author →
𝕏@martinacostadevGitHub

new-screen

Generate Expo Router screens with TypeScript and SafeArea integration.

3|Updated Jan 21, 2026
Search Tags:#typescript#template#navigation#react-native#expo#expo-router#screen-generation
One-click install
npx skills add https://github.com/martinacostadev/claude-react-agents --skill new-screen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: new-screen
Source: https://github.com/martinacostadev/claude-react-agents/tree/main/templates/.claude/skills/mobile/new-screen
Command: npx skills add https://github.com/martinacostadev/claude-react-agents --skill new-screen

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide automates the creation of new Expo Router screens, ensuring consistent structure and patterns across projects.

Core Features & Use Cases

  • Generates a screen component and optional _layout.tsx for grouped routes
  • Supports Regular, Dynamic ([id]), Tab, and Modal screens with Expo Router
  • Includes type-safe templates using TypeScript and SafeArea integration

Quick Start

Provide the screen path to generate the screen scaffold.

Frequently Asked Questions about new-screen

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

FAQPage Schema
How do I scaffold a new Expo Router screen with TypeScript?▼

To scaffold an Expo Router screen with TypeScript, provide a screen path to generate a structured component. The output enforces TypeScript usage and includes SafeArea integration for consistent React Native app development.

What types of Expo Router screens can I generate for my React Native app?▼

You can generate Regular, Dynamic, Tab, and Modal screens for Expo-based React Native apps. The process creates the screen component and an optional _layout.tsx file to configure grouped routes.

How do I create a dynamic route with Expo Router?▼

To create a dynamic route with Expo Router, use the screen generation template to define a dynamic screen scope. This automatically scaffolds the required TypeScript file and proper project structure for dynamic routing.

Does Expo Router screen generation support SafeArea integration?▼

Yes, Expo Router screen generation supports SafeArea integration. The type-safe templates include SafeArea components to ensure screen content renders correctly within device safe boundaries.

How do I add a modal screen in Expo Router?▼

To add a modal screen in Expo Router, use the template-driven generation process to define a modal screen scope. This creates the necessary screen component and optional layout files to support modal presentation.

What is the best way to structure grouped routes in Expo Router?▼

The best way to structure grouped routes in Expo Router is by generating an optional _layout.tsx file alongside your screen component. This enforces a consistent project structure and proper TypeScript patterns.

Related Skills

Explore More Software Engineering Skills→
TMHSDigitalTMHSDigital
2

mobile-project-setup

Scaffold an Expo React Native project with TypeScript and file-based routing.

Community
Intermediate
gounthargounthar

expo-router-expert

Configure Expo Router file-based routing with dynamic routes and layouts.

Community
Advanced
dtorrasdtorras

building-native-ui

Build native UI screens with Expo Router and NativeTabs layouts.

Community
Advanced
berkcangumusisikberkcangumusisik
11

mobile-deeplink

Configure and audit deep-link schemes for React Native and Expo apps.

Community
Intermediate