create-route

Create React Router 7 routes with type-safe imports, loaders, and actions.

4|Updated Oct 24, 2025

Search Tags:#typescript #loaders #actions #type-imports #react-router-7 #route-creation

Ready to run

npx skills add https://github.com/tech-with-seth/iridium --skill create-route

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: create-route
Source: https://github.com/tech-with-seth/iridium/tree/main/.github/skills/create-route
Command: npx skills add https://github.com/tech-with-seth/iridium --skill create-route

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps developers create React Router 7 routes with proper type imports, loaders, and actions, ensuring consistent patterns when adding new pages, API endpoints, layouts, or route files.

Core Features & Use Cases

Route scaffolding: Generates route files with correct type-safe imports and exports.
Loader/Action templates: Provides boilerplate loaders and actions aligned with the route structure.
Use Case: When adding a new page and associated API endpoint, this skill ensures the route and related files follow the project's conventions.

Quick Start

Create a new route by following the provided templates and examples: add a page under app/routes/, implement a loader and an action using the type-import pattern, and register the route in app/routes.ts.

Frequently Asked Questions about create-route

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

FAQPage Schema

How do I scaffold a new React Router 7 route with loaders and actions?▼

Scaffolding a React Router 7 route involves generating files with type-safe imports and exported loaders and actions. This process ensures correct route file structure and type safety by applying consistent templates and documented examples.

What is the correct file structure for adding a page and API endpoint in React Router 7?▼

The correct file structure places new page routes under app/routes and registers them in app/routes.ts. Route files must implement loaders and actions using the type-import pattern to ensure consistent project conventions.

Does React Router 7 support type-safe imports for route loaders and actions?▼

Yes, React Router 7 supports type-safe imports for loaders and actions. Route creation enforces this by generating boilerplate templates that align with the route structure, ensuring type-safe exports and consistent patterns.

Can I use this route scaffolding approach for both layouts and API endpoints?▼

Yes, this route scaffolding approach applies to adding new pages, API endpoints, and layouts. It ensures consistent patterns and correct type-safe imports across all generated route files within your project.

What is the best way to ensure consistent patterns when creating React Router 7 routes?▼

The best way to ensure consistent React Router 7 route patterns is to automate route creation using templates. This enforces proper type imports, loader structures, and action boilerplate across all new files.

Why do my React Router 7 route files need type-import patterns?▼

Type-import patterns are needed in React Router 7 route files to enforce type safety across loaders and actions. Applying these patterns via templates guarantees that the route file structure remains type-safe and conventionally aligned.