一、组件开发类
原子组件生成
"用React 18 + TypeScript实现一个可复用的表单输入框组件，要求： 支持标签、占位符、错误提示 集成react-hook-form验证 包含单元测试模板 请用表格说明props设计，并给出JSDoc注释示例"
可视化图表
"基于ECharts 5开发一个响应式折线图组件，要求： 自动适配容器宽度 支持JSON/API两种数据源格式 显示loading状态 包含点击事件回调 给出TS类型定义和useEffect依赖项优化建议"
二、状态管理类
全局状态设计
"为Next.js 14电商项目设计Zustand状态管理方案： 购物车增删改查操作 持久化到localStorage 防抖保存机制 用流程图说明状态更新逻辑，并比较与Redux Toolkit的性能差异"
表单状态优化
"在React中使用useReducer优化复杂表单状态： 20+字段的动态表单 跨字段联动验证 草稿自动保存功能 给出reducer函数结构设计和防内存泄漏方案"
三、API交互类
请求封装模板
"用Axios为Vue 3项目封装REST API请求模块，要求： 自动携带JWT令牌 错误统一处理（401跳转登录） 支持请求取消 响应数据类型推断 给出拦截器代码和TypeScript泛型应用示例"
GraphQL集成
"在Nuxt3中集成Apollo Client实现： 自动生成TypeScript类型 分页查询缓存策略 请求错误重试机制 用序列图说明服务端通信流程，并给出性能监控指标建议"
四、性能优化类
渲染性能
"分析React组件树中因非必要渲染导致的性能问题： 使用Profiler API定位瓶颈 给出memo/useMemo优化方案 对比优化前后Lighthouse评分差异"
资源加载
"为Webpack项目设计按需加载方案： 路由级代码分割 预加载策略（prefetch/preload） 加载失败兜底UI 给出配置代码和加载时序图"
五、调试辅助类
错误溯源
"在Next.js SSR项目中遇到hydration错误： 服务端/客户端渲染不一致 第三方库兼容性问题 请给出分步排查流程图和解决方案优先级列表"
测试用例
"为React自定义hooks编写Vitest测试用例： 异步操作模拟 上下文依赖注入 覆盖分支测试 给出测试金字塔结构示例和代码覆盖率优化建议"
对话技巧
明确技术栈："使用Vue3 Composition API实现..."
指定输入输出："输入：用户行为数据数组 输出：桑基图可视化组件"
限制条件："兼容IE11的情况下..."
请求解释："用通俗语言解释Intersection Observer的实现原理"
对比方案："比较SSR和SSG在电商详情页的适用场景"
通过结构化描述（输入/输出/约束条件）+ 技术细节（框架/工具版本）+ 交付形式（代码/图表/方案对比），可显著提升Claude 3.5的响应质量。
