skills.rest
treesus6
treesus6COMMUNITY
Explore all skills by this author →
GitHub

sq-navigation

Define typed RootStackParamList and generic navigation hooks for SkateQuest-Mobile.

1|Updated Dec 7, 2025
Search Tags:#typescript#navigation#react-native#react-navigation#typed#skatequest
One-click install
npx skills add https://github.com/treesus6/SkateQuest-Mobile --skill sq-navigation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sq-navigation
Source: https://github.com/treesus6/SkateQuest-Mobile/tree/main/.claude/skills/sq-navigation
Command: npx skills add https://github.com/treesus6/SkateQuest-Mobile --skill sq-navigation

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Typed React Navigation provides type-safe navigation APIs for SkateQuest-Mobile, reducing runtime navigation errors and improving developer confidence when adding screens and using hooks.

Core Features & Use Cases

  • Type-safe RootStackParamList for all screens (Login, ParkDetail, UserProfile, etc.)
  • Safe navigation with useNavigation and useRoute generics
  • Clear screen component patterns and rules to prevent param misconfigurations
  • Use case: when adding a new screen, you can guarantee correct params and compile-time checks

Quick Start

Define your RootStackParamList with all routes, then use the typed navigation hooks in screen components to enable strict navigation.

Frequently Asked Questions about sq-navigation

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

FAQPage Schema
How do I set up type-safe navigation in React Native with TypeScript?▼

Type-safe React Navigation requires defining a shared RootStackParamList with all routes, then applying NativeStackNavigationProp and RouteProp generics in screen components to enable strict compile-time checks.

How do I add a new screen to a typed React Navigation stack without runtime errors?▼

To add a new screen, register it in the navigation container and define its route and params in the RootStackParamList to guarantee correct param configuration and prevent misconfigurations.

Why does useNavigation or useRoute cause TypeScript errors in React Navigation?▼

TypeScript errors occur when navigation hooks lack generics; applying typed NativeStackNavigationProp and RouteProp generics from a defined RootStackParamList ensures correct param usage.

Does React Navigation work with TypeScript for strict param checking in React Native?▼

Yes, React Navigation supports TypeScript strict param checking by defining a RootStackParamList and using typed generics with useNavigation and useRoute hooks across screen components.

What's the best way to prevent param misconfigurations when passing data between React Native screens?▼

The best way to prevent param misconfigurations is enforcing compile-time checks by defining a RootStackParamList and using typed navigation hooks with clear screen component patterns.

What are the limitations of using typed generics for React Navigation in React Native?▼

Using typed generics requires maintaining a shared RootStackParamList with all routes and ensuring every screen uses NativeStackNavigationProp and RouteProp correctly, adding initial setup overhead.

Related Skills

Explore More Software Engineering Skills→
JosiahSiegelJosiahSiegel
51

react-typescript

Provide TypeScript patterns for React component props, events, hooks, and generics.

Community
Intermediate
alejandro-technologyalejandro-technology

navigation-patterns

Enforce centralized, type-safe navigation patterns for React Native apps using React Navigation.

Community
Advanced
alejandro-technologyalejandro-technology

create-navigation

Generate typed navigation scaffolds for React Native feature modules.

Community
Advanced
jagreehaljagreehal
3

strict-typescript

Enforce advanced TypeScript tsconfig flags and ESLint governance for compile-time safety.

Community
Advanced