引入成熟开发经验作为AI生成前端代码规则：Next.js 14 开发提示词、Swift与SwiftUI开发提示词

适合作为 Cursor 、Windsurf 、Cline 等AI IDE 工具规范化生成前端项目代码。这类工具虽然生成完整项目代码能力十分强大，但缺乏基本约束会导致大量无效的tokens消耗，特别是生成前端项目时，因为没有约束基本开发框架，默认的前端页面生成效果低于 bolt 、v0.dev 一类的工具。

此时引入成熟的技术框架和基本约束，可以在较少步骤和tokens消耗前提下更好的生成前端项目代码。

Next.js 14 开发规则原文

# Rules for Next.js 14 Development

## General Guidelines

1. Use Next.js 14 with TypeScript and Tailwind CSS for optimal developer experience and type safety.
2. Use `bun` for all package installations and management.
3. Implement the App Router, which is the recommended routing system for Next.js 14.
4. Utilize Server Components by default, using Client Components only when necessary for interactivity or client-side state.
5. Leverage Server Actions for handling data mutations and form submissions.
6. Implement proper caching strategies using Next.js built-in caching mechanisms.
7. Ensure all components and pages are accessible, following WCAG guidelines.
8. Use environment variables for configuration following Next.js conventions.
9. Implement performance optimizations such as code splitting, lazy loading, and parallel data fetching where appropriate.
10. Provide clear, concise comments explaining complex logic or design decisions.

## Code Structure and Syntax

1. Use the `app` directory for all components and pages.
2. Implement the following file conventions in the `app` directory:
- `layout.tsx`: For shared UI across multiple pages
- `page.tsx`: For unique page content
- `loading.tsx`: For loading UI
- `error.tsx`: For error handling UI
- `not-found.tsx`: For 404 pages
3. Use Server Components by default. Add the `'use client'` directive only when creating Client Components.
4. Define components using arrow function syntax with TypeScript:

```tsx
import { FC } from 'react';

interface ComponentProps {
// Props definition
}

const Component: FC<ComponentProps> = ({ prop1, prop2 }) => {
// Component logic
};

export default Component;

```

5. For page components, use default exports:

```tsx
export default function Page() {
// Page component logic
}

```

6. If explicit typing is needed, prefer `React.FC` or `React.ReactNode`:

```tsx
import React from 'react';

const ComponentName: React.FC = () => {
// Component logic
};

// OR

const ComponentName = (): React.ReactNode => {
// Component logic
};

```

## Routing and Navigation

1. Implement nested routing using folder structure in the `app` directory.
2. Use the `<Link>` component from `next/link` for client-side navigation:

```tsx
import Link from 'next/link';

<Link href="/about">About</Link>

```

3. Implement dynamic routes using folder names with square brackets (e.g., `[id]`).
4. Use `generateStaticParams` for generating static paths in dynamic routes.

## Data Fetching and API Routes

1. Use Server Components and the `fetch` API for data fetching, leveraging Next.js automatic request deduplication:

```tsx
async function getData() {
const res = await fetch('<https://api.example.com/data>', { next: { revalidate: 3600 } });
if (!res.ok) throw new Error('Failed to fetch data');
return res.json();
}

export default async function Page() {
const data = await getData();
// Render component using data
}

```

2. Implement Server Actions for data mutations:

```tsx
'use server';

import { revalidatePath } from 'next/cache';

export async function updateData(formData: FormData) {
// Update data in your database
revalidatePath('/data');
}

```

3. Use route handlers (route.ts) for API routes in the App Router.
4. Implement Static Site Generation (SSG) and Server-Side Rendering (SSR) using App Router conventions when appropriate.

## State Management and Interactivity

1. Use Server Actions for form submissions and data mutations:

```tsx
import { updateData } from './actions';

export default function Form() {
return (
<form action={updateData}>
<input type="text" name="data" />
<button type="submit">Update</button>
</form>
);
}

```

2. Implement React hooks for client-side state management when necessary.
3. Use the `useState` and `useEffect` hooks in Client Components for local state and side effects.

## Styling

1. Use Tailwind CSS classes exclusively for styling. Avoid inline styles:

```tsx
<div className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
{/* Component content */}
</div>

```

2. Create custom Tailwind classes in the `tailwind.config.js` file for reusable styles.
3. Use CSS Modules for component-specific styles when needed.

## Performance Optimization

1. Implement automatic static optimization for eligible pages.
2. Use dynamic imports for code splitting:

```tsx
import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('../components/DynamicComponent'));

```

3. Utilize the Image component from `next/image` for automatic image optimization:

```tsx
import Image from 'next/image';

<Image src="/image.jpg" alt="Description" width={500} height={300} />

```

4. Implement proper caching strategies using the Data Cache and Full Route Cache.
5. Use Next.js 14's built-in caching and revalidation features for optimal performance:

```tsx
import { unstable_cache } from 'next/cache';

const getCachedUser = unstable_cache(
async (id: string) => getUser(id),
['user-cache'],
{ revalidate: 3600 } // Revalidate every hour
);

```

6. Use on-demand revalidation when appropriate:

```tsx
import { revalidatePath, revalidateTag } from 'next/cache';

export async function updateData() {
// Update data in your database
revalidatePath('/data'); // Revalidate a specific path
revalidateTag('data-tag'); // Revalidate all entries with this tag
}

```

7. Implement parallel data fetching for improved performance:

```tsx
async function ParallelDataFetch() {
const dataPromise = fetch('<https://api.example.com/data>');
const userPromise = fetch('<https://api.example.com/user>');

const [data, user] = await Promise.all([
dataPromise.then(res => res.json()),
userPromise.then(res => res.json())
]);

return { data, user };
}

```

## Error Handling and Loading States

1. Create error.tsx files for error boundaries:

```tsx
'use client';

export default function Error({
error,
reset,
}: {
error: Error & { digest?: string };
reset: () => void;
}) {
return (
<div>
<h2>Something went wrong!</h2>
<button onClick={() => reset()}>Try again</button>
</div>
);
}

```

2. Implement loading.tsx files for managing loading states.
3. Use React Suspense for more granular loading states:

```tsx
import { Suspense } from 'react';

export default function Page() {
return (
<Suspense fallback={<Loading />}>
<SomeComponent />
</Suspense>
);
}

```

## SEO and Metadata

1. Use the Metadata API for SEO optimization:

```tsx
import type { Metadata } from 'next';

export const metadata: Metadata = {
title: 'Page Title',
description: 'Page description',
};

```

2. Implement dynamic metadata using generateMetadata for pages with dynamic content.

## Composer Mode-Specific Guidelines

1. When using Composer mode, provide clear, natural language descriptions of desired changes or additions.
2. For multi-file operations, specify the files involved and their relationships.
3. When requesting code generation, provide context about the desired functionality and how it fits into the existing project structure.
4. For refactoring tasks, describe the current code structure and the desired outcome.
5. When addressing errors, provide details about the error message and the surrounding code context.

Remember to adapt these rules based on specific project requirements and personal preferences. Always prioritize clean, efficient, and maintainable code that adheres to Next.js 14 best practices.

Next.js 14 开发规则译文

# Next.js 14 开发规则

## 通用指南

1. 使用 Next.js 14 搭配 TypeScript 和 Tailwind CSS，以获得最佳的开发体验和类型安全性。
2. 使用 `bun` 进行所有包的安装和管理。
3. 实现 App Router，这是 Next.js 14 推荐的路由系统。
4. 默认使用服务端组件（Server Components），仅在需要交互或客户端状态时使用客户端组件（Client Components）。
5. 利用服务端操作（Server Actions）处理数据变更和表单提交。
6. 使用 Next.js 内置的缓存机制实施合适的缓存策略。
7. 确保所有组件和页面符合 WCAG 指南的可访问性标准。
8. 遵循 Next.js 的惯例使用环境变量进行配置。
9. 实现性能优化，例如代码分割、懒加载和并行数据获取。
10. 为复杂逻辑或设计决策提供清晰简洁的注释。

## 代码结构与语法

1. 使用 `app` 目录存放所有组件和页面。
2. 在 `app` 目录中遵循以下文件命名约定：
- `layout.tsx`：用于多个页面共享的 UI
- `page.tsx`：用于独特页面内容
- `loading.tsx`：用于加载中的 UI
- `error.tsx`：用于错误处理的 UI
- `not-found.tsx`：用于 404 页面
3. 默认使用服务端组件。仅在创建客户端组件时添加 `'use client'` 指令。
4. 使用 TypeScript 的箭头函数语法定义组件：

```tsx
import { FC } from 'react';

interface ComponentProps {
// 属性定义
}

const Component: FC<ComponentProps> = ({ prop1, prop2 }) => {
// 组件逻辑
};

export default Component;
```

5. 对于页面组件，使用默认导出：

```tsx
export default function Page() {
// 页面组件逻辑
}
```

6. 如果需要显式类型，优先使用 `React.FC` 或 `React.ReactNode`：

```tsx
import React from 'react';

const ComponentName: React.FC = () => {
// 组件逻辑
};

// 或

const ComponentName = (): React.ReactNode => {
// 组件逻辑
};
```

## 路由与导航

1. 在 `app` 目录中通过文件夹结构实现嵌套路由。
2. 使用 `next/link` 提供的 `<Link>` 组件进行客户端导航：

```tsx
import Link from 'next/link';

<Link href="/about">关于我们</Link>
```

3. 使用带有方括号的文件夹名称（如 `[id]`）实现动态路由。
4. 使用 `generateStaticParams` 生成动态路由的静态路径。

## 数据获取与 API 路由

1. 使用服务端组件和 `fetch` API 获取数据，利用 Next.js 的自动请求去重功能：

```tsx
async function getData() {
const res = await fetch('<https://api.example.com/data>', { next: { revalidate: 3600 } });
if (!res.ok) throw new Error('数据获取失败');
return res.json();
}

export default async function Page() {
const data = await getData();
// 使用数据渲染组件
}
```

2. 使用服务端操作处理数据变更：

```tsx
'use server';

import { revalidatePath } from 'next/cache';

export async function updateData(formData: FormData) {
// 更新数据库中的数据
revalidatePath('/data');
}
```

3. 在 App Router 中使用路由处理程序（route.ts）实现 API 路由。
4. 在适当情况下使用 App Router 约定实现静态站点生成（SSG）和服务端渲染（SSR）。

## 状态管理与交互

1. 使用服务端操作处理表单提交和数据变更：

```tsx
import { updateData } from './actions';

export default function Form() {
return (
<form action={updateData}>
<input type="text" name="data" />
<button type="submit">更新</button>
</form>
);
}
```

2. 在需要时使用 React 钩子进行客户端状态管理。
3. 在客户端组件中使用 `useState` 和 `useEffect` 钩子管理本地状态和副作用。

## 样式

1. 使用 Tailwind CSS 类进行样式设置，避免使用内联样式：

```tsx
<div className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
{/* 组件内容 */}
</div>
```

2. 在 `tailwind.config.js` 文件中创建自定义 Tailwind 类以实现可复用样式。
3. 在需要时使用 CSS 模块为特定组件设置样式。

## 性能优化

1. 对符合条件的页面实现自动静态优化。
2. 使用动态导入实现代码分割：

```tsx
import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('../components/DynamicComponent'));
```

3. 使用 `next/image` 的 Image 组件实现自动图像优化：

```tsx
import Image from 'next/image';

<Image src="/image.jpg" alt="描述" width={500} height={300} />
```

4. 使用数据缓存和完整路由缓存实现合适的缓存策略。
5. 使用 Next.js 14 内置的缓存和重新验证功能提升性能：

```tsx
import { unstable_cache } from 'next/cache';

const getCachedUser = unstable_cache(
async (id: string) => getUser(id),
['user-cache'],
{ revalidate: 3600 } // 每小时重新验证
);
```

6. 在适当情况下使用按需重新验证：

```tsx
import { revalidatePath, revalidateTag } from 'next/cache';

export async function updateData() {
// 更新数据库中的数据
revalidatePath('/data'); // 重新验证特定路径
revalidateTag('data-tag'); // 重新验证所有带此标签的条目
}
```

7. 实现并行数据获取以提高性能：

```tsx
async function ParallelDataFetch() {
const dataPromise = fetch('<https://api.example.com/data>');
const userPromise = fetch('<https://api.example.com/user>');

const [data, user] = await Promise.all([
dataPromise.then(res => res.json()),
userPromise.then(res => res.json())
]);

return { data, user };
}
```

## 错误处理与加载状态

1. 创建 error.tsx 文件作为错误边界：

```tsx
'use client';

export default function Error({
error,
reset,
}: {
error: Error & { digest?: string };
reset: () => void;
}) {
return (
<div>
<h2>发生错误！</h2>
<button onClick={() => reset()}>重试</button>
</div>
);
}
```

2. 创建 loading.tsx 文件管理加载状态。
3. 使用 React Suspense 提供更细粒度的加载状态：

```tsx
import { Suspense } from 'react';

export default function Page() {
return (
<Suspense fallback={<Loading />}>
<SomeComponent />
</Suspense>
);
}
```

## SEO 与元数据

1. 使用 Metadata API 进行 SEO 优化：

```tsx
import type { Metadata } from 'next';

export const metadata: Metadata = {
title: '页面标题',
description: '页面描述',
};
```

2. 对于动态内容页面，使用 generateMetadata 实现动态元数据。

## Composer 模式特定指南

1. 在使用 Composer 模式时，提供清晰、自然的语言描述所需的更改或新增内容。
2. 对于多文件操作，明确涉及的文件及其关系。
3. 在请求代码生成时，提供关于所需功能及其在现有项目结构中适配方式的上下文。
4. 对于重构任务，描述当前代码结构和期望结果。
5. 在解决错误时，提供有关错误信息及其上下文的详细信息。

记住，根据具体项目需求和个人偏好调整这些规则。始终优先编写符合 Next.js 14 最佳实践的清晰、高效和可维护的代码。

Swift 与 SwiftUI 开发规则原文

# SwiftUI Best Practices for iOS App Development

When generating code, finding bugs, or optimizing SwiftUI projects, follow these guidelines:

## General Guidelines

- You are an expert AI programming assistant focused on producing clear, readable SwiftUI code.
- Always use the latest version of SwiftUI and Swift (as of August/September 2024), and be familiar with the latest features and best practices.
- Provide accurate, factual, thoughtful answers, and excel at reasoning.
- Follow the user's requirements carefully & to the letter.
- Think step-by-step - describe your plan for what to build in pseudocode, written out in great detail.
- Always confirm your understanding before writing code.
- Write correct, up-to-date, bug-free, fully functional, working, secure, performant, and efficient code.
- Prioritize readability over performance.
- Fully implement all requested functionality.
- Leave NO TODOs, placeholders, or missing pieces.
- Be concise. Minimize any other prose.
- If you think there might not be a correct answer, say so. If you do not know the

## 1. State Management

- Use appropriate property wrappers and macros:
- Annotate view models with `@Observable`, e.g. `@Observable final class MyModel`.
- Do not use @State in the SwiftUI View for view model observation. Instead, use `let model: MyModel`.
- For reference type state shared with a child view, pass the dependency to the constructor of the child view.
- For value type state shared with a child view, use SwiftUI bindings if and only if the child needs write access to the state.
- For value type state shared with a child view, pass the value if the child view only needs read access to the state.
- Use an `@Environment` for state that should be shared throughout the entire app, or large pieces of the app.
- Use `@State` only for local state that is managed by the view itself.

## 2. Performance Optimization

- Implement lazy loading for large lists or grids using `LazyVStack`, `LazyHStack`, or `LazyVGrid`.
- Optimize ForEach loops by using stable identifiers.

## 3. Reusable Components

- Implement custom view modifiers for shared styling and behavior.
- Use extensions to add reusable functionality to existing types.

## 4. Accessibility

- Add accessibility modifiers to all UI elements.
- Support Dynamic Type for text scaling.
- Provide clear accessibility labels and hints.

## 5. SwiftUI Lifecycle

- Use `@main` and `App` protocol for the app's entry point.
- Implement `Scene`s for managing app structure.
- Use appropriate view lifecycle methods like `onAppear` and `onDisappear`.

## 6. Data Flow

- Use the Observation framework (`@Observable`, `@State`, and `@Binding`) to build reactive views.
- Implement proper error handling and propagation.

## 7. Testing

- Write unit tests for ViewModels and business logic in the UnitTests folder.
- Implement UI tests for critical user flows in the UITests folder.
- Use Preview providers for rapid UI iteration and testing.

## 8. SwiftUI-specific Patterns

- Use `@Binding` for two-way data flow between parent and child views.
- Implement custom `PreferenceKey`s for child-to-parent communication.
- Utilize `@Environment` for dependency injection.

## 9. Code Style and Formatting

- Follow Swift style guidelines for naming conventions and code structure.
- Use SwiftLint or similar tools to enforce consistent code style.

When generating or reviewing code, ensure adherence to these best practices. Identify and fix any violations to maintain high-quality, performant, and maintainable SwiftUI code.

Remember, the best structure is one that works well for your specific project and team. Feel free to adapt this structure as your project grows and your needs evolve.

Swift 与 SwiftUI 开发规则译文

# SwiftUI 开发 iOS 应用的最佳实践

在生成代码、查找错误或优化 SwiftUI 项目时，请遵循以下指南：

## 通用指南

- 你是一名专注于生成清晰、可读的 SwiftUI 代码的专业 AI 编程助手。
- 始终使用最新版本的 SwiftUI 和 Swift（截至 2024 年 8 月/9 月），并熟悉最新的功能和最佳实践。
- 提供准确、基于事实、经过深思熟虑的回答，并擅长推理。
- 严格遵守用户的需求。
- 按步骤思考——用伪代码详细描述构建计划。
- 在编写代码之前，始终确认你对要求的理解。
- 编写正确、最新、无错误、完全功能性的、安全的、高效的代码。
- 优先考虑代码的可读性，而非性能。
- 完整实现所有请求的功能。
- 不留下 TODOs、占位符或缺失的部分。
- 保持简洁，尽量减少其他无关的文字。
- 如果你认为可能没有正确答案，请说明。如果你不知道答案，也要直言。

## 1. 状态管理

- 使用适当的属性包装器和宏：
- 使用 `@Observable` 标注视图模型，例如 `@Observable final class MyModel`。
- 不要在 SwiftUI View 中使用 `@State` 观察视图模型。应使用 `let model: MyModel`。
- 对于与子视图共享的引用类型状态，将依赖项传递给子视图的构造函数。
- 对于与子视图共享的值类型状态，如果子视图需要写入权限，使用 SwiftUI 的绑定；如果仅需要读取权限，传递值即可。
- 对于需要整个应用或大部分应用共享的状态，使用 `@Environment`。
- 仅将 `@State` 用于视图本身管理的本地状态。

## 2. 性能优化

- 使用 `LazyVStack`、`LazyHStack` 或 `LazyVGrid` 实现大列表或网格的惰性加载。
- 使用稳定的标识符优化 ForEach 循环。

## 3. 可复用组件

- 实现自定义视图修饰符以共享样式和行为。
- 使用扩展为现有类型添加可复用功能。

## 4. 无障碍访问

- 为所有 UI 元素添加无障碍修饰符。
- 支持文本缩放的动态字体功能。
- 提供清晰的无障碍标签和提示。

## 5. SwiftUI 生命周期

- 使用 `@main` 和 `App` 协议作为应用的入口点。
- 使用 `Scene` 管理应用结构。
- 使用合适的视图生命周期方法，例如 `onAppear` 和 `onDisappear`。

## 6. 数据流

- 使用 Observation 框架（`@Observable`、`@State` 和 `@Binding`）构建响应式视图。
- 实现适当的错误处理和传播。

## 7. 测试

- 在 UnitTests 文件夹中为视图模型和业务逻辑编写单元测试。
- 在 UITests 文件夹中为关键用户流程实现 UI 测试。
- 使用 Preview 提供程序进行快速的 UI 迭代和测试。

## 8. SwiftUI 特定模式

- 使用 `@Binding` 实现父视图与子视图之间的双向数据流。
- 实现自定义 `PreferenceKey` 用于子到父的通信。
- 利用 `@Environment` 实现依赖注入。

## 9. 代码风格和格式化

- 遵循 Swift 的命名规范和代码结构指南。
- 使用 SwiftLint 或类似工具强制执行一致的代码风格。

在生成或审查代码时，确保遵循这些最佳实践。识别并修复任何违反之处，以维护高质量、高性能且易于维护的 SwiftUI 代码。

记住，最佳的结构是能够适应特定项目和团队需求的结构。随着项目的发展和需求的变化，可以灵活调整这些结构。