Loading...
; + if (error) returnError :({error.message}
; + + return ( +-
+ {data.todos.map(({ id, text, completed }) => (
+
- + {text} + + ))} +
+
+ );
+ }
+
+ return this.props.children;
+ }
+ }
+
+ export default ErrorBoundary;
+
+ // 在应用中使用
+ // Something went wrong.
+
+ {this.state.error && this.state.error.toString()}
+
+ {this.state.errorInfo.componentStack} +
+ + {this.state.errorInfo.componentStack} +
Loading...
; + if (error) returnError: {error.message}
; + + return ( +
+
+ );
+ }
+ ```
+ - **手动类型定义（不推荐）**：在无法使用代码生成工具的情况下，可以手动定义 GraphQL 响应的 TypeScript 接口，但这容易出错且难以维护。
diff --git a/rules/frontend/react/apollo-graphql/react-functional-components-preference.mdc b/rules/frontend/react/apollo-graphql/react-functional-components-preference.mdc
index ddb19df..66414c3 100644
--- a/rules/frontend/react/apollo-graphql/react-functional-components-preference.mdc
+++ b/rules/frontend/react/apollo-graphql/react-functional-components-preference.mdc
@@ -1,5 +1,33 @@
---
-description: 在 React 组件中强制使用带有 hooks 的函数式组件。
+description: "在 React 组件中强制使用带有 hooks 的函数式组件"
globs: src/components/**/*.jsx
---
-- 始终使用带有 hooks 的函数式组件而不是类组件。
+- **始终使用带有 hooks 的函数式组件而不是类组件**：
+ - **现代化开发**：优先使用 React Hooks（如 `useState`, `useEffect`, `useContext`, `useReducer`, `useCallback`, `useMemo` 等）进行状态管理和副作用处理，以符合 React 官方推荐的现代化开发范式。
+ - **代码简洁性**：函数式组件通常比类组件更简洁，更易于阅读和理解，尤其是在处理逻辑复用时。
+ - **逻辑复用**：通过自定义 Hooks，可以方便地在不同组件之间共享状态逻辑，避免了高阶组件（HOCs）和渲染属性（Render Props）带来的嵌套问题。
+ - **性能优化**：结合 `useCallback` 和 `useMemo` 等 Hooks，可以有效地进行性能优化，避免不必要的渲染。
+ - **可测试性**：函数式组件和 Hooks 更容易进行单元测试。
+ - **示例**：
+ ```javascript
+ // 函数式组件示例
+ import React, { useState, useEffect } from 'react';
+
+ function Counter() {
+ const [count, setCount] = useState(0);
+
+ useEffect(() => {
+ document.title = `You clicked ${count} times`;
+ }, [count]);
+
+ return (
+ {data?.user?.name}
+ID: {data?.user?.id}
+
+
+ );
+ }
+ ```
+ - **特殊情况**：仅在极少数需要使用 `getSnapshotBeforeUpdate` 或 `componentDidCatch` 等生命周期方法时，才考虑使用类组件，但大多数场景下 Hooks 都能提供替代方案（如错误边界）。
diff --git a/rules/frontend/react/chakra-ui/chakra-ui---accessibility-features.mdc b/rules/frontend/react/chakra-ui/chakra-ui---accessibility-features.mdc
index 4ddc037..75a6f8f 100644
--- a/rules/frontend/react/chakra-ui/chakra-ui---accessibility-features.mdc
+++ b/rules/frontend/react/chakra-ui/chakra-ui---accessibility-features.mdc
@@ -1,5 +1,27 @@
---
-description: 使用 Chakra UI 构建的 React 组件的可访问性功能。
+description: "使用 Chakra UI 构建的 React 组件的可访问性功能"
globs: src/**/*.*
---
-- 利用 Chakra UI 的内置可访问性功能
+- **利用 Chakra UI 的内置可访问性功能**：
+ - **语义化 HTML**：优先使用 Chakra UI 提供的组件，它们通常会渲染出语义化的 HTML 元素，有助于提高可访问性。
+ - **WAI-ARIA 支持**：Chakra UI 组件内置了 WAI-ARIA 属性，如 `aria-label`、`aria-labelledby`、`aria-describedby` 等，确保辅助技术能够正确解释组件。
+ - **键盘导航**：所有交互式组件都应支持键盘导航，确保用户可以通过键盘（Tab、Enter、Space 等）进行操作。
+ - **焦点管理**：在模态框、抽屉、菜单等组件中，确保焦点管理正确，例如打开时将焦点移到内容区域，关闭时将焦点返回到触发元素。
+ - **颜色对比度**：在设计自定义主题或使用颜色时，确保文本和背景之间有足够高的颜色对比度，以满足 WCAG 2.1 AA 级标准。
+ - **可访问性属性定制**：在必要时，可以通过 `aria-` 和 `data-` 属性来自定义组件的可访问性行为。
+ - **示例**：
+ ```jsx
+ import { Button } from '@chakra-ui/react';
+
+ function MyAccessibleButton() {
+ return (
+
+ );
+ }
+ ```
+ - **测试**：在开发过程中，使用可访问性测试工具（如 Lighthouse、axe-core）和屏幕阅读器（如 NVDA、JAWS）进行测试，确保应用的可访问性。
diff --git a/rules/frontend/react/chakra-ui/chakra-ui---component-composition.mdc b/rules/frontend/react/chakra-ui/chakra-ui---component-composition.mdc
index 9f4dfc0..610e277 100644
--- a/rules/frontend/react/chakra-ui/chakra-ui---component-composition.mdc
+++ b/rules/frontend/react/chakra-ui/chakra-ui---component-composition.mdc
@@ -1,5 +1,49 @@
---
-description: 确保使用 Chakra UI 组件以可组合的方式构建 React 组件。
+description: "确保使用 Chakra UI 组件以可组合的方式构建 React 组件"
globs: src/components/**/*.*
---
-- 使用 Chakra UI 实现适当的组件组合
+- **使用 Chakra UI 实现适当的组件组合**：
+ - **利用 `as` prop**：Chakra UI 组件支持 `as` prop，允许将组件渲染为不同的 HTML 元素或 React 组件，这在构建灵活的 UI 时非常有用。
+ - **扩展现有组件**：通过直接传递 Chakra UI 组件的 props 来扩展其样式和行为，而不是重新创建组件。
+ - **自定义组件的封装**：将复杂的 UI 逻辑和样式封装在自定义组件中，并使用 `Box`、`Flex`、`Stack` 等布局组件进行组合，保持组件的单一职责和可复用性。
+ - **使用 `forwardRef`**：当自定义组件需要转发 ref 时，使用 `forwardRef` 确保其与 Chakra UI 组件的兼容性。
+ - **示例**：
+ ```jsx
+ import { Box, Flex, Text, Button } from '@chakra-ui/react';
+
+ function Card({ title, description, buttonText, ...rest }) {
+ return (
+ You clicked {count} times
+ +
+
+ );
+ });
+ ```
+ - **测试友好**：依赖注入使得在单元测试中替换或模拟 store 变得容易，提高了测试的独立性和效率。
+ - **避免全局变量**：避免将 store 实例作为全局变量直接导入，这会降低模块的独立性和可测试性。
diff --git a/rules/frontend/react/mobx/mobx-devtools.mdc b/rules/frontend/react/mobx/mobx-devtools.mdc
index 254c6f1..53e5889 100644
--- a/rules/frontend/react/mobx/mobx-devtools.mdc
+++ b/rules/frontend/react/mobx/mobx-devtools.mdc
@@ -1,5 +1,46 @@
---
-description: 利用 MobX DevTools 调试 MobX 应用程序。
+description: "利用 MobX DevTools 调试 MobX 应用程序"
globs: src/**/*.ts
---
-- 利用 MobX DevTools 进行调试。
+- **利用 MobX DevTools 调试 MobX 应用程序**：
+ - **安装**：
+ - 对于 Chrome 或 Firefox 浏览器，安装 MobX DevTools 扩展。
+ - 在项目中安装 `mobx-react-devtools` 包（通常仅在开发环境使用）：
+ ```bash
+ npm install --save-dev mobx-react-devtools
+ # 或者
+ yarn add --dev mobx-react-devtools
+ ```
+ - **集成**：
+ - 在应用程序的入口文件（如 `index.js` 或 `App.js`）中导入并渲染 `DevTools` 组件。
+ - 示例：
+ ```jsx
+ import React from 'react';
+ import ReactDOM from 'react-dom/client';
+ import App from './App';
+
+ // 仅在开发环境导入 DevTools
+ if (process.env.NODE_ENV === 'development') {
+ const DevTools = require('mobx-react-devtools').default;
+ ReactDOM.createRoot(document.getElementById('root')).render(
+ User Name: {userStore.name}
+ +
+ {todoStore.todos.map(todo => (
+
+ );
+ });
+
+ export default TodoList;
+ ```
+ - `useObserver` Hook 示例（适用于需要更细粒度控制渲染的场景）：
+ ```jsx
+ import React from 'react';
+ import { useObserver } from 'mobx-react-lite';
+ import { useStore } from '../stores';
+
+ const TodoItem = ({ todo }) => {
+ return useObserver(() => (
+ {todo.text}
+ ))}
+
+
+ );
+ });
+
+ export default UserProfile;
+ ```
+ - **`useObserver` Hook**：
+ - `useObserver` 是 `mobx-react-lite` 提供的另一个选择，它是一个 React Hook，允许你在函数式组件的内部定义一个响应式渲染块。
+ - 它适用于需要更细粒度控制渲染，或者只希望组件的某个部分响应 MobX 状态变化的场景。
+ - 示例：
+ ```jsx
+ import React from 'react';
+ import { useObserver } from 'mobx-react-lite';
+ import { useStore } from '../stores';
+
+ const ProductDisplay = ({ productId }) => {
+ const { productStore } = useStore();
+
+ return useObserver(() => {
+ const product = productStore.getProductById(productId);
+ if (!product) return {userStore.name}
+Email: {userStore.email}
+ +Loading...
;
+
+ return (
+
+
+ );
+ });
+ };
+
+ export default ProductDisplay;
+ ```
+ - **选择建议**：
+ - **优先使用 `observer` HOC**：对于大多数情况，直接使用 `observer` HOC 包裹整个函数式组件是更简洁和推荐的做法。它会自动处理组件内部所有可观察数据的响应式更新。
+ - **在特定场景使用 `useObserver` Hook**：当你需要在一个组件中，只有部分 UI 响应 MobX 状态变化，或者需要将响应式逻辑封装在自定义 Hook 中时，`useObserver` 提供了更大的灵活性。
+ - **性能**：两者在性能上都非常高效，因为 `mobx-react-lite` 实现了精确的响应式更新，只在实际观察到的数据发生变化时才触发渲染。
diff --git a/rules/frontend/react/mobx/react-general-preferences.mdc b/rules/frontend/react/mobx/react-general-preferences.mdc
index c1873f0..a076e8e 100644
--- a/rules/frontend/react/mobx/react-general-preferences.mdc
+++ b/rules/frontend/react/mobx/react-general-preferences.mdc
@@ -1,5 +1,43 @@
---
-description: 一般 React 偏好，优先使用带有 hooks 的函数式组件。
+description: "一般 React 偏好，优先使用带有 hooks 的函数式组件"
globs: src/**/*.tsx
---
-- 优先使用带有 hooks 的函数式组件。
+- **优先使用带有 Hooks 的函数式组件**：
+ - **现代化开发**：
+ - 函数式组件结合 Hooks 是 React 官方推荐的现代开发范式。它使得组件逻辑更清晰、可复用性更高，并且避免了类组件中 `this` 的复杂性。
+ - **代码简洁性**：
+ - Hooks 允许你在函数式组件中直接使用状态（`useState`）、生命周期（`useEffect`）和其他 React 特性，从而减少了样板代码，使组件更简洁。
+ - 示例：
+ ```jsx
+ import React, { useState, useEffect } from 'react';
+ import { observer } from 'mobx-react-lite';
+ import { useStore } from '../stores';
+
+ const Counter = observer(() => {
+ const [count, setCount] = useState(0);
+ const { appStore } = useStore();
+
+ useEffect(() => {
+ console.log('Component mounted or updated');
+ return () => console.log('Component unmounted');
+ }, []);
+
+ return (
+ {product.name}
+Price: ${product.price}
+Stock: {product.stock}
+
+
+ );
+ });
+
+ export default Counter;
+ ```
+ - **逻辑复用**：
+ - 自定义 Hooks 使得逻辑复用变得非常简单和直观，你可以将状态逻辑和副作用封装成可独立测试和复用的单元。
+ - **性能优化**：
+ - 结合 `React.memo`、`useCallback` 和 `useMemo` 等 Hooks，可以对函数式组件进行更细粒度的性能优化，避免不必要的重新渲染。
+ - **与 MobX 兼容性**：
+ - `mobx-react-lite` 库专门为函数式组件和 Hooks 优化，提供了 `observer` HOC 和 `useObserver` Hook，使得 MobX 状态管理在函数式组件中表现出色。
+ - **社区支持**：
+ - 随着 Hooks 的普及，越来越多的库和工具都优先支持函数式组件和 Hooks，这使得开发生态更加丰富和活跃。
diff --git a/rules/frontend/react/mobx/typescript-with-mobx.mdc b/rules/frontend/react/mobx/typescript-with-mobx.mdc
index 355eead..bead2b4 100644
--- a/rules/frontend/react/mobx/typescript-with-mobx.mdc
+++ b/rules/frontend/react/mobx/typescript-with-mobx.mdc
@@ -1,5 +1,75 @@
---
-description: 如何在 MobX 中使用 TypeScript 的说明。
+description: "如何在 MobX 中使用 TypeScript 的说明"
globs: src/**/*.ts
---
-- 对 MobX 使用 TypeScript 确保类型安全。
+- **对 MobX 使用 TypeScript 确保类型安全**：
+ - **安装必要的类型定义**：
+ - 对于 MobX 核心库和 `mobx-react-lite`，通常它们自带 TypeScript 类型定义。如果遇到类型错误，可能需要手动安装 `@types/mobx` 和 `@types/mobx-react-lite`（如果它们不是内置的）。
+ - **使用装饰器（Decorators）**：
+ - MobX 推荐使用装饰器 (`@observable`, `@action`, `@computed`) 来定义可观察状态、动作和计算值。在 TypeScript 中使用装饰器需要启用相应的编译器选项。
+ - 在 `tsconfig.json` 中启用：
+ ```json
+ {
+ "compilerOptions": {
+ "experimentalDecorators": true,
+ "emitDecoratorMetadata": true
+ }
+ }
+ ```
+ - 示例：
+ ```typescript
+ import { makeObservable, observable, action, computed } from 'mobx';
+
+ class UserStore {
+ @observable name: string = 'John Doe';
+ @observable age: number = 30;
+
+ constructor() {
+ makeObservable(this);
+ }
+
+ @action
+ setAge(newAge: number) {
+ this.age = newAge;
+ }
+
+ @computed
+ get isAdult() {
+ return this.age >= 18;
+ }
+ }
+ ```
+ - **`makeObservable` 或 `makeAutoObservable`**：
+ - 对于 TypeScript 项目，推荐在类的 `constructor` 中调用 `makeObservable(this)` 或 `makeAutoObservable(this)` 来明确地将类属性标记为可观察的。这比使用装饰器更现代，并且在某些环境中可能不需要额外的 Babel 配置。
+ - 示例（使用 `makeObservable`）：
+ ```typescript
+ import { makeObservable, observable, action, computed } from 'mobx';
+
+ class UserStore {
+ name: string = 'John Doe';
+ age: number = 30;
+
+ constructor() {
+ makeObservable(this, {
+ name: observable,
+ age: observable,
+ setAge: action,
+ isAdult: computed,
+ });
+ }
+
+ setAge(newAge: number) {
+ this.age = newAge;
+ }
+
+ get isAdult() {
+ return this.age >= 18;
+ }
+ }
+ ```
+ - **类型推断与显式类型**：
+ - TypeScript 能够很好地推断 MobX store 的类型，但在复杂场景下，显式地为属性、参数和返回值添加类型注解可以提高代码的可读性和健壮性。
+ - **接口和类型别名**：
+ - 定义清晰的接口（`interface`）或类型别名（`type`）来描述 MobX store 的状态结构和 action 的参数，有助于保持代码的一致性和可维护性。
+ - **与 React 组件结合**：
+ - 在 React 函数式组件中使用 `mobx-react-lite` 的 `observer` HOC 或 `useObserver` Hook 时，确保组件 props 和 MobX store 访问的类型正确。
diff --git a/rules/frontend/react/nextjs-14-seo/README.md b/rules/frontend/react/nextjs-14-seo/README.md
index ddf0ef9..d7f2903 100644
--- a/rules/frontend/react/nextjs-14-seo/README.md
+++ b/rules/frontend/react/nextjs-14-seo/README.md
@@ -4,7 +4,15 @@
## 你可以构建什么
-Next.js 14 设计到代码平台：一个允许用户上传流行格式设计文件的 Web 应用程序，平台分析这些文件后生成使用 TypeScript 和 Tailwind CSS 的完整 Next.js 14 应用程序。该应用将遵循最佳实践并确保代码模块化且可用于生产。AI 驱动的 Next.js 14 代码片段生成器：一个供开发人员输入设计描述或草图并获得使用 Tailwind CSS 的 Next.js 14 TypeScript 代码片段的工具，专注于创建服务器组件并确保 SEO 和性能优化。Next.js 14 代码审计服务：一个在线服务，接受现有的 Next.js TypeScript 项目并审计其是否符合 Next.js 14 和 React 最佳实践，在服务器端渲染、缓存、数据获取和组件化等方面提出改进建议。可视化代码到 Tailwind 转换器：一个帮助开发人员将传统 CSS 样式转换为 Tailwind CSS 类的工具。该应用将分析现有样式并通过直观的可视化界面提供等效的响应式 Tailwind CSS 配置。Next.js 14 教育平台：该平台将提供关于 Next.js 14 的交互式课程和教程，专注于使用 TypeScript 和 Tailwind CSS 构建应用程序。课程将涵盖状态管理、路由、SEO 优化和性能增强。Next.js 自动化 SEO 优化器：一个扫描 Next.js 项目的插件或 Web 服务，根据 Next.js 14 的元数据 API 建议元数据设置，以结构化和自动化的方式改善搜索引擎优化。Tailwind CSS 响应式检查器：一个在线工具，开发人员可以输入其 Tailwind CSS 代码并检查其设计在各种设备上是否响应式。该工具将根据最佳实践提供改进建议。基于组件的设计游乐场：一个交互式 Web 应用，允许用户使用 TypeScript 和 Tailwind CSS 创建可重用的 Next.js 14 组件，在各种应用程序布局中立即预览它们。该平台将强调基于组件的架构和高效的状态管理。Next.js 动态数据获取仪表板：一个提供仪表板的服务，用于设置和跟踪使用 Next.js 14 功能的高效数据获取策略，专注于缓存、流式传输和并行数据获取技术。Web 应用实时可访问性分析器：一个可访问性检查工具，评估 Next.js 应用程序的 ARIA 合规性和语义 HTML 使用情况，提供实时反馈和建议以增强 Web 可访问性。
+- **Next.js 14 设计到代码平台**：一个允许用户上传流行格式设计文件的 Web 应用程序，平台分析这些文件后生成使用 TypeScript 和 Tailwind CSS 的完整 Next.js 14 应用程序。该应用将遵循最佳实践并确保代码模块化且可用于生产。
+- **AI 驱动的 Next.js 14 代码片段生成器**：一个供开发人员输入设计描述或草图并获得使用 Tailwind CSS 的 Next.js 14 TypeScript 代码片段的工具，专注于创建服务器组件并确保 SEO 和性能优化。
+- **Next.js 14 代码审计服务**：一个在线服务，接受现有的 Next.js TypeScript 项目并审计其是否符合 Next.js 14 和 React 最佳实践，在服务器端渲染、缓存、数据获取和组件化等方面提出改进建议。- **可视化代码到 Tailwind 转换器**：一个帮助开发人员将传统 CSS 样式转换为 Tailwind CSS 类的工具。该应用将分析现有样式并通过直观的可视化界面提供等效的响应式 Tailwind CSS 配置。
+- **Next.js 14 教育平台**：该平台将提供关于 Next.js 14 的交互式课程和教程，专注于使用 TypeScript 和 Tailwind CSS 构建应用程序。课程将涵盖状态管理、路由、SEO 优化和性能增强。
+- **Next.js 自动化 SEO 优化器**：一个扫描 Next.js 项目的插件或 Web 服务，根据 Next.js 14 的元数据 API 建议元数据设置，以结构化和自动化的方式改善搜索引擎优化。
+- **Tailwind CSS 响应式检查器**：一个在线工具，开发人员可以输入其 Tailwind CSS 代码并检查其设计在各种设备上是否响应式。该工具将根据最佳实践提供改进建议。
+- **基于组件的设计游乐场**：一个交互式 Web 应用，允许用户使用 TypeScript 和 Tailwind CSS 创建可重用的 Next.js 14 组件，在各种应用程序布局中立即预览它们。该平台将强调基于组件的架构和高效的状态管理。
+- **Next.js 动态数据获取仪表板**：一个提供仪表板的服务，用于设置和跟踪使用 Next.js 14 功能的高效数据获取策略，专注于缓存、流式传输和并行数据获取技术。
+- **Web 应用实时可访问性分析器**：一个可访问性检查工具，评估 Next.js 应用程序的 ARIA 合规性和语义 HTML 使用情况，提供实时反馈和建议以增强 Web 可访问性。
## 优势
diff --git a/rules/frontend/react/nextjs-basic/README.md b/rules/frontend/react/nextjs-basic/README.md
index e14cc56..4a433f1 100644
--- a/rules/frontend/react/nextjs-basic/README.md
+++ b/rules/frontend/react/nextjs-basic/README.md
@@ -6,6 +6,24 @@
学习用交互式编码助手：使用指定技术栈的 Web 应用程序，为新开发人员提供交互式编码课程和练习，集成 LLM 进行实时反馈、解释和 TypeScript 逐步指导。它可以允许用户在浏览器中编写代码、接收反馈并查看实际示例。AI 驱动的代码审查工具：开发一个在线平台，开发人员可以提交代码进行 AI 辅助审查，使用 LLM。该工具将分析代码库，提供改进建议，检测潜在错误，并遵循最佳实践，从而提高代码质量和性能。自动化文档生成器：创建一个利用 LLM 从用 TypeScript 编写的代码库自动生成全面清晰文档的服务，解释每个函数的目的、参数和典型用例。AI 驱动的错误修复服务：一个开发人员可以提交带有错误的代码片段的平台，LLM 将分析并建议修复。与所述前端和后端的集成将确保平稳运行，直接向 TypeScript 代码建议更改。协作编码环境：使用 Next.js 构建实时协作编码平台，允许多个用户编辑同一代码库，通过 LLM 集成提供实时反馈和建议，类似于编码的 Google Docs。个性化学习路径生成器：一个根据开发人员当前技能水平和期望目标提供自定义学习路径的应用程序。它使用 LLM 定制课程内容，并在 TypeScript 中提供练习，通过 Next.js 中的交互式示例并行。代码优化 AI 聊天机器人：开发一个使用集成到 Web 应用中的 LLM 的聊天机器人，开发人员可以粘贴代码片段以获得优化技巧和重构建议，以提高效率和性能。AI 驱动的 UI/UX 改进顾问：一个接受现有 Next.js 项目并使用 LLM 建议 UI/UX 改进的服务，利用 Tailwind CSS 进行设计增强，使用 Lucide React 改善图标美学。定制教程创建器：一个根据代码库输入自动创建教程的工具，使用 LLM 为 Next.js 和 TypeScript 中的特定编程任务或应用功能形成可读的逐步指南。智能代码库搜索引擎：专门为代码库实现搜索引擎，允许开发人员用自然语言输入查询来定位相关代码段。它使用 LLM 理解查询的意图和上下文，提供准确结果。
+## 技术栈要求
+
+- **核心框架**: Next.js 14+(App Router模式)
+- **语言**: TypeScript 5.0+
+- **样式**: Tailwind CSS + CSS Modules
+- **UI组件**: shadcn/ui + Radix Primitives
+- **图标库**: Lucide React
+- **状态管理**: React Context + useReducer
+- **API交互**: tRPC + Zod验证
+
+## 编码规范
+
+1. **文件组织**: 遵循Next.js官方项目结构
+2. **类型定义**: 所有props和API响应必须定义TS接口
+3. **样式隔离**: 组件级CSS Modules
+4. **性能优化**: 自动代码分割+动态导入
+5. **安全实践**: 输入验证+CSRF防护
+
## 优势
diff --git a/rules/frontend/react/nextjs-basic/assistant-response-rules.mdc b/rules/frontend/react/nextjs-basic/assistant-response-rules.mdc
index eccd0d6..38fa3c9 100644
--- a/rules/frontend/react/nextjs-basic/assistant-response-rules.mdc
+++ b/rules/frontend/react/nextjs-basic/assistant-response-rules.mdc
@@ -1,14 +1,24 @@
---
-description: 定义助手应如何响应，包括其作为高级配对程序员的角色和响应所需格式，适用于所有文件。
+description: "定义助手应如何响应，包括其作为高级配对程序员的角色和响应所需格式，适用于所有文件"
globs: *
---
-- 你是用户的高级、好奇且聪明的配对程序员。让我们逐步进行：
-- 除非你只是回答一个快速问题，否则以以下内容开始你的响应：
- """
+- **角色定位**：你是用户的高级、好奇且聪明的配对程序员。让我们逐步进行。
+- **响应格式**：除非你只是回答一个快速问题，否则以以下内容开始你的响应：
+ ```
语言 > 专家：{使用的编程语言} > {主题专家专业角色}
包括：所需库、包和关键语言功能的 CSV 列表（如果有）
要求：详细程度、标准和软件设计要求的定性描述
计划
简要列出你的逐步计划，包括任何尚未处理的组件
- """
-- 像选定语言的专家专业人士一样行动并在遵循编码风格的同时响应。如果使用 Jupyter，现在开始。记住在顶部添加路径/文件名注释。
+ ```
+- **行为准则**：像选定语言的专家专业人士一样行动，并遵循编码风格进行响应。如果使用 Jupyter，现在开始。记住在顶部添加路径/文件名注释。
+- **代码详细程度**：
+ - 如果是新文件，提供完整代码
+ - 如果是现有文件修改，仅提供修改部分
+- **逐步推理**：
+ - 每次响应都应包含清晰的逐步推理
+ - 解释为什么做出这些选择
+- **避免道歉**：不要为错误道歉，直接修复它们
+- **提问**：
+ - 如果对需求或技术栈有疑问，可以提问
+ - 确保问题具体且有助于推进任务
diff --git a/rules/frontend/react/nextjs-basic/backend-stack-rules.mdc b/rules/frontend/react/nextjs-basic/backend-stack-rules.mdc
index 6c71e76..e07ed48 100644
--- a/rules/frontend/react/nextjs-basic/backend-stack-rules.mdc
+++ b/rules/frontend/react/nextjs-basic/backend-stack-rules.mdc
@@ -1,6 +1,10 @@
---
-description: 指定后端技术栈，包括 Next.js API Routes 和 TypeScript，适用于所有后端文件。
+description: "指定后端技术栈，包括 Next.js API Routes 和 TypeScript，适用于所有后端文件"
globs: backend/**/*.*
---
-- 框架：Next.js API Routes（用于无服务器函数）
-- 语言：TypeScript（用于 API 路由）
+- **框架**：Next.js API Routes（用于无服务器函数）
+- **语言**：TypeScript（用于 API 路由）
+- **数据验证**：Zod（用于 API 请求和响应的数据验证）
+- **ORM/数据库**：根据项目需求选择，例如 Prisma, Drizzle ORM 等
+- **认证**：NextAuth.js（如果需要用户认证）
+- **部署**：Vercel（推荐用于Next.js应用）
diff --git a/rules/frontend/react/nextjs-basic/coding-process-rules.mdc b/rules/frontend/react/nextjs-basic/coding-process-rules.mdc
index 01edee8..f587a62 100644
--- a/rules/frontend/react/nextjs-basic/coding-process-rules.mdc
+++ b/rules/frontend/react/nextjs-basic/coding-process-rules.mdc
@@ -1,9 +1,9 @@
---
-description: 指定编码过程，包括逐步推理、优先级排序、在继续下一个文件之前完成一个文件，以及使用 TODO 注释，适用于所有文件。
+description: "指定编码过程，包括逐步推理、优先级排序、在继续下一个文件之前完成一个文件，以及使用 TODO 注释，适用于所有文件"
globs: *
---
-- 显示简洁的逐步推理
-- 优先考虑你将在每个响应中处理的任务/步骤
-- 在处理下一个文件之前完成一个文件
-- 如果无法完成代码，添加 TODO: 注释
-- 如果需要，中断自己并要求继续
+- **逐步推理**：显示简洁的逐步推理，解释决策过程。
+- **任务优先级**：优先考虑你将在每个响应中处理的任务/步骤，确保高效推进。
+- **文件完成度**：在处理下一个文件之前，务必完成当前文件的代码编写和相关修改。
+- **TODO注释**：如果无法完成代码或需要后续处理，请添加 `TODO:` 注释，明确待办事项。
+- **中断与继续**：如果需要用户介入或无法独立继续，可以中断并请求用户提供进一步指示。
diff --git a/rules/frontend/react/nextjs-basic/coding-style-rules.mdc b/rules/frontend/react/nextjs-basic/coding-style-rules.mdc
index f865946..b7423f9 100644
--- a/rules/frontend/react/nextjs-basic/coding-style-rules.mdc
+++ b/rules/frontend/react/nextjs-basic/coding-style-rules.mdc
@@ -1,7 +1,24 @@
---
-description: 定义编码风格指导原则，包括注释、模块化、DRY 原则、性能和安全性，适用于所有文件。
+description: "Next.js项目编码风格规范，涵盖注释规范、模块化设计、DRY原则、性能与安全最佳实践"
globs: *
---
-- 代码必须以路径/文件名作为单行注释开始
-- 注释必须主要描述目的，但在必要时也要描述效果
-- 优先考虑模块化、DRY、性能和安全性
+- **文件头注释**: 必须包含文件路径和主要功能说明
+ ```typescript
+ // src/components/ui/button.tsx
+ // 通用按钮组件，支持多种变体和尺寸
+ ```
+- **代码注释**:
+ - 复杂逻辑必须添加行内注释
+ - 避免无意义的注释（如"增加计数器"）
+- **模块化**:
+ - 单一组件不超过300行
+ - 每个组件/钩子只做一件事
+- **DRY原则**:
+ - 重复逻辑抽象为自定义钩子
+ - 通用UI提取为共享组件
+- **性能**:
+ - 避免不必要的re-render
+ - 大数据列表使用虚拟滚动
+- **安全**:
+ - 所有用户输入必须验证
+ - 敏感操作需要二次确认
diff --git a/rules/frontend/react/nextjs-basic/editing-code-rules.mdc b/rules/frontend/react/nextjs-basic/editing-code-rules.mdc
index e2e7adc..fe2f384 100644
--- a/rules/frontend/react/nextjs-basic/editing-code-rules.mdc
+++ b/rules/frontend/react/nextjs-basic/editing-code-rules.mdc
@@ -1,5 +1,9 @@
---
-description: 优先返回完全编辑的文件并定义代码详细程度级别，适用于所有文件。
+description: "优先返回完全编辑的文件并定义代码详细程度级别，适用于所有文件"
globs: *
---
-- 返回完全编辑的文件
+- **返回完全编辑的文件**：每次代码修改后，应返回完整且经过编辑的文件内容，确保代码的完整性和可读性。
+- **代码详细程度**：
+ - 对于新创建的文件，提供完整的代码实现。
+ - 对于现有文件的修改，仅提供修改部分的代码，并清晰标示出修改前后的差异，以便用户快速理解。
+- **确保可运行性**：所有返回的代码片段都必须是可运行的，并且包含所有必要的依赖项和配置，以确保用户可以直接使用。
diff --git a/rules/frontend/react/nextjs-basic/frontend-stack-rules.mdc b/rules/frontend/react/nextjs-basic/frontend-stack-rules.mdc
index 257b2a1..5ea6ec2 100644
--- a/rules/frontend/react/nextjs-basic/frontend-stack-rules.mdc
+++ b/rules/frontend/react/nextjs-basic/frontend-stack-rules.mdc
@@ -1,9 +1,12 @@
---
-description: 指定前端技术栈，包括 React、TypeScript、Shadcn/UI、Tailwind CSS 和 Lucide React，适用于所有前端文件。
+description: "指定前端技术栈，包括 React、TypeScript、Shadcn/UI、Tailwind CSS 和 Lucide React，适用于所有前端文件"
globs: frontend/**/*.*
---
-- 框架：Next.js (React)
-- 语言：TypeScript
-- UI 组件：shadcn/ui（基于 Radix UI 原语）
-- 样式：Tailwind CSS
-- 图标：Lucide React
+- **核心框架**：Next.js (基于 React)
+- **语言**：TypeScript
+- **UI 组件库**：shadcn/ui（基于 Radix UI 原语构建，提供可定制的UI组件）
+- **样式框架**：Tailwind CSS（实用优先的CSS框架，用于快速构建自定义设计）
+- **图标库**：Lucide React（一套美观且高度可定制的开源图标库）
+- **状态管理**：React Context API 和 useReducer Hook（用于应用级状态管理）
+- **数据获取**：React Query 或 SWR（用于优化数据获取、缓存和同步）
+- **表单管理**：React Hook Form 和 Zod（用于表单状态管理和数据验证）
diff --git a/rules/frontend/react/nextjs-basic/general-assistant-rules.mdc b/rules/frontend/react/nextjs-basic/general-assistant-rules.mdc
index 2ea324e..c251bb6 100644
--- a/rules/frontend/react/nextjs-basic/general-assistant-rules.mdc
+++ b/rules/frontend/react/nextjs-basic/general-assistant-rules.mdc
@@ -1,7 +1,11 @@
---
-description: 为所有文件定义一般助手行为，包括如何处理错误、提问和理解项目技术栈。
+description: "为所有文件定义一般助手行为，包括如何处理错误、提问和理解项目技术栈"
globs: *
---
-- 对需求和技术栈的整体理解
-- 不要为错误道歉：修复它们
-- 如果编写代码，你可以询问技术栈假设
+- **全面理解**：对用户需求和项目技术栈有全面深入的理解。
+- **错误处理**：不要为错误道歉，而是直接着手修复它们，并解释修复过程。
+- **主动提问**：
+ - 在编写代码时，如果对技术栈的某些假设不确定，可以主动向用户提问以澄清。
+ - 提问应具体且有助于推进任务，避免模糊或不必要的问题。
+- **提供解决方案**：除了修复问题，还应提供优化建议或更好的实现方案。
+- **保持一致性**：在所有交互和代码输出中，保持行为和风格的一致性。
diff --git a/rules/frontend/react/nextjs-basic/history-and-next-task-rules.mdc b/rules/frontend/react/nextjs-basic/history-and-next-task-rules.mdc
index b997536..f2086d0 100644
--- a/rules/frontend/react/nextjs-basic/history-and-next-task-rules.mdc
+++ b/rules/frontend/react/nextjs-basic/history-and-next-task-rules.mdc
@@ -1,13 +1,16 @@
---
-description: 指定结束响应的格式，包括需求摘要、编写的代码、源代码树和下一个任务，适用于所有文件。
+description: "指定结束响应的格式，包括需求摘要、编写的代码、源代码树和下一个任务，适用于所有文件"
globs: *
---
-- 考虑整个聊天会话，并按以下方式结束你的响应：
- """
+- **响应结束格式**：考虑整个聊天会话，并按以下方式结束你的响应：
+ ```
历史：所有需求和你编写的所有代码的完整、简洁和压缩摘要
源代码树：（示例，替换表情符号）
(:floppy_disk:=已保存：文件链接，:warning:=未保存但已命名的片段，:ghost:=无文件名）file.ext:package: Class（如果存在）
(:white_check_mark:=已完成，:o:=有 TODO，:red_circle:=其他未完成）symbol:red_circle: 全局符号
等等。
下一个任务：未完成=下一个任务的简短描述 已完成=列出专家专业人士对增强/性能改进的建议。
- """
+ ```
+- **历史记录**：确保历史记录清晰、简洁，涵盖所有已完成的需求和代码。
+- **源代码树**：提供直观的源代码树表示，帮助用户快速了解文件状态。
+- **下一个任务**：明确指出下一步计划，保持任务的连续性和透明度。
diff --git a/rules/frontend/react/nextjs-basic/llm-integration-rules.mdc b/rules/frontend/react/nextjs-basic/llm-integration-rules.mdc
index 35dc404..3ff7224 100644
--- a/rules/frontend/react/nextjs-basic/llm-integration-rules.mdc
+++ b/rules/frontend/react/nextjs-basic/llm-integration-rules.mdc
@@ -1,6 +1,10 @@
---
-description: 指定 LLM 集成规则，包括使用 Python 包装器和 API 端点，适用于所有 LLM 相关文件。
+description: "指定 LLM 集成规则，包括使用 Python 包装器和 API 端点，适用于所有 LLM 相关文件"
globs: llm/**/*.*
---
-- 用于 LLM 交互的 Python 包装器
-- 连接前端与 Python 后端的 API 端点
+- **Python 包装器**：使用专门的 Python 包装器进行 LLM 交互，确保接口统一和易于管理。
+- **API 端点**：通过清晰定义的 API 端点连接前端与 Python 后端，实现前后端数据传输和功能调用。
+- **异步处理**：LLM 调用通常耗时较长，应采用异步处理机制，避免阻塞主线程。
+- **错误处理与重试**：实现健壮的错误处理和重试机制，应对 LLM 服务可能出现的临时故障。
+- **安全性**：确保 LLM 交互过程中的数据安全，例如敏感信息加密、API 密钥管理等。
+- **性能优化**：对 LLM 请求和响应进行优化，例如批量请求、数据压缩等，提升整体性能。
diff --git a/rules/frontend/solidjs/solidjs-basic-guide/solidjs---complex-state-management.mdc b/rules/frontend/solidjs/solidjs-basic-guide/solidjs---complex-state-management.mdc
index a2b6bbc..5ef80a5 100644
--- a/rules/frontend/solidjs/solidjs-basic-guide/solidjs---complex-state-management.mdc
+++ b/rules/frontend/solidjs/solidjs-basic-guide/solidjs---complex-state-management.mdc
@@ -1,8 +1,159 @@
---
-description:
-globs:
+description: SolidJS 复杂状态管理
+globs: []
alwaysApply: false
---
+# SolidJS 复杂状态管理
+本规则集定义了在 SolidJS 应用程序中处理复杂状态管理的策略和最佳实践，旨在确保状态的可预测性、可维护性和高性能。
+## 1. 状态管理核心概念
+
+SolidJS 的核心是其细粒度响应系统，这使得状态管理相对直接。对于复杂场景，可以结合使用以下模式：
+
+- **信号 (Signals)**: SolidJS 的基本响应式原语，用于存储和更新状态。
+- **派生状态 (Derived State)**: 通过 `createMemo` 从现有信号计算出的值，只有当其依赖项改变时才重新计算。
+- **存储 (Stores)**: 用于管理复杂对象或嵌套状态，通常通过 `createStore` 创建。
+
+## 2. 组织复杂状态
+
+### 2.1 模块化状态
+
+将相关状态和操作封装在独立的模块或文件中，提高代码组织性。
+
+```javascript
+// stores/auth.js
+import { createSignal } from 'solid-js';
+
+const [user, setUser] = createSignal(null);
+const [isAuthenticated, setIsAuthenticated] = createSignal(false);
+
+export const authStore = {
+ user,
+ isAuthenticated,
+ login: (userData) => {
+ setUser(userData);
+ setIsAuthenticated(true);
+ },
+ logout: () => {
+ setUser(null);
+ setIsAuthenticated(false);
+ },
+};
+```
+
+### 2.2 扁平化嵌套状态 (使用 `createStore`)
+
+对于嵌套对象或数组，`createStore` 可以提供细粒度的更新，避免不必要的重新渲染。
+
+```javascript
+import { createStore } from 'solid-js/store';
+
+const [state, setState] = createStore({
+ user: { name: 'John', age: 30 },
+ settings: { theme: 'dark', notifications: true },
+ items: [{ id: 1, name: 'Item A' }, { id: 2, name: 'Item B' }],
+});
+
+// 更新嵌套属性
+setState('user', 'age', a => a + 1);
+// 更新数组中的元素
+setState('items', item => item.id === 1, 'name', 'Updated Item A');
+```
+
+## 3. 跨组件状态共享
+
+### 3.1 Context API
+
+对于需要跨多层组件共享的状态，使用 SolidJS 的 Context API 是一个推荐的方式。
+
+```javascript
+// contexts/ThemeContext.jsx
+import { createContext, useContext } from 'solid-js';
+import { createSignal } from 'solid-js';
+
+const ThemeContext = createContext();
+
+export function ThemeProvider(props) {
+ const [theme, setTheme] = createSignal('light');
+ const toggleTheme = () => setTheme(t => (t === 'light' ? 'dark' : 'light'));
+
+ return (
+ Count: {count}
+ +App Status: {appStore.status}
+
+
+ );
+}
+```
+
+## 4. 异步状态管理
+
+对于异步数据，可以使用 `createResource` 或结合 `createSignal` 和 `createEffect` 来管理加载状态、错误和数据。
+
+```javascript
+import { createResource, createSignal, onMount } from 'solid-js';
+
+async function fetchUser(id) {
+ const response = await fetch(`/api/users/${id}`);
+ return response.json();
+}
+
+function UserProfile(props) {
+ const [userId, setUserId] = createSignal(props.id);
+ const [user] = createResource(userId, fetchUser);
+
+ return (
+ Count: {count()}
+ +
+
+
+
+
+
+
+
+ );
+}
+```
+
+## 5. 最佳实践
+
+- **最小化状态**: 仅将真正需要响应式更新的数据存储为信号或存储。
+- **避免不必要的响应性**: 对于不需要响应式的数据，使用普通变量。
+- **单一职责原则**: 确保每个信号或存储管理一个单一的、内聚的状态片段。
+- **使用 `createMemo` 优化派生状态**: 避免在模板中直接进行复杂计算，使用 `createMemo` 缓存计算结果。
+- **清晰的命名**: 信号和存储的命名应清晰地反映其内容和用途。
diff --git a/rules/frontend/solidjs/solidjs-basic-guide/solidjs---conditional-and-list-rendering.mdc b/rules/frontend/solidjs/solidjs-basic-guide/solidjs---conditional-and-list-rendering.mdc
index a2b6bbc..a0ee0cc 100644
--- a/rules/frontend/solidjs/solidjs-basic-guide/solidjs---conditional-and-list-rendering.mdc
+++ b/rules/frontend/solidjs/solidjs-basic-guide/solidjs---conditional-and-list-rendering.mdc
@@ -1,8 +1,146 @@
---
-description:
-globs:
+description: SolidJS 条件渲染和列表渲染
+globs: []
alwaysApply: false
---
+# SolidJS 条件渲染和列表渲染
+本规则集定义了在 SolidJS 应用程序中实现条件渲染和列表渲染的最佳实践，旨在确保高效的 UI 更新和可读的代码结构。
+## 1. 条件渲染
+
+SolidJS 处理条件渲染的方式与 React 等其他库有所不同，它利用其细粒度响应式系统，只更新实际改变的部分。
+
+### 1.1 使用 `Show` 组件
+
+对于简单的条件渲染，可以使用 SolidJS 内置的 `Show` 组件。它接受一个 `when` 属性（一个信号或计算属性），当 `when` 为真时渲染其 `children`，否则渲染 `fallback`。
+
+```jsx
+import { createSignal, Show } from 'solid-js';
+
+function ConditionalDisplay() {
+ const [loggedIn, setLoggedIn] = createSignal(false);
+
+ return (
+ Loading user...
+Error: {user.error.message}
+User Name: {user().name}
+
+ setLoggedIn(true)}>Login}
+ >
+
+
+ );
+}
+```
+
+### 1.2 使用 `Switch` 和 `Match` 组件
+
+对于多个条件的复杂场景，可以使用 `Switch` 和 `Match` 组件，类似于其他语言中的 `switch` 语句。
+
+```jsx
+import { createSignal, Switch, Match } from 'solid-js';
+
+function MultiConditionalDisplay() {
+ const [status, setStatus] = createSignal('loading');
+
+ return (
+ Welcome, User!
+ +
+ Unknown Status}>
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+```
+
+### 1.3 短路逻辑 (不推荐用于复杂场景)
+
+虽然可以使用 `&&` 或 `||` 进行短路逻辑渲染，但对于更复杂的条件，推荐使用 `Show` 或 `Switch/Match`，因为它们能更好地利用 SolidJS 的响应式特性，避免不必要的重新创建 DOM 元素。
+
+```jsx
+// 简单场景可用，复杂场景不推荐
+function SimpleConditional() {
+ const [isVisible, setIsVisible] = createSignal(true);
+ return (
+ Loading data...
+Data loaded successfully!
+Error loading data.
+
+ {isVisible() &&
+ );
+}
+```
+
+## 2. 列表渲染
+
+SolidJS 的列表渲染通过 `For` 组件实现，它提供了高效的键控 (keyed) 列表渲染，类似于 React 的 `map` 结合 `key`。
+
+### 2.1 使用 `For` 组件
+
+`For` 组件接受一个 `each` 属性（一个数组信号或计算属性），并为数组中的每个项渲染其 `children`。`key` 属性是可选的，但强烈推荐提供一个稳定且唯一的 `key`，以优化列表更新性能。
+
+```jsx
+import { createSignal, For } from 'solid-js';
+
+function TodoList() {
+ const [todos, setTodos] = createSignal([
+ { id: 1, text: 'Learn SolidJS', completed: false },
+ { id: 2, text: 'Build an App', completed: false },
+ ]);
+
+ const addTodo = () => {
+ const newTodo = { id: todos().length + 1, text: 'New Todo', completed: false };
+ setTodos([...todos(), newTodo]);
+ };
+
+ return (
+ This is visible.
} + +
+
+
+ );
+}
+```
+
+### 2.2 键控列表 (Keyed Lists)
+
+`For` 组件默认使用索引作为 `key`，但这在列表项顺序改变或有增删时会导致性能问题和不正确的行为。因此，始终为 `For` 组件提供一个稳定的、唯一的 `key`。
+
+```jsx
+// 推荐使用唯一的 ID 作为 key
+-
+
- + {todo.text} - {todo.completed ? 'Done' : 'Pending'} + + )} +
+
+
+
+
+
+
+
+
+
+ );
+}
+```
+
+### `createResource` 的优势
+
+- **自动加载状态**: `resource.loading` 信号自动指示数据是否正在加载。
+- **自动错误处理**: `resource.error` 信号捕获数据获取过程中的错误。
+- **缓存**: `createResource` 会缓存结果，避免重复请求相同的数据。
+- **响应式触发**: 当源信号改变时，自动重新执行数据获取函数。
+- **暂停/恢复**: 可以通过将源信号设置为 `undefined` 或 `null` 来暂停数据获取。
+
+## 2. 使用 `createEffect` 进行手动数据获取
+
+对于更复杂的场景，或者当 `createResource` 不完全满足需求时，可以使用 `createEffect` 结合 `createSignal` 手动管理数据获取的生命周期。
+
+```javascript
+import { createSignal, createEffect, onCleanup, Show } from 'solid-js';
+
+function ManualDataFetcher(props) {
+ const [data, setData] = createSignal(null);
+ const [loading, setLoading] = createSignal(false);
+ const [error, setError] = createSignal(null);
+
+ createEffect(() => {
+ const id = props.itemId;
+ if (!id) return; // 如果没有 ID，则不执行获取
+
+ setLoading(true);
+ setError(null);
+ setData(null);
+
+ const abortController = new AbortController();
+ const signal = abortController.signal;
+
+ fetch(`/api/items/${id}`, { signal })
+ .then(response => {
+ if (!response.ok) {
+ throw new Error(`HTTP error! status: ${response.status}`);
+ }
+ return response.json();
+ })
+ .then(fetchedData => {
+ setData(fetchedData);
+ })
+ .catch(err => {
+ if (err.name !== 'AbortError') {
+ setError(err);
+ }
+ })
+ .finally(() => {
+ setLoading(false);
+ });
+
+ // 清理函数，当 effect 重新运行时或组件卸载时执行
+ onCleanup(() => {
+ abortController.abort(); // 取消正在进行的请求
+ });
+ });
+
+ return (
+ User Profile
+ setUserId(parseInt(e.target.value) || undefined)} + placeholder="Enter User ID" + /> +Loading user data...
+Error: {user.error.message}
+ID: {user().id}
+Name: {user().name}
+Email: {user().email}
+Please enter a User ID to fetch data.
+
+
+
+
+
+
+
+
+ );
+}
+```
+
+### 适用场景
+
+- 需要更精细控制请求生命周期（如取消请求）时。
+- 数据获取逻辑非常复杂，需要自定义处理流程时。
+
+## 3. 最佳实践
+
+- **优先使用 `createResource`**: 它是 SolidJS 官方推荐的数据获取方式，能处理大多数场景，并提供开箱即用的加载/错误状态管理。
+- **处理加载和错误状态**: 始终在 UI 中反映数据的加载状态和任何可能发生的错误，提供良好的用户体验。
+- **数据源信号化**: 将触发数据获取的参数（如 ID、查询字符串）封装为信号，以便 `createResource` 能够响应式地重新获取数据。
+- **避免在模板中直接进行数据获取**: 数据获取逻辑应封装在组件外部的函数或 `createResource`/`createEffect` 中。
+- **取消未完成的请求**: 在组件卸载或数据源信号改变时，取消之前未完成的请求，避免内存泄漏和不必要的网络活动。
+- **服务端渲染 (SSR) 考虑**: 如果使用 SSR，`createResource` 也能很好地工作，因为它支持在服务器端预取数据。
diff --git a/rules/frontend/solidjs/solidjs-basic-guide/solidjs---derived-values-management.mdc b/rules/frontend/solidjs/solidjs-basic-guide/solidjs---derived-values-management.mdc
index a2b6bbc..708ef2c 100644
--- a/rules/frontend/solidjs/solidjs-basic-guide/solidjs---derived-values-management.mdc
+++ b/rules/frontend/solidjs/solidjs-basic-guide/solidjs---derived-values-management.mdc
@@ -1,8 +1,111 @@
---
-description:
-globs:
+description: SolidJS 派生值管理
+globs: []
alwaysApply: false
---
+# SolidJS 派生值管理
+本规则集定义了在 SolidJS 应用程序中如何高效地管理派生值（Derived Values），旨在确保计算的最小化、响应式更新的精确性以及代码的清晰度。
+## 1. 什么是派生值？
+
+派生值是指那些不是直接存储在信号中，而是通过其他响应式数据（如信号、存储、其他派生值）计算得出的值。当其依赖的响应式数据发生变化时，派生值会自动重新计算。
+
+## 2. 使用 `createMemo` (推荐)
+
+`createMemo` 是 SolidJS 中用于创建派生值的核心原语。它类似于 React 的 `useMemo` 或 Vue 的计算属性，但 SolidJS 的 `createMemo` 具有更细粒度的响应式更新，只有当其依赖项实际发生变化时才会重新计算。
+
+```javascript
+import { createSignal, createMemo } from 'solid-js';
+
+function Counter() {
+ const [count, setCount] = createSignal(0);
+ const [multiplier, setMultiplier] = createSignal(2);
+
+ // 派生值：计算 count * multiplier
+ const multipliedCount = createMemo(() => count() * multiplier());
+
+ return (
+ Manual Data Fetcher
+Loading item...
+Error: {error().message}
+Item Name: {data().name}
+Description: {data().description}
+
+
+ );
+}
+```
+
+### `createMemo` 的优势
+
+- **惰性计算**: `createMemo` 只有当其值被读取时才会执行计算函数。
+- **缓存结果**: 只有当依赖项发生变化时，`createMemo` 才会重新计算其值，否则返回缓存的结果，避免不必要的重复计算。
+- **细粒度更新**: SolidJS 的编译器会优化 `createMemo` 的依赖追踪，确保只有真正需要更新的视图部分才会重新渲染。
+
+## 3. 避免在 JSX 中直接进行复杂计算
+
+虽然可以在 JSX 模板中直接进行简单的计算，但对于复杂的计算或需要缓存结果的计算，应始终使用 `createMemo`。在 JSX 中直接进行复杂计算会导致每次组件重新渲染时都重复执行，降低性能。
+
+```javascript
+// 不推荐：在 JSX 中直接进行复杂计算
+function BadExample() {
+ const [items, setItems] = createSignal([{ price: 10, quantity: 2 }, { price: 5, quantity: 3 }]);
+
+ return (
+ Count: {count()}
+Multiplier: {multiplier()}
+Multiplied Count: {multipliedCount()}
+ + +
+
+ );
+}
+
+// 推荐：使用 createMemo 计算派生值
+function GoodExample() {
+ const [items, setItems] = createSignal([{ price: 10, quantity: 2 }, { price: 5, quantity: 3 }]);
+
+ const total = createMemo(() => items().reduce((sum, item) => sum + item.price * item.quantity, 0));
+
+ return (
+ Total: {items().reduce((sum, item) => sum + item.price * item.quantity, 0)}
+
+
+ );
+}
+```
+
+## 4. 派生值与副作用 (Effects)
+
+`createMemo` 用于计算值，而 `createEffect` 用于执行副作用（如 DOM 操作、日志记录、订阅外部服务）。不要在 `createMemo` 中执行副作用，也不要依赖于 `createEffect` 的返回值。
+
+```javascript
+import { createSignal, createMemo, createEffect } from 'solid-js';
+
+function SideEffectExample() {
+ const [firstName, setFirstName] = createSignal("John");
+ const [lastName, setLastName] = createSignal("Doe");
+
+ // 派生值：全名
+ const fullName = createMemo(() => `${firstName()} ${lastName()}`);
+
+ // 副作用：当 fullName 改变时打印日志
+ createEffect(() => {
+ console.log(`Full Name changed to: ${fullName()}`);
+ });
+
+ return (
+ Total: {total()}
+
+ setFirstName(e.target.value)} />
+ setLastName(e.target.value)} />
+
+ );
+}
+```
+
+## 5. 最佳实践
+
+- **始终使用 `createMemo`**: 对于任何从现有响应式数据计算得出的值，都应该使用 `createMemo` 来创建，以确保性能和正确性。
+- **避免循环依赖**: 确保 `createMemo` 的计算函数不会直接或间接依赖于其自身的值，这会导致无限循环。
+- **清晰的命名**: 派生值的命名应清晰地反映其计算逻辑和用途。
+- **分离计算与副作用**: 严格区分 `createMemo`（计算值）和 `createEffect`（执行副作用）的职责。
diff --git a/rules/frontend/solidjs/solidjs-basic-guide/solidjs---error-boundaries.mdc b/rules/frontend/solidjs/solidjs-basic-guide/solidjs---error-boundaries.mdc
index a2b6bbc..037212a 100644
--- a/rules/frontend/solidjs/solidjs-basic-guide/solidjs---error-boundaries.mdc
+++ b/rules/frontend/solidjs/solidjs-basic-guide/solidjs---error-boundaries.mdc
@@ -1,8 +1,97 @@
---
-description:
-globs:
+description: SolidJS 错误边界
+globs: []
alwaysApply: false
---
+# SolidJS 错误边界
+本规则集定义了在 SolidJS 应用程序中如何实现错误边界（Error Boundaries），以优雅地捕获组件树中的 JavaScript 错误，并显示备用 UI，而不是导致整个应用程序崩溃。
+## 1. 什么是错误边界？
+
+错误边界是一种 SolidJS 组件，它可以捕获其子组件树中任何位置的 JavaScript 错误，记录这些错误，并显示一个备用 UI，而不是崩溃整个组件树。错误边界在渲染期间、生命周期方法中以及构造函数中捕获错误。
+
+## 2. SolidJS 中的错误边界
+
+SolidJS 本身没有像 React 那样内置的 `componentDidCatch` 或 `getDerivedStateFromError` 生命周期方法。然而，可以通过 `createEffect` 和 `onError` 回调函数来模拟错误边界的行为。
+
+### 2.1 使用 `onError` 回调
+
+`onError` 是 SolidJS 提供的一个回调函数，它可以在组件内部或组件树的任何地方捕获渲染或更新过程中的错误。当错误发生时，`onError` 会被调用，并且可以用来更新本地状态以显示回退 UI。
+
+```javascript
+import { createSignal, onError, Show } from 'solid-js';
+
+function ErrorBoundary(props) {
+ const [error, setError] = createSignal(null);
+
+ // 捕获子组件树中的错误
+ onError((err) => {
+ console.error("Caught an error:", err);
+ setError(err);
+ });
+
+ return (
+ Hello, {fullName()}
+Something went wrong.
+Error details: {error()?.message}
+ + + } + > + {props.children} +
+
+ );
+}
+
+function App() {
+ return (
+ Count: {count()}
+ +
+
+
+
+ );
+}
+```
+
+### 2.2 错误边界的放置
+
+错误边界应该放置在您希望捕获错误并显示备用 UI 的组件树的任何位置。通常，您会将其放置在路由组件的顶层，或者在可能包含不稳定组件的 UI 部分周围。
+
+## 3. 最佳实践
+
+- **细化错误边界范围**: 不要将整个应用程序包裹在一个错误边界中。这会使得错误难以定位，并且可能隐藏其他部分的问题。将错误边界放置在逻辑上独立的 UI 块周围。
+- **提供有用的回退 UI**: 当错误发生时，显示一个清晰、友好的消息，告知用户发生了什么，并提供可能的解决方案（如“刷新页面”或“联系支持”）。
+- **记录错误**: 在错误边界中捕获到错误时，务必将其记录到日志服务（如 Sentry、Bugsnag）中，以便开发人员可以及时发现并修复问题。
+- **避免在错误边界内部抛出错误**: 错误边界本身不应该抛出错误，否则它将无法捕获自身的错误。
+- **测试错误边界**: 编写测试用例来验证错误边界是否按预期工作，包括它是否捕获错误、是否显示正确的备用 UI 以及是否正确记录错误。
diff --git a/rules/frontend/solidjs/solidjs-basic-guide/solidjs---functional-components-preference.mdc b/rules/frontend/solidjs/solidjs-basic-guide/solidjs---functional-components-preference.mdc
index a2b6bbc..6270f78 100644
--- a/rules/frontend/solidjs/solidjs-basic-guide/solidjs---functional-components-preference.mdc
+++ b/rules/frontend/solidjs/solidjs-basic-guide/solidjs---functional-components-preference.mdc
@@ -1,8 +1,91 @@
---
-description:
-globs:
+description: SolidJS 函数式组件偏好
+globs: []
alwaysApply: false
---
+# SolidJS 函数式组件偏好
+本规则集定义了在 SolidJS 应用程序中优先使用函数式组件的实践，旨在促进代码的简洁性、可重用性和响应式更新的效率。
+## 1. 函数式组件的核心
+
+在 SolidJS 中，组件本质上是普通的 JavaScript 函数，它们在渲染时只运行一次。响应式更新不是通过重新运行组件函数来实现的，而是通过 SolidJS 的细粒度响应式系统直接更新 DOM。
+
+```javascript
+// 这是一个简单的 SolidJS 函数式组件
+function MyComponent(props) {
+ return (
+ My App
+This part of the app is still working.
+
+
+ );
+}
+
+// 在其他组件中使用
+function App() {
+ return Hello, {props.name}!
+
+
+ );
+}
+```
+
+### 3.2 副作用 (Effects)
+
+使用 `createEffect` 处理需要响应式地执行的副作用，例如日志记录、订阅外部数据等。
+
+```javascript
+import { createSignal, createEffect } from 'solid-js';
+
+function Logger() {
+ const [value, setValue] = createSignal("initial");
+
+ createEffect(() => {
+ console.log("Value changed:", value());
+ });
+
+ return (
+ setValue(e.target.value)}
+ />
+ );
+}
+```
+
+## 4. 最佳实践
+
+- **保持组件精简**: 尽量让函数式组件只负责渲染 UI，将复杂逻辑（如数据获取、状态管理）抽离到自定义 Hooks 或独立的模块中。
+- **使用 `props` 传递数据**: 通过 `props` 将数据从父组件传递给子组件。如果 `props` 是响应式的（例如，来自信号），SolidJS 会自动处理更新。
+- **避免在组件函数顶层执行昂贵操作**: 由于组件函数只运行一次，如果其中有昂贵的操作，它只会在组件挂载时执行。但如果操作依赖于响应式数据，请将其包裹在 `createMemo` 或 `createEffect` 中。
+- **利用 SolidJS 原语**: 充分利用 `createSignal`, `createEffect`, `createMemo`, `createResource` 等 SolidJS 提供的响应式原语来管理状态和逻辑。
+- **清晰的组件职责**: 每个函数式组件都应该有一个清晰的职责，避免一个组件承担过多的功能。
diff --git a/rules/frontend/solidjs/solidjs-basic-guide/solidjs---jsx-templates.mdc b/rules/frontend/solidjs/solidjs-basic-guide/solidjs---jsx-templates.mdc
index a2b6bbc..09adda2 100644
--- a/rules/frontend/solidjs/solidjs-basic-guide/solidjs---jsx-templates.mdc
+++ b/rules/frontend/solidjs/solidjs-basic-guide/solidjs---jsx-templates.mdc
@@ -1,8 +1,125 @@
---
-description:
-globs:
+description: SolidJS JSX 模板
+globs: []
alwaysApply: false
---
+# SolidJS JSX 模板
+本规则集定义了在 SolidJS 应用程序中使用 JSX 模板的策略和最佳实践，旨在确保代码的清晰度、可维护性以及与 SolidJS 响应式系统的无缝集成。
+## 1. JSX 基础
+
+SolidJS 使用 JSX 作为其模板语言，与 React 类似，但其内部工作方式有所不同。在 SolidJS 中，JSX 被编译为真实的 DOM 操作，而不是虚拟 DOM。这意味着 JSX 表达式只运行一次，而其中的响应式数据更新会直接、细粒度地反映到 DOM 上。
+
+```jsx
+import { createSignal } from 'solid-js';
+
+function Greeting() {
+ const [name, setName] = createSignal("World");
+
+ return (
+ Count: {count()}
+ +
+
+ );
+}
+```
+
+## 2. 响应式表达式
+
+在 JSX 中，任何包含信号或计算属性的表达式都应该是函数调用形式（例如 `name()`），这样 SolidJS 才能追踪其依赖并在值变化时更新相应的 DOM 部分。
+
+```jsx
+// 正确：使用函数调用来访问信号的值
+Hello, {name()}!
+ setName(e.target.value)} + /> +Count: {count()}
+ +// 错误：直接访问信号，这将不会响应式更新 +//Count: {count}
+``` + +## 3. 属性绑定 + +### 3.1 静态属性 + +静态属性直接写在 JSX 元素上。 + +```jsx +Static Content
+```
+
+### 3.2 动态属性
+
+动态属性使用花括号 `{}` 包裹 JavaScript 表达式。对于布尔属性，如果值为 `true`，属性会被添加；如果为 `false` 或 `null`，属性会被移除。
+
+```jsx
+
+
+ Dynamic Classes
+
+ ```
+
+- **`style`**: 可以是字符串或对象。对象形式的键是 CSS 属性名（驼峰命名），值是属性值。
+
+ ```jsx
+
+ Dynamic Styles
+
+ ```
+
+## 4. 条件渲染和列表渲染
+
+SolidJS 提供了专门的控制流组件 (`Show`, `Switch`, `For`) 来处理条件渲染和列表渲染，这些组件是优化性能和响应式更新的关键。
+
+### 4.1 条件渲染 (`Show`, `Switch/Match`)
+
+```jsx
+import { Show, Switch, Match } from 'solid-js';
+
+
+ Loading MyLazyComponent...
}>
+ Welcome to My App
+标签的文本内容才会更新 +
Count: {count()}
+``` + +### 1.2 备忘录 (Memos) / 派生值 (`createMemo`) + +`createMemo` 用于创建派生值。它会缓存计算结果，只有当其依赖的信号发生变化时，才会重新计算。这避免了不必要的重复计算。 + +```javascript +import { createSignal, createMemo } from 'solid-js'; + +const [firstName, setFirstName] = createSignal("John"); +const [lastName, setLastName] = createSignal("Doe"); + +// fullName 只有当 firstName 或 lastName 改变时才会重新计算 +const fullName = createMemo(() => `${firstName()} ${lastName()}`); + +Full Name: {fullName()}
+``` + +### 1.3 副作用 (`createEffect`) + +`createEffect` 用于执行副作用，例如 DOM 操作、日志记录或与外部 API 交互。它只在依赖的信号改变时运行，并且会自动清理旧的副作用。 + +```javascript +import { createSignal, createEffect } from 'solid-js'; + +const [data, setData] = createSignal(null); + +createEffect(() => { + if (data()) { + console.log("Data has changed:", data()); + } +}); +``` + +## 2. 编译时优化 + +SolidJS 的 JSX 编译器将 JSX 模板编译成高效的、直接操作 DOM 的 JavaScript 代码。这意味着运行时没有虚拟 DOM 比较的开销。 + +- **只运行一次的组件**: SolidJS 组件函数只在初始化时运行一次，而不是像 React 那样在每次状态更新时重新运行。这大大减少了 JavaScript 的执行量。 +- **模板实例化**: JSX 编译后会生成高效的 DOM 节点创建和更新代码，避免了运行时解析模板的开销。 + +## 3. 控制流组件 + +SolidJS 提供了特殊的控制流组件（如 `Show`, `For`, `Switch`）来优化条件渲染和列表渲染。 + +### 3.1 `Show` 组件 + +`Show` 组件用于条件渲染。它只会渲染 `when` 条件为真时的内容，并且在条件切换时，会高效地添加或移除 DOM 元素，而不是重新渲染整个子树。 + +```jsx +import { Show } from 'solid-js'; + +