Shopify Remix Extension Cursor rules template - Cursor Rules Template for Cursor AI

Overview

This Cursor rules template configures Cursor AI for a Shopify app built with a Remix extension. It covers architecture, authentication, database patterns, testing, and production considerations so you can paste the block into a .cursorrules file at the project root and start coding with guardrails tailored to this stack.

Directly copyable instructions and a stack-specific directory layout help ensure your team follows a repeatable, secure, and testable path from bootstrap to deployment.

When to Use These Cursor Rules

• Starting a Shopify app using Remix as the frontend framework and a Remix extension for embedded Admin UI.
• Enforcing a consistent project layout and security posture across teams and environments.
• Guiding Cursor AI in generating code for routes, Shopify API calls, and data access with stack-aware constraints.

Copyable .cursorrules Configuration

Framework Role & Context:
  You are Cursor AI guiding a Shopify app built with Remix extension. Output must be pasteable into a .cursorrules at project root and govern generated code for this stack.

Code Style and Style Guides:
  Language: TypeScript
  Style: ESLint with Prettier
  TSConfig: strict
  File formatting: 2 spaces

Architecture & Directory Rules:
  Root: ensure Remix app layout with app, public, server
  Entry points: app/entry.client.tsx, app/entry.server.tsx
  Routes: app/routes, including nested layouts
  Modules: /app/lib for business logic, /app/components for UI, /app/styles for CSS

Authentication & Security Rules:
  Shopify OAuth 2.0 for authentication
  Use httpOnly secure cookies in production
  Validate shop domain on each request
  Do not log raw tokens in memory or logs

Database and ORM patterns:
  PostgreSQL via node-postgres (pg)
  No ORM; use parameterized queries
  Separate connection pool and query layer
  Store only necessary persistent data; cache Shopify data where appropriate

Testing & Linting Workflows:
  Vitest for unit tests
  React Testing Library for components
  ESLint and Prettier in CI
  GitHub Actions: lint, test, build, deploy

Prohibited Actions and Anti-patterns for the AI:
  Do not perform real network calls during rule generation
  Do not embed secrets in code blocks
  Do not bypass Shopify OAuth flow
  Do not rely on browser storage for tokens

Recommended Project Structure

shopify-remix-extension/
├─ app/
│  ├─ root.tsx
│  ├─ entry.client.tsx
│  ├─ entry.server.tsx
│  ├─ routes/
│  │  ├─ index.tsx
│  │  └─ shop.tsx
│  ├─ components/
│  ├─ lib/
│  └─ styles/
├─ public/
├─ remix.config.js
├─ package.json
├─ tsconfig.json
└─ .env

Core Engineering Principles

• Stack-specific rules reduce ambiguity and drift
• Security-first design with Shopify OAuth and token handling
• Parameterize all database queries and isolate data access
• Testable by default: unit, integration, and end-to-end patterns
• Deterministic code generation with Cursor AI rules

Code Construction Rules

• Preserve Remix route and data loading conventions when generating code
• Avoid global mutable state for app data
• All Shopify API calls must include shop parameter and access token
• Use strong typing for Shopify responses and event payloads
• Do not embed secrets in client code or config files

Security and Production Rules

• Store secrets in a dedicated vault, not in repo or environment dumps
• Implement CSRF protection for POST endpoints and Shopify webhooks
• Enforce strict Content Security Policy in the Remix app
• Enable TLS, secure cookies, and HSTS for production deployments
• Enable audit logging for admin actions and errors

Testing Checklist

• Unit tests for utilities and adapters
• Component tests for UI components used in Remix routes
• Integration tests for Shopify API call flows and webhooks
• CI ensures lint, tests, and build pass before deployment

Common Mistakes to Avoid

• Relying on an ORM when not needed, adding unnecessary complexity
• Missing validation of Shopify shop param on routes
• Exposing secrets in client side code or repo
• Skipping proper webhooks verification and signature checks

FAQ

What is this Cursor rules template for Shopify Remix Extension?

This Cursor rules template provides a copyable .cursorrules block and stack specific guidance to configure Cursor AI for a Remix based Shopify app, including architecture, security, testing, and deployment considerations.

Where do I paste the .cursorrules file?

Save the provided block as .cursorrules at your project root. Cursor AI will read it during development to enforce stack specific constraints and generation rules.

Which stack does this template cover?

It targets a Shopify app built with Remix extension, including Remix route structure, Shopify OAuth, and an API layer using Node.js. The rules are tailored for that stack.

Does this include security and testing guidelines?

Yes. The template includes authentication, secure token handling, parameterized DB queries, ESLint, Prettier, Vitest, and CI/CD considerations appropriate for production Shopify Remix apps.

How do I deploy using the included rules?

Follow the deployment guidance in the Security and Production Rules and adjust environment variables, secret management, and GitHub Actions workflows for your hosting provider.