AGENTS.md

You are an expert in JavaScript, Rsbuild, and web application development. You write maintainable, performant, and accessible code.

Tech Stack

React 19 + TypeScript — frontend framework and type system
Rsbuild 2 — build tool (wraps Rspack), configured in rsbuild.config.ts
React Router v7 (react-router) — client-side routing
antd 6 + @ant-design/icons 6 — UI component library and icon set
pnpm — package manager

Commands

pnpm run dev - Start the dev server (auto-opens http://localhost:3000)
pnpm run build - Build the app for production (output: dist/)
pnpm run preview - Preview the production build locally
pnpm run lint - Lint TypeScript/TSX files with ESLint
pnpm run format - Format all files with Prettier

Project Structure

src/
  index.tsx          # App entry point — mounts React root to #root
  App.tsx            # Root component — renders <RouterProvider>
  App.css            # Root component styles
  router.tsx         # Route config (createBrowserRouter)
  env.d.ts           # Rsbuild environment type declarations
  layouts/
    RootLayout.tsx   # Root layout with nav links and <Outlet />
  pages/
    Home.tsx         # "/" index page
    About.tsx        # "/about" page
    NotFound.tsx     # "*" catch-all 404 page
public/
  favicon.png
rsbuild.config.ts  # Build configuration
eslint.config.mjs  # ESLint flat config (TS/TSX only, dist/ ignored)
tsconfig.json

Routing

Uses React Router v7 (react-router) with createBrowserRouter.

Route config lives in src/router.tsx
RootLayout wraps all routes — add shared nav/header/footer there
Add new pages under src/pages/, register them in src/router.tsx

TypeScript Configuration

noUnusedLocals and noUnusedParameters are enabled — unused variables/parameters are errors
verbatimModuleSyntax is enabled — type-only imports must use import type
moduleResolution: "bundler" — use bundler-style module resolution

Code Style

Single quotes (singleQuote: true in .prettierrc)
ESLint applies to **/*.{ts,tsx} only, with react-hooks and react-refresh plugins enabled

UI Components (antd)

Import components directly from antd, icons from @ant-design/icons — tree-shaking is automatic

To customize the theme, wrap the app with ConfigProvider in App.tsx:

import { ConfigProvider } from 'antd';
<ConfigProvider theme={{ token: { colorPrimary: '#00b96b' } }}>
  <RouterProvider router={router} />
</ConfigProvider>

Docs

Rsbuild: https://rsbuild.rs/llms.txt
Rspack: https://rspack.rs/llms.txt
antd v6 完整文档（中文）: https://ant.design/llms-full-cn.txt
antd v6 组件单页（中文）: https://ant.design/components/{组件名}-cn.md（如 button-cn.md）

2.8 KiB Raw Blame History Unescape Escape