菜单
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.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/Sidiora-Labs/centra-llm-agents --skill react-router-framework命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
| 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 | Centra AI |
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 (
);
}
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.