Build React applications with Remix — loaders, actions, hooks, Server/Client Components, nested routes, error boundaries, form handling, and streaming SSR. Use when building Shopify Hydrogen storefronts or Remix-based apps.
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
# React + Remix Patterns
## Before writing code
**Fetch live docs**:
1. Fetch `https://remix.run/docs/en/main` for Remix documentation
2. Fetch `https://react.dev/reference/react` for React API reference
3. Web-search `site:shopify.dev hydrogen remix patterns` for Hydrogen-specific patterns
## Why Remix (Not Next.js)
Shopify's Hydrogen is built on Remix:
- Server-first rendering with progressive enhancement
- Loaders and actions for server-side data fetching and mutations
- Nested routes for layout composition
- Built-in form handling without client-side state management
- Streaming SSR for fast perceived performance
## Core Remix Concepts
### Loaders (Data Fetching)
Server-side function that runs on every GET request:
```typescript
import { json, type LoaderFunctionArgs } from '@remix-run/node';
export async function loader({ context, params }: LoaderFunctionArgs) {
const { storefront } = context;
const { products } = await storefront.query(PRODUCTS_QUERY);
return json({ products });
}
export default function ProductsPage() {
const { products } = useLoaderData<typeof loader>();
return <ProductGrid products={products} />;
}
```
### Actions (Mutations)
…
The line at the top of this page pins the label git:20260325.a7816e7, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
GET https://markdownregistry.com/api/v1/artifacts/art_5o5b5ayy7aizrzqk
GET https://markdownregistry.com/api/v1/resolve?ref=orcaqubits/agentic-commerce-skills-plugins/react-patterns
GET https://markdownregistry.com/api/v1/blob/c2060117e49bbe8b67a2a55c258c0afc9e8a68633168b7fb79dc65766612f3ee
Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
orcaqubits/agentic-commerce-skills-plugins · a2a-multi-agent/skills/a2a-client/SKILL.md · Build an A2A client — the agent-side code that discovers other agents, sends tasks, handles responses, and manages…
orcaqubits/agentic-commerce-skills-plugins · a2a-multi-agent/skills/a2a-jsonrpc-transport/SKILL.md · Implement the A2A JSON-RPC 2.0 transport layer — request/response format, method routing, batch requests, and HTTP…
orcaqubits/agentic-commerce-skills-plugins · a2a-multi-agent/skills/a2a-mcp-bridge/SKILL.md · Build bridges between A2A and MCP — wrap A2A agents as MCP tools, use MCP tools from A2A agents, and architect hybrid…
vodailocz/kilo-kit-mcp · skills/engineering/react-patterns/SKILL.md · Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.
