web-meta-framework-remix
Remix / React Router v7 Framework Patterns
Quick Guide: Each route exports a
loaderfor reads and anactionfor writes. Both run on the server. Data flows through loaders, mutations go through actions, forms work without JavaScript, and nested routes enable parallel data loading.json()anddefer()are deprecated in React Router v7 -- return raw objects instead, usedata()for custom headers/status.
<migration_notice>
IMPORTANT: React Router v7 Migration
Remix has merged into React Router v7. What was planned as Remix v3 is now React Router v7 "framework mode".
| Remix v2 (Deprecated) | React Router v7 (Current) |
|---|---|
json(data) |
Return raw objects directly |
json(data, { status, headers }) |
data(data, { status, headers }) |
defer({ key: promise }) |
Return { key: promise } with Single Fetch |
@remix-run/node imports |
react-router / @react-router/node |
LoaderFunctionArgs |
Route.LoaderArgs (generated types) |
More from agents-inc/skills
web-animation-css-animations
CSS Animation patterns - transitions, keyframes, scroll-driven animations, @property, GPU-accelerated properties, accessibility with prefers-reduced-motion
24web-animation-view-transitions
View Transitions API patterns - same-document transitions, cross-document MPA transitions, shared element animations, pseudo-element styling, accessibility
21web-testing-playwright-e2e
Playwright E2E testing patterns - test structure, Page Object Model, locator strategies, assertions, network mocking, visual regression, parallel execution, fixtures, and configuration
21web-styling-cva
Class Variance Authority - type-safe component variant styling with cva(), compound variants, and VariantProps
20web-animation-framer-motion
Motion (formerly Framer Motion) animation patterns - motion components, variants, gestures, layout animations, scroll-linked animations, accessibility
20web-i18n-next-intl
Type-safe i18n for Next.js App Router
19