RemixPrismaTypeScriptPostgreSQL

Remix + Prisma Prompt Architecture

Generate prompts that produce proper Remix loader/action patterns, progressive enhancement, and type-safe Prisma queries.

❌ Generic AI Output

// Generic prompt — anti-pattern Remix
export default function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('/api/users')
      .then(r => r.json())
      .then(setUsers);
  }, []);

  return <ul>{users.map(u => <li>{u.name}</li>)}</ul>;
}

✅ Prompt Architect Output

// Prompt Architect — idiomatic Remix + Prisma
import { json, type LoaderFunctionArgs } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { prisma } from "~/db.server";
import { requireUserId } from "~/session.server";

export async function loader({ request }: LoaderFunctionArgs) {
  await requireUserId(request);
  const users = await prisma.user.findMany({
    select: { id: true, name: true, email: true },
    orderBy: { createdAt: "desc" },
  });
  return json({ users });
}

export default function Users() {
  const { users } = useLoaderData<typeof loader>();
  return (
    <ul>
      {users.map((u) => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  );
}

Real Generated Output

Automated Quality Enforcement

Every prompt includes strict bans and deprecation rules tailored to your Remix + Prisma + TypeScript + PostgreSQL stack

strict-bans.md — AI Prompt Architect

# ⛔ STRICT BANS — Enforced Constraints

## Framework Version Enforcement
- **BANNED**: React class components → Use functional components + hooks
- **BANNED**: `componentWillMount`, `componentWillUpdate` → Use `useEffect`
- **BANNED**: `getInitialState` → Use `useState` or `useReducer`
- **BANNED**: `createClass` syntax → Use arrow function components
- **BANNED**: PropTypes runtime validation → Use TypeScript interfaces
- **BANNED**: `defaultProps` static → Use ES6 default parameters

## TypeScript Enforcement
- **BANNED**: `any` type annotations → Use `unknown` + type guards
- **BANNED**: `@ts-ignore` comments → Fix the actual type error
- **BANNED**: Non-null assertions (`!`) → Use optional chaining (?.)
- **BANNED**: `enum` keyword → Use `as const` union types
- **BANNED**: `namespace` declarations → Use ES modules

## Security Constraints
- **BANNED**: `eval()`, `Function()` constructors
- **BANNED**: `innerHTML` assignments → Use `textContent` or sanitise
- **BANNED**: Hardcoded secrets, API keys, or credentials
- **BANNED**: `http://` URLs in production → Enforce `https://`
- **BANNED**: `*` CORS origins in production → Whitelist domains
- **BANNED**: SQL string concatenation → Use parameterised queries
- **BANNED**: `localStorage` for auth tokens → Use httpOnly cookies

## State Management
- **BANNED**: Prop drilling beyond 2 levels → Use Context or Zustand
- **BANNED**: `useEffect` for data fetching → Use React Query / SWR
- **BANNED**: Mutable state mutations → Use immutable update patterns
- **BANNED**: Global mutable variables → Use React state or stores

## API & Data Patterns
- **BANNED**: `fetch` without error handling → Wrap in try/catch
- **BANNED**: Untyped API responses → Define response interfaces
- **BANNED**: `console.log` in production → Use structured logger
- **BANNED**: Synchronous file I/O → Use async/await patterns
- **BANNED**: Unbounded `.find()` / `.filter()` on large arrays → Use Map/Set

## CSS & Styling
- **BANNED**: Inline styles for layout → Use CSS modules or Tailwind
- **BANNED**: `!important` overrides → Fix specificity properly
- **BANNED**: Fixed pixel breakpoints → Use relative units (rem/em)
- **BANNED**: `z-index` values > 100 → Use a z-index scale system

❌ The Problem

AI outputs ignore Remix conventions — using useEffect instead of loaders, client-side fetching instead of actions, and untyped form data.

✅ The Solution

Prompt Architect encodes Remix loader/action patterns, useFetcher hooks, and Prisma type-safe queries as hard constraints.

Frequently Asked Questions

Does it enforce Remix conventions?

Yes — loaders for GET, actions for mutations, progressive enhancement, and proper error boundaries.

Can it generate Prisma queries?

Prompts include type-safe findMany, create, update with proper select/include and relation filtering.

Does it support optimistic UI?

Yes — useFetcher with optimistic updates and pending states are included as patterns.

Technical Deep Dive

How do I set up the initial project architecture with these technologies?

Use AI Prompt Architect to generate a scaffold prompt that includes directory structure, configuration files, environment setup, and dependency installation commands tailored to your exact stack combination. The prompt enforces best-practice file organisation from the start.

See the difference yourself

Stop wasting time fixing AI-generated Remix code. Start with the right prompt.

Generate Remix + Prisma Prompts Free

Related Architectures

Explore more stack-specific prompt engineering guides

Vue 3Nuxt 3Prisma

Remix + Prisma Prompt Architecture

Automated Quality Enforcement

Frequently Asked Questions

Technical Deep Dive

See the difference yourself

Related Architectures

Vue + Nuxt + Prisma Prompt Engineering

Wasp × Cursor AI Prompt Engineering

Wasp × Claude Prompt Engineering