mcpField
S
senior-frontend-software-engineer

senior-frontend-software-engineer

github.com/rade-nugroho开发1241 次安装23 周前更新
代码仓库

关于 senior-frontend-software-engineer

面向资深前端工程师的开发技能，适用于复杂 React/Next.js 功能、架构决策、性能优化和代码审查。内容还涵盖无障碍实践、测试与设计系统协作。

主要功能

  1. 01设计组件结构与功能边界
  2. 02规划状态管理和数据获取
  3. 03遵循设计令牌与组件规范
  4. 04实施无障碍交互
  5. 05分析并优化前端性能
  6. 06开展测试与代码审查

适用场景

  1. 01构建复杂 React/Next.js 页面或组件
  2. 02决定服务端与客户端渲染边界
  3. 03排查数据请求瀑布和包体积问题
  4. 04审查界面的无障碍与边缘状态

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/rade-nugroho/agentic-enteprises-skill --skill senior-frontend-software-engineer

安装后在 Claude Code 中输入/senior-frontend-software-engineer确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
a11y_performance.md
component_architecture.md
design_system.md
frontend_code_review.md
state_data_fetching.md

详细介绍

高级前端软件工程师

适用场景

  • 复杂的 React/Next.js 功能、布局或设计系统组件
  • 前端架构决策（状态、组合方式、RSC 与客户端渲染的取舍）
  • 性能优化：打包体积、瀑布流、Core Web Vitals
  • 无障碍修复和符合 WCAG 的实现
  • 高级前端 PR 评审（正确性、无障碍、可维护性）

不适用场景

  • 需要新增 API 和 Schema 的端到端功能 → fullstack-software-engineer 或 senior-fullstack-developer
  • 不涉及代码的纯视觉或设计方向 → 设计评审工作流
  • 基础设施、部署或监控配置 → devops
  • 多服务后端设计 → senior-software-engineer

相关技能

需求技能
全栈功能切片（API + UI）fullstack-software-engineer、senior-fullstack-developer
跨领域工程设计senior-software-engineer
产品文档中的文档和 UI 文案tech-writer-researcher
流水线和预览部署devops
UX 流程和设计规范product-designer
根据规范实现 UIui-software-engineer
RUM/负载调查和性能报告performance-engineer
浏览器身份验证、CSRF、CORS、会话 Cookieweb-application-developer
授权的 Web/API 安全测试web-pentester

核心工作流

1. 组件和功能设计
  1. 将用户流程映射到路由和布局边界
  2. 有意识地拆分服务端（数据获取、静态内容）与客户端（交互）
  3. 定义组件 API：props、插槽、变体、受控与非受控模式
  4. 规划各类状态：加载中、空状态、错误、部分成功
  5. 与设计令牌保持一致；避免使用一次性的神奇数值

组合模式请参阅 references/component_architecture.md。

2. 状态和数据获取
需求优先选择
服务端数据RSC fetch；通过 Server Actions 执行变更
客户端缓存TanStack Query 或类似工具，并设置 stale time
URL 状态使用搜索参数保存可分享的筛选条件
全局 UI尽量减少 context；将状态放在就近位置

避免通过深层组件树逐层传递 props——应使用组合，或在稳定的边界使用 context。

瀑布流和缓存失效请参阅 references/state_data_fetching.md。

3. 样式和设计系统
  • 使用系统中的设计令牌（间距、颜色、字体）
  • 使用 cva 或同类工具定义变体；如果项目中有 Storybook，则在其中记录
  • 响应式布局和深色模式应使用设计令牌，而不是重复编写规则
  • 未经团队同意，不要派生组件的独立版本

扩展规则请参阅 references/design_system.md。

4. 无障碍和质量
  • 优先使用语义化 HTML；仅在需要时使用 ARIA
  • 键盘操作：焦点顺序、焦点可见、按 Escape 关闭
  • 为每个输入项添加标签；谨慎播报动态更新
  • 面向客户的流程以 WCAG 2.1 AA 为目标

检查清单和指标请参阅 references/a11y_performance.md。

5. 性能
  • 优化前先测量（Lighthouse、Web Vitals、打包分析器）
  • 修复瀑布流：并行获取数据、提升服务端数据
  • 对路由和大型组件进行代码拆分
  • 图片：设置尺寸、使用现代格式，并为 LCP 设置优先级

INP 和 CLS 优化方法请参阅 references/a11y_performance.md。

6. 测试和评审
层级重点
单元测试Hooks、格式化器、Reducers
组件测试React Testing Library——测试行为，而非实现
E2E仅覆盖关键用户旅程

**PR 评审：**无障碍、边缘状态、不必要的客户端边界、对打包体积的影响、测试缺口。

评审标准请参阅 references/frontend_code_review.md。

何时加载参考资料

  • 组件和组合 → references/component_architecture.md
  • 状态和数据获取 → references/state_data_fetching.md
  • 设计系统 → references/design_system.md
  • 无障碍和性能 → references/a11y_performance.md
  • 代码评审 → references/frontend_code_review.md

评论

支持 Markdown