菜单
React Router v7 framework mode (Remix) playbook for chat/realtime/collaborative apps — loaders/actions, nested routes, streaming, optimistic UI, and why not Next. Use when the app class is chat/realtime.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
Angular playbook for internal enterprise and forms-heavy admin apps — standalone components, typed reactive forms, signals, DI services, routing, and testing. Use when the app class is internal enterprise/admin.
Astro playbook for content/marketing/mostly-static sites — islands architecture, content collections, zero-JS by default, and selective hydration. Use when the app class is content/marketing.
Relational schema design playbook — normalization, keys and identifiers, constraints, indexing, migrations, and modeling common relationships. Use when designing or evolving a database schema.
Deploy an app to Railway — build/start command detection, service config, environment variables, private networking, databases, and health checks. Use when deploying any web app or service to Railway.
SvelteKit playbook — routing, load functions, form actions, runes-based state, adapters, and testing. A defensible deviation when bundle size and authoring ergonomics are the priority. Use when the team picks Svelte.
On-demand install of long-tail stacks in a fresh environment — Angular CLI, Rust, uv/Python, Bun, Go, SvelteKit, via apt and mise. Use when the doctrine stack is not preinstalled on the box.
| name | react-router-framework |
| description | React Router v7 framework mode (Remix) playbook for chat/realtime/collaborative apps — loaders/actions, nested routes, streaming, optimistic UI, and why not Next. Use when the app class is chat/realtime. |
| origin | Matrix |
Doctrine pick for chat / realtime / collaborative apps (see
rules/stack-selection/frontend.md). React Router v7 in framework mode is the successor to
Remix: the loader/action model is a straight line from URL to server data to component, and
from user action to mutation to revalidation — exactly the shape of a live, session-driven
app. Choose this over Next for realtime; Next's RSC/route-cache model is a tax here, not a
benefit.
Use when: building a chat client, a collaborative editor, a live dashboard, or any app that is mutation-heavy and per-user rather than content-cache-heavy.
npx create-react-router@latest chat-app
cd chat-app
npm run dev
This scaffolds framework mode (Vite plugin, SSR on, file/route config). Confirm
@react-router/dev is wired in vite.config.ts and routes are declared in app/routes.ts.
app/
root.tsx # <html> shell, <Outlet/>, global error boundary
routes.ts # route table (or file-based routes)
routes/
_app.tsx # authed layout: sidebar of conversations
_app.c.$id.tsx # a single conversation: loader + action
login.tsx
lib/
db.server.ts # server-only data access (never imported client-side)
session.server.ts # cookie session, auth
Keep server-only code in *.server.ts so it is tree-shaken out of the client bundle.
// app/routes/_app.c.$id.tsx
export async function loader({ params, request }) {
const user = await requireUser(request);
const messages = await db.messages.forThread(params.id, user.id);
return { messages };
}
export async function action({ params, request }) {
const user = await requireUser(request);
const form = await request.formData();
await db.messages.send(params.id, user.id, String(form.get("body")));
return { ok: true }; // route revalidates automatically
}
export default function Conversation() {
const { messages } = useLoaderData<typeof loader>();
const fetcher = useFetcher(); // send without navigating
return (
<>
<MessageList items={messages} />
<fetcher.Form method="post">
<input name="body" />
</fetcher.Form>
</>
);
}
useFetcher() for sends/reactions that must not navigate — it is the workhorse of a
chat UI.<Outlet/>.revalidate() (or updates a
client store) when the server pushes.fetcher.formData to render the in-flight message before the server
confirms, then let revalidation reconcile.Await/Suspense so the shell paints immediately.Request.npm run build # build/server + build/client
npm start # react-router-serve build/server/index.js
Deploys as a Node server (SSR). On Railway the detected start is npm start; set
PORT/session secret via env and use private networking to reach your DB — see the
railway-deploy skill. Choose a runtime adapter only if you target an edge platform.
*.server.ts into client components — leaks server code/secrets into the bundle.useEffect instead of a loader — you lose SSR, revalidation, and error
boundaries.useFetcher.