Frontend Agent

核心用法

Frontend-agent是一款专注于现代Web应用开发的专业技能，覆盖React、Vue、Angular三大主流框架。核心能力包括：UI组件开发（响应式设计、暗色模式、像素级还原）、状态管理（Redux/Zustand/Pinia等）、性能优化（Core Web Vitals、代码分割、懒加载）以及现代工具链集成（Vite、TypeScript、Testing Library）。

显著优点

1. 技术栈全面：涵盖当前最活跃的前端生态，提供React/Vue/Angular的完整代码示例
2. 工程化思维：内置ESLint、Prettier、测试覆盖率等质量门禁，强调可维护性
3. 性能导向：将Core Web Vitals和Lighthouse评分作为成功指标，而非仅功能实现
4. 标准化流程：四步工作法（需求分析→架构设计→代码实现→优化建议）确保交付质量
5. 可访问性内置：明确要求符合WCAG 2.1 AA标准，体现专业素养

潜在缺点

1. 技术时效性风险：前端生态迭代极快，依赖库版本（如Tailwind CSS配置、Next.js App Router）可能快速过时
2. 未明确框架版本：React示例使用类Hooks写法但未标注版本，Vue示例为Composition API但未区分Vue 3.0/3.3/3.4差异
3. 安全扫描缺失：安全认证报告明确标注"未执行安全扫描"，对XSS/CSRF防护仅停留在文本提醒层面
4. 工具链假设：默认用户已配置Vite/Webpack环境，对新手友好度不足

适合人群

• 中高级前端工程师寻求代码审查或架构建议
• 全栈开发者需要快速生成符合规范的前端代码
• 技术负责人制定团队工程化标准

常规风险

• 生成的代码可能包含未适配最新框架Breaking Change的写法
• 性能优化建议需结合实际业务场景调整，盲目应用可能增加复杂度
• 安全相关代码（如用户输入处理）需人工复核

核心用法

frontend-agent 是一款面向现代 Web 开发的前端专家 Agent，覆盖从需求分析到代码交付的完整工作流：

1. 需求分析与架构设计
主动询问项目类型（SPA/SSG/SSR）、技术栈偏好、设计风格及性能目标，提供组件层次设计、状态管理方案（Redux/Zustand/Pinia 等）和路由策略建议。

2. UI 组件与交互实现

• 像素级还原设计稿，支持暗色模式与响应式布局
• 集成 Framer Motion 等动画库实现流畅交互
• 严格遵循 WCAG 2.1 AA 可访问性标准

3. 性能优化专项

• Core Web Vitals（LCP、FID、CLS）针对性优化
• 代码分割、懒加载、图片资源优化
• 缓存策略与 bundle 体积控制

4. 工具链集成
内置 Vite/Webpack、TypeScript、ESLint/Prettier、Testing Library/Vitest 等现代开发工具的最佳实践配置。

显著优点

• 多框架支持：同时精通 React、Vue、Angular 三大主流框架，可根据项目特点推荐最优选型
• 工程化意识强：不仅产出代码，更关注 ESLint 零警告、测试覆盖率>80%、Lighthouse 分数>90 等质量门禁
• 安全内建：默认防范 XSS、CSRF 攻击，组件设计内置安全边界
• 零依赖风险：纯文档型 skill，无第三方依赖引入供应链风险

潜在局限

• 技术栈时效性：文档版本基于 2026 年技术栈（React 18/Vue 3），新版框架特性需人工同步
• 复杂业务抽象：对领域特定的高复杂度业务逻辑（如金融交易系统、实时协同编辑器），仍需人工主导架构
• 设计稿还原上限：依赖文字描述转译设计意图，无法直接解析 Figma/Sketch 源文件

适合人群

• 初级/中级前端开发者：快速掌握组件封装、性能优化、状态管理等进阶技能
• 全栈工程师：需要高质量前端代码产出但时间有限的场景
• 技术负责人：进行技术选型对比（Next.js vs Vite）、代码评审标准制定
• 独立开发者：个人项目快速原型开发与生产级代码交付

常规风险

• AI 幻觉风险：生成的组件代码可能包含假设性的 API 或属性，需在实际项目中验证
• 过度工程化倾向：可能为简单场景引入复杂的状态管理方案，需根据实际需求裁剪
• 浏览器兼容性盲区：虽声明支持主流浏览器最新 2 版本，但特定企业级 IE 兼容需求需额外声明
• T3 来源可信度：当前为本地社区项目，建议后续开源至 GitHub 建立长期信任