frontend

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Frontend Development

前端开发

Build modern, accessible, performant frontend applications.

构建现代化、无障碍、高性能的前端应用。

When to Use

适用场景

Creating UI components
Implementing responsive designs
State management setup
Frontend performance optimization
Accessibility improvements

创建UI组件
实现响应式设计
状态管理配置
前端性能优化
无障碍体验改进

Focus Areas

核心关注领域

Component Architecture

组件架构

Functional components with hooks
Props interface with TypeScript
Composition over inheritance
Reusable, testable components

结合Hooks的函数式组件
使用TypeScript定义Props接口
组合优于继承
可复用、可测试的组件

Styling

样式设计

Tailwind CSS or CSS-in-JS
Mobile-first responsive design
Design system integration
Dark mode support

Tailwind CSS 或 CSS-in-JS
移动端优先的响应式设计
设计系统集成
深色模式支持

State Management

状态管理

React Context for simple state
Zustand/Redux for complex state
Server state with React Query/SWR

简单状态使用React Context
复杂状态使用Zustand/Redux
服务端状态使用React Query/SWR

Performance

性能优化

Lazy loading and code splitting
Memoization (useMemo, useCallback)
Virtual lists for large datasets
Image optimization

懒加载与代码分割
记忆化处理（useMemo、useCallback）
大数据集场景使用虚拟列表
图片优化

Accessibility

无障碍设计

Semantic HTML
ARIA labels where needed
Keyboard navigation
Screen reader testing

语义化HTML
按需使用ARIA标签
键盘导航支持
屏幕阅读器测试

Component Template

组件模板

tsx

interface Props {
  title: string;
  onAction?: () => void;
}

export function Component({ title, onAction }: Props) {
  return (
    <div role="region" aria-label={title}>
      <h2>{title}</h2>
      <button onClick={onAction}>Action</button>
    </div>
  );
}

tsx

interface Props {
  title: string;
  onAction?: () => void;
}

export function Component({ title, onAction }: Props) {
  return (
    <div role="region" aria-label={title}>
      <h2>{title}</h2>
      <button onClick={onAction}>Action</button>
    </div>
  );
}

Performance Budgets

性能预算

Load time: <3s on 3G, <1s on WiFi
Bundle: <500KB initial
LCP: <2.5s, FID: <100ms, CLS: <0.1

加载时间：3G网络下<3秒，WiFi网络下<1秒
初始包体积：<500KB
LCP（最大内容绘制）：<2.5秒，FID（首次输入延迟）：<100毫秒，CLS（累积布局偏移）：<0.1

Examples

示例

Input: "Create a search component" Action: Build accessible search with debounced input, loading states, results display

Input: "Make this responsive" Action: Add breakpoints, mobile-first styles, test on multiple viewports

输入： "创建一个搜索组件" 操作： 构建带防抖输入、加载状态、结果展示的无障碍搜索组件