skills.rest
ethpandaops
ethpandaopsOFFICIAL
Explore all skills by this author →
Website𝕏@ethpandaopsGitHub

Create New Routes

Generate React routes and page components with TanStack Router definitions.

24|10|Updated Jan 8, 2025
Search Tags:#developer tools#web development#frontend#react#routing#code generation
One-click install
npx skills add https://github.com/ethpandaops/lab --skill create-new-routes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Create New Routes
Source: https://github.com/ethpandaops/lab/tree/main/.claude/skills/create-new-route
Command: npx skills add https://github.com/ethpandaops/lab --skill create-new-routes

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill streamlines the process of creating new, production-ready routes and associated page components within The Lab's established React architecture.

Core Features & Use Cases

  • Route Definition: Creates thin TanStack Router definitions in src/routes/.
  • Page Implementation: Generates UI implementations in src/pages/.
  • Component Scoping: Allows for page-specific components in pages/[section]/components/.
  • Dynamic Routing: Supports dynamic routes using $param.tsx syntax.
  • Barrel Exports: Ensures routes and pages are always barrel exported via index.tsx.

Quick Start

Use the create-new-route skill to generate a new route for the '/users' path.

Frequently Asked Questions about Create New Routes

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

FAQPage Schema
How do I generate React routes and page components efficiently?▼

To generate React routes and pages, this skill creates production-ready TanStack Router definitions in src/routes/ and UI implementations in src/pages/, ensuring proper architectural patterns and barrel exports are maintained automatically.

What is the best way to set up dynamic routes in a React frontend application?▼

Setting up dynamic React routes is handled using the $param.tsx syntax, which generates dynamic routing definitions while simultaneously creating the corresponding page components and barrel exports for seamless integration.

Can I create page-specific components when adding new routes in React?▼

Yes, you can create page-specific components by utilizing the pages/[section]/components/ directory structure, allowing you to scope UI implementations directly to their corresponding routes without polluting the global components folder.

Does this React routing approach work with TanStack Router?▼

Yes, this react routing approach works specifically with TanStack Router by generating thin route definitions in src/routes/ while keeping the actual UI implementations separated in src/pages/ for better code organization.

Why do I need barrel exports for my React routes and pages?▼

Barrel exports via index.tsx are required for React routes and pages to ensure that all newly generated route definitions and page components are automatically exported and accessible throughout the application architecture.

Related Skills

Explore More Software Engineering Skills→
Aqsagull99Aqsagull99

nextjs-skill

Build Next.js 16+ apps with App Router, server components, and API routes.

Community
Intermediate
jangtrinhjangtrinh

nextjs

Plan and implement Next.js 15 App Router patterns for scalable UI apps.

Community
Intermediate
diego-tobalinadiego-tobalina
1

frontend-patterns

Design React/Next.js frontend architecture with component composition and state management.

Community
Advanced
hashintelhashintel
35

tanstack-start

Scaffold TanStack Start routing, API routes, and AI integrations for React apps.

Official
Intermediate