skills.rest
Stair-Crusher-Club
Stair-Crusher-ClubOFFICIAL
Explore all skills by this author →
WebsiteGitHub

scc-app-add-screen

Scaffold React Native SCC screens with navigation registration and SccXxx components.

7|Updated Mar 15, 2025
Search Tags:#typescript#scaffold#navigation#react-native#code-generation#ui-components#screen-creation
One-click install
npx skills add https://github.com/Stair-Crusher-Club/scc-app --skill scc-app-add-screen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: scc-app-add-screen
Source: https://github.com/Stair-Crusher-Club/scc-app/tree/main/.claude/skills/scc-app-add-screen
Command: npx skills add https://github.com/Stair-Crusher-Club/scc-app --skill scc-app-add-screen

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The skill provides a repeatable pattern for adding a new screen to a React Native SCC app, including a standardized directory structure, navigation registration, and usage of shared components to ensure consistency and maintainability.

Core Features & Use Cases

  • Scaffold a new screen directory under src/screens/{ScreenName}/, including index.ts, {ScreenName}.tsx, and optional sections.
  • Register the screen in the app's navigation configuration to enable proper routing.
  • Use SccXxx components and ScreenLayout to maintain a consistent look and behavior across screens.
  • Ideal for rapidly adding feature screens such as onboarding, settings, or detail views while preserving project conventions.

Quick Start

Create the new screen directory following the template and wire it into the main navigator to activate it.

Frequently Asked Questions about scc-app-add-screen

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

FAQPage Schema
How do I add a new screen to a React Native app and register it for navigation?▼

To add a React Native screen, scaffold a directory under src/screens/{ScreenName}/ with index.ts and {ScreenName}.tsx files, then register the screen in the app's navigation configuration to enable routing.

What is the standard folder structure for creating a new screen in a TypeScript React Native project?▼

The standard screen structure requires a folder under src/screens/{ScreenName}/ containing an index.ts file, a {ScreenName}.tsx component file, and optional sections to maintain consistent project conventions.

How do I use shared UI components when scaffolding a new screen?▼

Use SccXxx components and ScreenLayout within your new screen's TypeScript file to maintain a consistent look and behavior across all screens in your React Native application.

Can I use this screen scaffolding approach for rapidly adding feature views like onboarding or settings?▼

Yes, this scaffolding approach is ideal for rapidly adding feature screens such as onboarding, settings, or detail views while preserving project conventions and ensuring proper navigation integration.

What's the best way to ensure consistent routing and component usage when creating multiple React Native screens?▼

The best way to ensure consistency is to apply a repeatable scaffolding pattern that automatically wires new screens into the main navigator and enforces the usage of shared SccXxx components and ScreenLayout.

Related Skills

Explore More Software Engineering Skills→
gounthargounthar

expo-router-expert

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

Community
Advanced
anyulledanyulled

separation-of-concerns

Refactor monolithic code into separate data fetching, business logic, and presentation layers.

Community
Intermediate
mysticfallmysticfall
1

godot-ui

Define and enforce unified Godot UI guidelines for full-screen screens and controls.

Community
Basic
ax-llmax-llm
2.9k

ax-java-llm

Write Java code using native dev.axllm:ax entrypoints for Ax packages.

Official
Intermediate