home / skills / ehtbanton / claudeskillsrepo / remix-route-generator

remix-route-generator skill

safe

This skill generates complete Remix route files with loader and action, enabling rapid page scaffolding for Remix 2.x projects.

npx playbooks add skill ehtbanton/claudeskillsrepo --skill remix-route-generator

Review the files below or copy the command above to add this skill to your agents.

Files (2)

SKILL.md

629 B

---
name: remix-route-generator
description: Generate Remix route files with loaders, actions, and meta. Triggers on "create remix route", "generate remix page", "remix loader", "remix action".
---

# Remix Route Generator

Generate Remix route files with data loading and form handling.

## Output Requirements

**File Output:** `*.tsx` route files
**Format:** Valid Remix route
**Standards:** Remix 2.x

## When Invoked

Immediately generate a complete Remix route with loader and action.

## Example Invocations

**Prompt:** "Create Remix route for products"
**Output:** Complete `products._index.tsx` with loader and action.

Overview

This skill generates complete Remix route files (.tsx) with loader, action, and meta implementations following Remix 2.x conventions. It produces ready-to-drop-in route components that handle data loading, form submissions, and head metadata. The generator responds to phrases like "create remix route", "generate remix page", "remix loader", and "remix action".

How this skill works

When invoked it outputs a single .tsx route file that includes a typed loader, an action to handle POST/PUT/DELETE form submissions, error handling, and an exportable meta function. The generated code follows Remix 2.x patterns, uses TypeScript types, and includes example fetch or database calls and form handling stubs that you can customize. Files are formatted as valid Remix routes and assume standard conventions (route default export, loader/action/meta exports).

When to use it

Scaffold a new data-backed page in a Remix app quickly.
Create a route that needs server-side data fetching and form handling.
Generate boilerplate for CRUD actions and meta tags.
Prototype new pages while maintaining Remix conventions.
Standardize route structure across a team project.

Best practices

Provide the resource name and intended HTTP actions (create/update/delete) in the prompt for precise output.
Specify any external APIs or database calls the loader/action should call to receive tailored stubs.
Keep generated code as a starting point—replace placeholder logic with real validation and persistence.
Use TypeScript types in prompts if you want specific model typings in generated code.
Review and adapt error and auth handling to match your app's security model.

Example use cases

Create a products.index route with a loader that fetches a product list and an action that handles product creation.
Generate an article route with meta tags derived from article data and an action for submitting comments.
Scaffold a user profile route with loader-based auth checks and an action to update profile fields.
Produce a settings page route that handles multiple form sections with distinct action branches.
Create a resource route that demonstrates common server-side validation and redirects after success.

FAQ

What Remix version does the generated code target?

The generator produces code following Remix 2.x conventions and exports (loader, action, meta, default).

Will the generated route include real database calls?

It includes realistic stubs and fetch examples; replace them with your actual DB or API code.