开发技能

Fetch execution traces, records of an agent’s actions, from LangSmith Studio to debug LangChain and LangGraph agents. Inspect errors, tool calls, memory operations, execution times, and token usage, or export records for further review.

中文简介正在准备中。当前显示英语简介。

• Investigating an agent failure
• Checking tool selection and execution order
• Investigating memory storage and recall

使用Python或TypeScript设计和实现连接AI智能体与外部服务的MCP服务器，并完成输入验证、错误处理、代码审查及运行效果评估。

• 为外部API构建MCP服务器
• 围绕智能体任务设计工具
• 审查输入验证与错误处理

使用React和shadcn/ui制作由多个组件组成的界面，加入状态管理和页面切换，再打包为可在Claude对话中分享的单个HTML文件。

• 组合多个组件制作界面
• 加入状态管理和页面切换
• 将React应用打包为单个HTML文件分享

为codegraph添加新的编程语言支持，完成语法解析配置、信息提取实现和测试，并在三个真实代码库中验证提取质量，比较使用前后的代理工作量与费用。

• 为codegraph添加新语言
• 验证函数与导入信息的提取
• 在三个真实代码库中比较效果

检查页面在禁用或无法使用JavaScript时的重要内容与基本功能，核对初始HTML和noscript替代内容，并指出需要修改的位置。

• 检查禁用JavaScript后的页面显示
• 检查依赖JavaScript的功能替代内容
• 核对初始HTML中的重要内容

检查是否采用CSS重置或样式标准化机制，以及加载顺序是否合适，结合不同屏幕宽度和交互状态指出具体修改位置，减少浏览器默认样式造成的显示差异。

• 排查浏览器之间的显示差异
• 为新网站建立样式基础
• 检查CSS框架内置的重置机制

检查网页图片的加载设置是否符合显示位置，为屏幕外图片设置延迟加载，为首屏重要图片调整加载优先级，并检查图片尺寸，提供修改后的HTML和验证方法。

• 检查屏幕外图片的延迟加载
• 确认主视觉图片的加载优先级
• 为延迟加载图片指定宽高

检查界面中的数量文案和翻译文件，找出数字拼接及仅区分单复数的实现，并按目标语言所需的复数类别调整表达。

• 审查多语言界面的数量显示
• 支持阿拉伯语和俄语的复数形式
• 检查翻译文件与国际化配置

检查网页应用是否支持PWA安装，找出HTTPS、配置文件和图标方面的缺项，同时核对离线响应与启动地址设置。

• 检查PWA安装支持情况
• 添加安装提示前核对配置
• 检查图标尺寸与格式

创建断网时显示的自定义提示页面，通过service worker提前缓存并在页面导航失败时返回，同时检查外部资源依赖和备用页面的显示条件。

• 为PWA添加离线页面
• 完善断网时的使用提示
• 检查离线页面的预先缓存

测量页面加载时间，以低于3秒为目标排查延迟原因。通过实际测量检查大型资源、网络请求和渲染开销，并据此考虑或实施延迟加载、缓存等改进。

• 排查页面加载缓慢的原因
• 定位大型资源和耗时渲染步骤
• 检查低速网络下的显示性能

测量包含图片、JavaScript等全部资源的页面总传输量，查找加载缓慢的原因，并以低于1500KB为目标优化图片、压缩代码及移除不必要的资源。

• 调查移动网络下的加载延迟
• 检查页面总量是否超出上限
• 精简大型图片和JavaScript

Audit web images that are larger than their displayed size and help serve suitable versions for different screens. Review image dimensions, responsive image settings, and Lighthouse findings, then provide updated HTML and steps to verify the changes.

中文简介正在准备中。当前显示英语简介。

• Finding oversized images on mobile pages
• Reviewing srcset and sizes against the actual layout
• Adding image variants for different screen widths

检查srcset、sizes与CSS布局是否一致，让浏览器按屏幕宽度和分辨率选择合适的图片，找出手机端下载过大图片或图片尺寸与显示宽度不符的问题。

• 检查文章图片的响应式适配
• 排查手机端下载过大图片
• 检查卡片和图库的图片尺寸

检查高像素密度屏幕上的图像模糊问题，核对两倍、三倍分辨率素材、HTML与CSS设置、CDN或构建时的图像转换，以及分发配置和加载方式。

• 排查高像素密度屏幕上的图像模糊
• 检查图像的srcset设置
• 适配高像素密度屏幕的CSS背景图

检查阻碍页面初始显示的 CSS 与 JavaScript，通过实测确认原因，调整加载顺序及关键样式的位置，改善内容显示延迟。

• 调查加载时持续白屏的原因
• 调整 CSS 与 JavaScript 加载方式
• 内联初始显示所需的 CSS

检查网页中的JPEG是否先显示模糊预览再逐渐清晰，找出可考虑转换的图像，并结合文件大小、显示尺寸和加载方式提出改善显示体验的建议。

• 检查JPEG加载时的显示效果
• 检查WebP或AVIF的备用JPEG
• 检查CDN或构建时的图像分发设置

检查网站图片的文件大小、显示尺寸和加载方式，按格式压缩图片并清除多余信息，对比修改前后的文件大小与缩减比例。

• 查找拖慢页面加载的图片
• 对比压缩前后的文件大小
• 清除图片中多余的元数据

通过实际测量查明页面加载缓慢的原因，帮助配置重要图片和字体的预加载、外部服务器的预连接，以及后续页面资源的预取，使浏览器更早开始准备。

• 调查主要图片和字体的显示延迟
• 评估外部服务的预连接
• 预取下一页面需要的文件

检查分页HTML中的当前页标记、前后页链接和键盘操作，并修正结构，让使用屏幕阅读器的用户也能了解当前位置及链接目标。

• 检查搜索结果的分页导航
• 确认键盘翻页操作
• 改进屏幕阅读器使用的标签

通过测量确认外部字体或API的连接等待是否影响页面加载，检查并补充重要目标的预连接提示，清理不必要的设置，帮助改善页面加载速度。

• 调查外部字体或API的连接延迟
• 检查head中的预连接提示
• 清理不必要的预连接设置

检查HTML的`<object>`元素，补充嵌入内容无法加载时显示的替代文本或内容，确认替代内容能传达同等信息，并说明无障碍验证方法。

• 查找缺少替代内容的object元素
• 为嵌入内容加载失败做好准备
• 检查替代内容是否传达同等信息

检查网页加载情况，根据测量结果查找延迟原因，为图片、字体和外部服务连接选择资源提示，协助提前获取重要文件、预先建立连接或预取下一页面所需资源。

• 检查重要图片和字体的预加载
• 调整外部服务的预连接
• 预取下一页面可能使用的文件

检查文字大小、宽度和间距中的固定像素值，协助改用随屏幕宽度及浏览器字体设置变化的相对单位，并在提出修改前核对不同宽度和交互状态下的实际布局。

• 适配浏览器字体大小设置
• 将固定宽度改为灵活布局
• 检查组件内部间距的单位