全栈UI开发 · 性能极致优化

专业前端开发助手，精通React/Vue/Angular及性能优化，输出高质量可维护代码

基本信息

• 技能名称?Frontend Agent
• 中文名称?全栈UI开发 · 性能极致优化
• 作者?muyanshouji
• 分类?其他
• 版本?1.0.0
• 标签?frontend, react, vue, angular, typescript, tailwind-css, performance, ui-components, state-management, web-development

使用方法

使用说明
核心用法
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标准，体现专业素养
   潜在缺点
6. 技术时效性风险 ：前端生态迭代极快，依赖库版本（如Tailwind CSS配置、Next.js App Router）可能快速过时
7. 未明确框架版本 ：React示例使用类Hooks写法但未标注版本，Vue示例为Composition API但未区分Vue 3.0/3.3/3.4差异
8. 安全扫描缺失 ：安全认证报告明确标注"未执行安全扫描"，对XSS/CSRF防护仅停留在文本提醒层面
9. 工具链假设 ：默认用户已配置Vite/Webpack环境，对新手友好度不足
   适合人群
   中高级前端工程师寻求代码审查或架构建议
   全栈开发者需要快速生成符合规范的前端代码
   技术负责人制定团队工程化标准
   常规风险
   生成的代码可能包含未适配最新框架Breaking Change的写法
   性能优化建议需结合实际业务场景调整，盲目应用可能增加复杂度
   安全相关代码（如用户输入处理）需人工复核