前端开发规则
前端开发相关的 Cursor AI 编程规则集合。
Angular
| 规则 | 说明 |
|---|---|
| angular-ts-guide | 你是一名使用 TypeScript、Angular 18 和 Jest 的 Angular 专家程序员，专注于编写清晰、可读的代码。 |
| angular-typescript | 你是一位专业的 Angular 程序员，使用 TypeScript、Angular 18 和 Jest，专注于编写清晰、可读的代码。 |
| angular-typescript-guide | 你是一位使用 TypeScript、Angular 18 和 Jest 的专家级 Angular 程序员，专注于编写清晰、可读的代码。 |
Chrome 扩展
| 规则 | 说明 |
|---|---|
| chrome-extension-dev-js-typescript | 你是一位 Chrome 扩展开发专家，精通 JavaScript、TypeScript、HTML、CSS、Shadcn UI、Radix UI、Tailwind 和 Web API。 |
micro-frontend
| 规则 | 说明 |
|---|---|
| micro-frontend | 微前端架构 .cursorrules 提示文件 |
React
| 规则 | 说明 |
|---|---|
| apollo-graphql | 你是 React、TypeScript、GraphQL 和 Apollo Client 方面的专家。 |
| chakra-ui | 你是 React、TypeScript 和 Chakra UI 方面的专家。 |
| mobx | 你是 React、TypeScript 和 MobX 状态管理方面的专家。 |
| nextjs-14-seo | 你是 Next.js 14、React、TypeScript 和 SEO 优化方面的专家。 |
| nextjs-basic | 你是 Next.js、React、TypeScript 和现代 Web 开发方面的专家。 |
| nextjs-react-ts | 你是 Next.js 14、React、TypeScript 和现代 Web 开发方面的专家。 |
| nextjs-supabase | 你是 Next.js、React、TypeScript 和 Supabase 后端服务方面的专家。 |
| nextjs-tailwind | 你是 Next.js、React、TypeScript 和 Tailwind CSS 方面的专家。 |
| nextjs-typescript | 你是 TypeScript、Node.js、Next.js App Router、Drizzle ORM、React、Daisy UI 和 Tailwind 的专家。始终使用 bun 作为包管理器（而不是 npm） |
| nextjs-ui | 你是 Next.js、React 和现代 UI 开发方面的专家。 |
| react-components | 你是 React、TypeScript 和组件设计方面的专家。 |
| react-query | // React + React Query .cursorrules (React + React Query .cursorrules) |
| react-typescript | 你是 React 和 TypeScript 方面的专家，专注于生成干净和可读的代码。 |
| styled-components | 你是 React、TypeScript 和 Styled Components 方面的专家。 |
SolidJS
| 规则 | 说明 |
|---|---|
| solidjs-basic-guide | // Solid.js 基础设置 .cursorrules |
Svelte
| 规则 | 说明 |
|---|---|
| sveltekit-tailwind-typescript-guide | Modible 项目标准 |
TypeScript
| 规则 | 说明 |
|---|---|
| axios | 你是 TypeScript、Axios HTTP 客户端和 API 集成方面的专家。 |
| conventions | 你是 TypeScript 和现代 Web 开发方面的专家。 |
| vite-tailwind | 你是 TypeScript、Vite、Vue.js 和 Tailwind CSS 方面的专家。 |
Vue
| 规则 | 说明 |
|---|---|
| composition-api | // Vue 3 Composition API .cursorrules |
| nuxt3 | 你是高级前端开发人员，也是 Vue 3、Nuxt 3、JavaScript、TypeScript、TailwindCSS、HTML 和 CSS 的专家。你思维缜密，给出细致入微的答案，在推理方面非常出色。你仔细提供准确、事实性、深思熟虑的答案，在推理方面是天才。 |
使用方法
- 点击规则链接，在 GitHub 上查看
.cursorrules文件 - 复制内容到项目根目录的
.cursorrules文件 - 在 Cursor AI 中启用项目规则
- 开始编码，AI 将遵循规则生成代码