remix-run

Builds, reviews, and refactors this Remix Store v3 app using Remix 3, framework-agnostic Hydrogen, Node, Oxygen, Vite, and remix/* imports. Use for app structure, routing, middleware, data, UI, browser interaction, tests, and deployment; not for implementing…

Guide for adding or reviewing Hydrogen storefront analytics. Use when working with ShopifyScripts analytics, AnalyticsEvent, consent mode, page/product/ collection/search/cart view events, cart update tracking, custom analytics destinations, or framework…

Guide for building an accessible cart drawer using @shopify/hydrogen. Use when creating or reviewing a cart drawer, mini cart, or slide-out cart, including native dialog element (showModal), closedby light dismiss, body scroll lock, exit animations, and…

Behavioral guide for reading and writing cart metafields with @shopify/hydrogen. Use when adding, modifying, or reviewing cart metafield reads or writes, an app-owned cart metafield route, cart-to-order metafield copying, or custom cart data such as delivery…

Behavioral guide for building cart UI with @shopify/hydrogen: line items, quantity and remove controls, optimistic updates, discount, note, and cart attribute inputs, and the full-page /cart fallback. Use when writing, modifying, or reviewing cart line-item…

Guide for building collection and search browsing UI with @shopify/hydrogen. Use when creating, modifying, or reviewing collection routes, search results, product grids, filters, sort controls, active filter chips, or URL-synced browse state in storefront…

Customer Account API setup for Hydrogen storefronts. Use when wiring customer sessions, login/logout/OAuth route handlers, account profile, order history, account-gated UI, cart buyer identity sync, or Customer Account GraphQL queries.

Helper-only sizing of Shopify CDN image URLs. Use when rendering Storefront API images in product/collection cards, PDP galleries, PLP heroes, cart thumbnails, or other img element surfaces.

Create or revise demos in the Remix repository. Use when adding a new demo under demos/, updating an existing demo, or reviewing demo code to ensure it showcases Remix packages, strong code hygiene, and production-quality patterns.

Create, revise or review Remix UI documentation and interactive examples, including scenario design, product UX review, focused demos and accurate API coverage. Use for UI library examples rather than full application demos or primitive implementation.

Create or align a package in the Remix monorepo to match existing package conventions. Use when adding a brand new package under packages/, or when fixing an existing package's structure, test setup, TypeScript/build config, code style, and README layout to…

Builds, reviews, and refactors Remix 3 apps using the remix package and remix/* imports. Use for application structure, routing, middleware, data, auth, UI, browser interaction, and tests; not for implementing Remix framework packages.

Build idiomatic headless primitives in `packages/ui` for Remix. Use when authoring or revising accessible UI behavior, required structural styles, public primitive events, or shared primitive utilities under `packages/ui/src`.

Review Remix pull requests from a local development checkout. Use when asked to review a PR, inspect a pull request diff, or produce a thorough reviewer-style assessment.

Create or update Remix repo change files under `packages/*/.changes`. Use when a user asks for release notes, changes, a missing changelog entry, a prerelease note, or an update to existing unpublished release notes.

Write, refactor, or review tests in the Remix repository. Use when adding or changing `.test.ts`/`.test.tsx` files, package test scripts, test fixtures, mocks, coverage tests, e2e tests, or package metadata for test-only dependencies.

Perform React Router releases through the generated release PR, from readiness review through merge and verification of npm versions, dist-tags, git tags, and the GitHub release. Also use for release-readiness reviews or following an already merged release…

Summarize React Router Steering Committee meeting notes from a user-provided location in GOVERNANCE.md. Use when asked to add or revise Steering Committee meeting summaries.

Bring a blocked React Router community pull request across the finish line. Use when the user invokes `/finish-line` or `$finish-line`, provides a PR number or URL, and asks Codex to resolve merge blockers such as a missing change file, missing documentation,…

Route gh-aw workflow design/create/debug/upgrade requests to the right prompts.

Prepare React Router release notes before running the changes/versioning scripts. Use when asked to review, polish, normalize, or prepare pending change files under packages/*/.changes, remove semantic commit prefixes from release bullets, enforce imperative…

Create and package React Router pull requests. Use when the user asks to create, open, prepare, or finish a PR for this repository, including branch/commit/push handoff, draft PR creation, PR body writing, and applying GitHub labels such as pkg:*, feat:*,…

Build applications with React Router in Framework, Data, Declarative, and unstable RSC modes. Use when configuring routes, route modules, loaders, actions, forms, fetchers, navigation, pending UI, SSR/SPA/pre-rendering, middleware, URL params/search params,…

Fix a reported bug in React Router from a GitHub issue. Use when the user provides a GitHub issue URL and asks to fix a bug, investigate an issue, or reproduce a problem. Handles the full workflow: fetching the issue, finding the reproduction, writing a…

Builds, reviews, and refactors Remix 3 apps using the remix package and remix/* imports. Use for application structure, routing, middleware, data, auth, UI, browser interaction, and tests; not for implementing Remix framework packages.

Write, review, or refactor tests that maximize confidence per maintenance cost. Use for test strategy, unit/integration/browser/E2E tests, fixtures, mocks, flaky tests, skipped tests, brittle assertions, or deciding what behavior deserves coverage.

Automate browser interactions, test web pages and work with Playwright tests.

Use for custom storefronts requiring direct GraphQL queries/mutations for data fetching and cart operations. Choose this when you need full control over data fetching and rendering your own UI. NOT for Web Components - if the prompt mentions HTML tags like…

Build and review Remix 3 applications using the `remix` npm package and subpath imports. Use when working on Remix app structure, routes, controllers, middleware, validation, data access, auth, sessions, file uploads, server setup, UI components, hydration,…

Build and review Remix UI components using `remix/ui`. Use when working on component setup, state, lifecycle, mixins, refs, event handlers, styles, animation, client bootstrapping, or component tests.