skills.rest
alejandro-technology
alejandro-technologyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

create-screen

Generate React Native UI screens with view files, route registration, and stack navigator entries.

Updated Feb 27, 2026
Search Tags:#typescript#scaffold#navigation#react-native#ui-patterns#screen
One-click install
npx skills add https://github.com/alejandro-technology/react-native-template --skill create-screen-alejandro-technology
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: create-screen
Source: https://github.com/alejandro-technology/react-native-template/tree/main/.claude/skills/generation/create-screen
Command: npx skills add https://github.com/alejandro-technology/react-native-template --skill create-screen-alejandro-technology

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Scaffold new screens with RootLayout, Toolbar, navigation integration, and typed routes. Generates view file, route registration, and stack navigator entry.

Core Features & Use Cases

  • Generates a standard screen structure (View, Controller, and styling) aligned with project conventions.
  • Automates route registration and stack navigator entry to ensure consistent navigation across modules.
  • Applies to List, Detail, Form, and Settings screens for new or existing modules.

Quick Start

Run the create-screen command to scaffold a new screen in your module and integrate it into your navigation stack.

Frequently Asked Questions about create-screen

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

FAQPage Schema
How do I scaffold a new React Native screen and wire it into an existing stack navigator?▼

To scaffold a React Native screen, generate a view file, register the route, and add a stack navigator entry. This ensures consistent navigation and layout structure across modules.

Can I generate different types of UI screens like list, detail, and form views with consistent layout?▼

Yes, you can generate list, detail, form, and settings screens. Scaffolding applies common module patterns to ensure layout consistency and typed routes across different screen types.

Does scaffolding a screen with typed routes require manual navigation integration?▼

No, scaffolding a screen with typed routes automates navigation integration. It generates the view file, route registration, and stack navigator entry to handle navigation flows without manual setup.

What is the best way to create production-ready React Native screens with standard UI patterns?▼

The best way to create production-ready screens is generating a standard structure with View, Controller, and styling. This ensures testability and aligns with project conventions for UI patterns.

How do I ensure layout consistency when adding new modules to a React Native project?▼

Ensure layout consistency by scaffolding screens with a standard RootLayout and Toolbar. This generates a production-ready structure that aligns with existing project conventions and navigation flows.

Why does adding a new screen break my React Native navigation stack?▼

Adding a screen breaks the navigation stack if route registration is missing. Proper scaffolding generates the view file, route registration, and stack navigator entry together to maintain navigation integrity.

Related Skills

Explore More Software Engineering Skills→
0xkynz0xkynz

react-native

Automate React Native CLI bare workflow setup with TypeScript and native module integration.

Community
Intermediate
mfscpayload-690mfscpayload-690
23

moviemonk-ai

Validate UI component consistency and type safety for the MovieMonk app.

Community
Advanced
ceorkmceorkm
216

mobile-app-ui-design

Translate mobile app UI/UX problems into structured specifications for screens, flows, and components.

Community
Advanced
Nhqvu2005Nhqvu2005
54

mobile-wizard

Generate mobile app project structures with Expo Router and Flutter navigation patterns.

Community
Basic