epic-routing

Automate Epic Stack routing setup with React Router Auto Routes.

5.5k|464|Updated May 4, 2023
One-click install
npx skills add https://github.com/epicweb-dev/epic-stack --skill epic-routing
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: epic-routing
Source: https://github.com/epicweb-dev/epic-stack/tree/main/docs/skills/epic-routing
Command: npx skills add https://github.com/epicweb-dev/epic-stack --skill epic-routing

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a clear, structured approach to implementing routing in Epic Stack apps using file-based conventions and react-router-auto-routes, helping teams avoid ambiguous setups and inconsistent patterns.

Core Features & Use Cases

  • File-based routing conventions with _layout.tsx, index.tsx, and $param.tsx route files.
  • Support for nested layouts, route groups, and parameterized routes.
  • Loaders, actions, and resource routes to handle data loading and mutations without UI.
  • Guidance on configuring app/routes.ts and co-locating route modules for maintainability.

Quick Start

Bootstrap a minimal Epic Stack routing setup:

  • Create app/routes/_layout.tsx for a shared layout
  • Create app/routes/index.tsx as the root route
  • Create app/routes/users/$username/index.tsx for a dynamic user page
  • Configure app/routes.ts to enable react-router-auto-routes with appropriate ignored files

Frequently Asked Questions about epic-routing

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

FAQPage Schema
How do I set up file-based routing in an Epic Stack app?▼

File-based routing in an Epic Stack app is set up by creating route files like _layout.tsx, index.tsx, and $param.tsx, then configuring app/routes.ts to enable react-router-auto-routes with appropriate ignored files.

What is the naming convention for nested layouts and dynamic routes in Epic Stack?▼

Nested layouts and dynamic routes in Epic Stack use specific file naming conventions: _layout.tsx for shared layouts, index.tsx for root routes, and $param.tsx for parameterized routes to enforce consistent structure.

Can I handle data loading and mutations without a UI in React Router Auto Routes?▼

Resource routes in React Router Auto Routes handle data loading and mutations without a UI. You can use route loaders and actions to manage data fetching and form submissions across typical Epic Stack projects.

How do I configure app/routes.ts for react-router-auto-routes?▼

Configuring app/routes.ts for react-router-auto-routes involves defining the auto routes setup and specifying ignored files, which enables the framework to automatically map your file-based route modules into the application router.

Does Epic Stack routing support parameterized routes like users/$username?▼

Epic Stack routing supports parameterized routes by using the $param.tsx file naming convention. Creating a file like app/routes/users/$username/index.tsx automatically generates a dynamic user page route.

Why are my nested layout routes not rendering correctly in Epic Stack?▼

Nested layout routes often fail to render correctly when file naming conventions are not followed. Ensure shared layouts use the _layout.tsx suffix and that route modules are properly co-located and configured in app/routes.ts.

Related Skills