remix-route-generator_skill

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.