Frontend Developer
构建现代 React 和 Next.js 应用程序
前端开发需要对 React、性能优化和无障碍标准有深入的专业知识。本技能提供生产就绪的指南，帮助您使用现代工具和最佳实践构建可扩展的 Web 应用程序。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“Frontend Developer”。 创建一个无障碍模态对话框组件
预期结果:
- 具有焦点陷阱和键盘导航的模态框组件
- 屏幕阅读器兼容性的 ARIA 属性
- 背景点击处理和 Escape 键关闭
- 模态框 props 和配置的 TypeScript 接口
正在使用“Frontend Developer”。 优化渲染缓慢的产品列表
预期结果:
- 大型数据集的虚拟滚动实现
- 使用 React.memo 记忆化的产品卡组件
- 防抖搜索和过滤处理器
- 图片密集型组件的代码分割
安全审计
安全This is a prompt-only skill containing only instructional text in SKILL.md. Static analysis scanned 0 files with 0 lines of executable code and detected no security patterns. The skill provides frontend development guidance for React and Next.js without any code execution, network access, or file system operations. No malicious patterns or prompt injection attempts detected.
质量评分
你能构建什么
React 组件开发
使用 TypeScript、正确的 hooks 使用和优化的渲染模式构建生产就绪的 React 组件，以实现可扩展的应用程序。
Next.js 应用程序架构
使用 Server Components、Server Actions 和优化的数据获取策略设计全栈 Next.js 应用程序。
性能优化
通过代码分割、延迟加载和 Core Web Vitals 优化技术分析和改进前端性能。
试试这些提示
创建一个可重用的 React 按钮组件，带有 TypeScript props，支持变体（主要、次要）、尺寸和禁用状态。包含 Tailwind CSS 类和正确的无障碍属性。
构建一个 Next.js 15 Server Component，用于从 API 获取产品数据，实现 Suspense 边界进行流式处理，并优雅地处理加载和错误状态。
使用 Next.js Server Actions 实现联系表单，配合 Zod 验证、使用 useOptimistic 的乐观更新，以及带有用户反馈的正确错误处理。
分析此 React 组件的性能问题。识别不必要的重新渲染，建议记忆化策略，并提供使用 useMemo、useCallback 和 React.memo 优化的代码。
最佳实践
- 始终为 props、状态和 API 响应包含 TypeScript 类型，以尽早捕获错误
- 为所有异步操作实现正确的加载状态和错误边界
- 使用语义 HTML 元素和 ARIA 属性确保无障碍合规性
避免
- 避免在可以使用 React Query 或 Server Components 时使用 useEffect 获取数据
- 不要在有专用数据获取库时将服务端状态存储在 React 状态中
- 永远不要跳过无障碍测试或假设默认 HTML 行为足够