Back to Details

solid-react

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

SOLID React - Component Architecture

SOLID React - 组件架构

Codebase Analysis (MANDATORY)

代码库分析（强制要求）

Before ANY implementation:
  1. Explore project structure to understand architecture
  2. Read existing related files to follow established patterns
  3. Identify naming conventions, coding style, and patterns used
  4. Understand data flow and dependencies
在进行任何实现之前：
  1. 探索项目结构以理解架构
  2. 阅读现有相关文件以遵循已确立的模式
  3. 识别所使用的命名规范、编码风格和模式
  4. 理解数据流和依赖关系

DRY - Reuse or Create Shared (MANDATORY)

DRY - 复用或创建共享代码（强制要求）

Before writing ANY new code:
  1. Grep the codebase for similar function names, patterns, or logic
  2. Check shared locations: 
    modules/cores/lib/
    , 
    modules/cores/components/
    , 
    modules/cores/hooks/
  3. If similar code exists → extend/reuse instead of duplicate
  4. If code will be used by 2+ features → create it in 
    modules/cores/
    directly
  5. Extract repeated logic (3+ occurrences) into shared helpers
  6. Run 
    npx jscpd ./src --threshold 3
    after creating new files
在编写任何新代码之前：
  1. 在代码库中搜索相似的函数名、模式或逻辑
  2. 检查共享位置：
    modules/cores/lib/
    、
    modules/cores/components/
    、
    modules/cores/hooks/
  3. 若存在相似代码 → 扩展/复用而非重复编写
  4. 若代码将被2个及以上功能使用 → 直接在
    modules/cores/
    中创建
  5. 将重复出现3次及以上的逻辑提取到共享工具中
  6. 创建新文件后运行
    npx jscpd ./src --threshold 3

Agent Workflow (MANDATORY)

Agent工作流（强制要求）

Before ANY implementation, use 
TeamCreate
to spawn 3 agents:
  1. fuse-ai-pilot:explore-codebase - Analyze project structure and existing patterns
  2. fuse-ai-pilot:research-expert - Verify latest docs for all stack technologies
  3. mcp__context7__query-docs - Check integration compatibility
After implementation, run fuse-ai-pilot:sniper for validation.
在进行任何实现之前，使用
TeamCreate
生成3个Agent：
  1. fuse-ai-pilot:explore-codebase - 分析项目结构和现有模式
  2. fuse-ai-pilot:research-expert - 验证所有栈技术的最新文档
  3. mcp__context7__query-docs - 检查集成兼容性
完成实现后，运行fuse-ai-pilot:sniper进行验证。

Absolute Rules (MANDATORY)

绝对规则（强制要求）

1. Files < 100 lines

1. 文件行数<100

  • Split at 90 lines - Never exceed 100
  • Components < 50 lines (use composition)
  • Hooks < 30 lines each
  • Services < 40 lines each
  • 在90行时拆分 - 绝不超过100行
  • 组件<50行（使用组合方式）
  • 每个钩子<30行
  • 每个服务<40行

2. Modular Architecture

2. 模块化架构

See 
references/architecture-patterns.md
for complete structure with feature modules and cores directory.
完整结构（包含功能模块和cores目录）请参见
references/architecture-patterns.md
。

3. JSDoc Mandatory

3. 强制使用JSDoc

typescript
/**
 * Fetch user by ID from API.
 *
 * @param id - User unique identifier
 * @returns User object or null if not found
 */
export async function getUserById(id: string): Promise<User | null>
typescript
/**
 * 根据ID从API获取用户信息。
 *
 * @param id - 用户唯一标识符
 * @returns 用户对象，若未找到则返回null
 */
export async function getUserById(id: string): Promise<User | null>

4. Interfaces Separated

4. 接口分离存放

text
modules/[feature]/src/interfaces/
├── user.interface.ts
├── post.interface.ts
└── api.interface.ts
NEVER put interfaces in component files.
text
modules/[feature]/src/interfaces/
├── user.interface.ts
├── post.interface.ts
└── api.interface.ts
绝不要将接口放在组件文件中。

SOLID Principles (Detailed Guides)

SOLID原则（详细指南）

Each SOLID principle has a dedicated reference guide:
  1. references/single-responsibility.md
     - One function = one reason to change
    • File splitting at 90 lines (components < 50, hooks < 30)
    • Component composition patterns
    • Split strategy
  2. references/open-closed.md
     - Extend via composition, not modification
    • Plugin architecture patterns
    • Render props and slots
    • Strategy patterns
  3. references/liskov-substitution.md
     - Contract compliance & behavioral subtyping
    • Interface contracts
    • Swappable implementations
    • Testing compliance
  4. references/interface-segregation.md
     - Many focused interfaces beat one fat interface
    • Role-based interfaces
    • Props segregation
    • Context splitting
  5. references/dependency-inversion.md
     - Depend on abstractions, not implementations
    • Constructor injection patterns
    • Factory patterns
    • Context for DI
See 
references/solid-principles.md
for overview and quick reference.
每个SOLID原则都有专门的参考指南：
  1. references/single-responsibility.md
     - 一个函数 = 一个修改理由
    • 90行时拆分文件（组件<50行，钩子<30行）
    • 组件组合模式
    • 拆分策略
  2. references/open-closed.md
     - 通过组合扩展，而非修改
    • 插件架构模式
    • 渲染属性和插槽
    • 策略模式
  3. references/liskov-substitution.md
     - 契约合规性与行为子类型
    • 接口契约
    • 可替换的实现
    • 合规性测试
  4. references/interface-segregation.md
     - 多个专注的接口优于一个臃肿的接口
    • 基于角色的接口
    • 属性分离
    • 上下文拆分
  5. references/dependency-inversion.md
     - 依赖抽象，而非具体实现
    • 构造函数注入模式
    • 工厂模式
    • 用于依赖注入的上下文
概述和快速参考请参见
references/solid-principles.md
。

Code Templates

代码模板

Ready-to-copy code in 
references/templates/
:
TemplateUsageMax Lines
component.md
React functional component50
hook.md
Custom hook with TanStack Query30
service.md
Service with dependency injection40
store.md
Zustand store with persistence40
interface.md
TypeScript interfaces-
validator.md
Zod validation schemas30
factory.md
Factory pattern40
adapter.md
Adapter pattern40
error.md
Custom error classes30
test.md
Vitest + Testing Library-
可直接复制的代码位于
references/templates/
：
模板用途最大行数
component.md
React函数式组件50
hook.md
结合TanStack Query的自定义钩子30
service.md
带有依赖注入的服务40
store.md
带有持久化的Zustand状态管理库40
interface.md
TypeScript接口-
validator.md
Zod验证模式30
factory.md
工厂模式40
adapter.md
适配器模式40
error.md
自定义错误类30
test.md
Vitest + Testing Library测试-

Response Guidelines

响应指南

  1. Research first - MANDATORY: Search Context7 + Exa before ANY code
  2. Show complete code - Working examples, not snippets
  3. Explain decisions - Why this pattern over alternatives
  4. Include tests - Always suggest test cases
  5. Handle errors - Never ignore, use error boundaries
  6. Type everything - Full TypeScript, no 
    any
  7. Document code - JSDoc for complex functions
  1. 先调研 - 强制要求：在编写任何代码之前先搜索Context7 + Exa
  2. 展示完整代码 - 可运行的示例，而非代码片段
  3. 解释决策 - 为何选择该模式而非其他替代方案
  4. 包含测试 - 始终建议测试用例
  5. 处理错误 - 绝不忽略，使用错误边界
  6. 全面类型化 - 完整的TypeScript，禁止使用
    any
  7. 文档代码 - 复杂函数需添加JSDoc

Forbidden

禁止事项

  • Coding without researching docs first (ALWAYS research)
  • Using outdated APIs without checking current year docs
  • Files > 100 lines
  • Interfaces in component files
  • Business logic in components
  • Class components
  • Missing JSDoc on exports
  • any
    type
  • Barrel exports (index.ts re-exports)
  • useEffect
    for data fetching (use TanStack Query or Router loaders)
  • Module importing another module (except cores)
  • Duplicating existing utility/helper without Grep search first
  • Copy-pasting logic blocks instead of extracting shared function
  • 未先调研文档就编写代码（必须始终调研）
  • 使用过时API而未查看当年的文档
  • 文件行数超过100
  • 接口存放在组件文件中
  • 组件中包含业务逻辑
  • 类组件
  • 导出的内容缺少JSDoc
  • 使用
    any
    类型
  • 桶式导出（index.ts重新导出）
  • 使用
    useEffect
    进行数据获取（请使用TanStack Query或Router加载器）
  • 模块导入另一个模块（cores模块除外）
  • 未先搜索就重复现有的工具/辅助函数
  • 复制粘贴逻辑块而非提取为共享函数