web-framework-remix_skill

Overview

This skill documents Remix framework patterns for file-based routing, server-side loaders and actions, defer streaming, useFetcher, progressive enhancement, and route-level error handling. It focuses on practical patterns, conventions, and migration notes toward React Router v7 while preserving Remix v2 best practices for existing projects. The guidance emphasizes type-safe loader usage, throwing Response objects for expected errors, and progressive enhancement of forms.

How this skill works

It inspects route modules and patterns: loaders for server-side reads, actions for server-side writes, file-system route conventions, ErrorBoundary usage, defer streaming for non-critical promises, and useFetcher for non-navigation requests. The skill explains how data flows from URL → loader(s) → render → action (on mutation) → revalidation, and highlights required project conventions such as named exports and useLoaderData<typeof loader>(). It also covers migration differences when moving to React Router v7 (Single Fetch, data() utility, clientAction, import changes).

When to use it

• Building full-stack React apps with server-side rendering and parallel data loading
• Implementing type-safe server-side data fetching with loaders and typed components
• Creating progressively enhanced forms that work without JavaScript
• Streaming non-critical data (analytics, recommendations, comments) with defer and Suspense
• Performing inline mutations or background requests using useFetcher
• Handling route-level errors with ErrorBoundary and thrown Response objects

Best practices

• Export loaders and actions as named exports from route modules only
• Consume loader data with useLoaderData<typeof loader>() for type safety
• Throw Response (or json) for expected HTTP errors and use ErrorBoundary for recovery
• Keep critical data in direct loader returns; defer non-critical promises to stream
• Use Form for progressive enhancement and return validation errors with proper HTTP status
• When combining with MobX, wrap state mutations after await in runInAction()

Example use cases

• Blog with file-based routing, sluged posts, and nested layouts for shared UI
• Dashboard: load user up front, defer analytics and recent activity for streaming
• Contact form: server-side action validates input, returns errors, and redirects on success
• Task item page: single action handles update/delete/toggle via intent field in forms
• Inline like button using useFetcher to toggle state without navigation