前端开发Skill frontend

---

name: 前端 description: 构建React组件、响应式布局和处理状态管理。用于UI开发、样式或前端性能。

前端开发

构建现代、可访问、高性能的前端应用程序。

使用场景

• 创建UI组件
• 实现响应式设计
• 状态管理设置
• 前端性能优化
• 可访问性改进

重点领域

组件架构

• 使用hooks的功能组件
• 使用TypeScript的Props接口
• 组合优于继承
• 可重用、可测试的组件

样式

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

状态管理

• 使用React Context处理简单状态
• 使用Zustand/Redux处理复杂状态
• 使用React Query/SWR处理服务器状态

性能

• 懒加载和代码分割
• 记忆化（useMemo, useCallback）
• 大型数据集的虚拟列表
• 图像优化

可访问性

• 语义HTML
• 需要时使用ARIA标签
• 键盘导航
• 屏幕阅读器测试

组件模板

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>
  );
}

性能预算

• 加载时间：3G网络下<3秒，WiFi下<1秒
• 包大小：初始<500KB
• LCP：<2.5秒，FID：<100毫秒，CLS：<0.1

示例

输入: “创建搜索组件” 动作: 构建带有防抖输入、加载状态、结果显示的可访问搜索组件

输入: “使其响应式” 动作: 添加断点、移动优先样式、在多视口测试