Back to Details

senior-frontend-software-engineer

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Senior Front End Software Engineer

资深前端软件工程师

When to Use

适用场景

  • Complex React/Next.js features, layouts, or design-system components
  • Front-end architecture decisions (state, composition, RSC vs client)
  • Performance work: bundle size, waterfalls, Core Web Vitals
  • Accessibility fixes and WCAG-oriented implementation
  • Senior front-end PR review (correctness, a11y, maintainability)
  • 复杂React/Next.js功能、布局或设计系统组件
  • 前端架构决策（状态管理、组件组合、RSC vs 客户端组件）
  • 性能优化工作：包体积、请求瀑布、Core Web Vitals
  • 无障碍修复及面向WCAG的实现
  • 资深前端PR评审（正确性、无障碍性、可维护性）

When NOT to Use

不适用场景

  • End-to-end feature needing new API and schema → 
    fullstack-software-engineer
    or 
    senior-fullstack-developer
  • Pure visual/design direction without code → design review workflows
  • Infrastructure, deploy, or monitoring setup → 
    devops
  • Multi-service backend design → 
    senior-software-engineer
  • 需要新API和Schema的端到端功能 → 
    fullstack-software-engineer
    或 
    senior-fullstack-developer
  • 无代码实现的纯视觉/设计方向评审 → 设计评审流程
  • 基础设施、部署或监控设置 → 
    devops
  • 多服务后端设计 → 
    senior-software-engineer

Related skills

相关技能

NeedSkill
Full-stack slice (API + UI)
fullstack-software-engineer
, 
senior-fullstack-developer
Cross-cutting engineering design
senior-software-engineer
Docs and UI copy in product docs
tech-writer-researcher
Pipeline and preview deploys
devops
UX flows and design specs
product-designer
UI implementation from specs
ui-software-engineer
RUM/load investigation and perf reports
performance-engineer
Browser auth, CSRF, CORS, session cookies
web-application-developer
Authorized web/API security testing context
web-pentester
需求技能
全栈开发（API + UI）
fullstack-software-engineer
, 
senior-fullstack-developer
跨领域工程设计
senior-software-engineer
产品文档中的文档与UI文案
tech-writer-researcher
流水线与预览部署
devops
UX流程与设计规范
product-designer
根据规范实现UI
ui-software-engineer
RUM/负载调查与性能报告
performance-engineer
浏览器认证、CSRF、CORS、会话Cookie
web-application-developer
授权式Web/API安全测试场景
web-pentester

Core Workflows

核心工作流程

1. Component and feature design

1. 组件与功能设计

  1. Map user flows to routes and layout boundaries
  2. Split server (data fetch, static) vs client (interaction) deliberately
  3. Define component API: props, slots, variants, controlled vs uncontrolled
  4. Plan states: loading, empty, error, partial success
  5. Align with design tokens; avoid one-off magic values
See 
references/component_architecture.md
for composition patterns.
  1. 将用户流程映射到路由和布局边界
  2. 明确划分服务端（数据获取、静态内容）与客户端（交互逻辑）职责
  3. 定义组件API：props、插槽、变体、受控与非受控模式
  4. 规划状态：加载、空态、错误、部分成功
  5. 对齐设计令牌；避免一次性魔法值
组件组合模式请参考 
references/component_architecture.md
。

2. State and data fetching

2. 状态管理与数据获取

NeedPrefer
Server dataRSC fetch, Server Actions for mutations
Client cacheTanStack Query or similar with stale times
URL stateSearch params for shareable filters
Global UIMinimal context; colocate state
Avoid prop drilling through deep trees—compose or use context at stable boundaries.
See 
references/state_data_fetching.md
for waterfalls and cache invalidation.
需求推荐方案
服务端数据RSC获取，Server Actions用于数据变更
客户端缓存TanStack Query或类似工具，配置过期时间
URL状态使用搜索参数存储可共享的筛选条件
全局UI状态最小化Context使用；状态就近托管
避免通过深层组件树进行props透传——在稳定边界处进行组件组合或使用Context。
请求瀑布与缓存失效相关内容请参考 
references/state_data_fetching.md
。

3. Styling and design system

3. 样式与设计系统

  • Use design tokens (spacing, color, typography) from system
  • Variants via 
    cva
    or equivalent; document in Storybook if present
  • Responsive and dark mode from tokens, not duplicated rules
  • Do not fork components without team agreement
See 
references/design_system.md
for extension rules.
  • 使用设计系统提供的设计令牌（间距、颜色、排版）
  • 通过 
    cva
    或类似工具实现变体；若有Storybook则需在其中文档化
  • 基于令牌实现响应式布局与暗黑模式，避免重复规则
  • 未经团队同意，请勿分叉组件
扩展规则请参考 
references/design_system.md
。

4. Accessibility and quality

4. 无障碍与质量保障

  • Semantic HTML first; ARIA only when needed
  • Keyboard: focus order, focus visible, escape to close
  • Labels on every input; announce dynamic updates thoughtfully
  • Target WCAG 2.1 AA for customer-facing flows
See 
references/a11y_performance.md
for checklist and metrics.
  • 优先使用语义化HTML；仅在必要时使用ARIA
  • 键盘交互：焦点顺序、焦点可见性、按ESC关闭弹窗
  • 每个输入框都要有标签；动态更新需合理通知用户
  • 面向客户的流程需达到WCAG 2.1 AA标准
检查清单与指标请参考 
references/a11y_performance.md
。

5. Performance

5. 性能优化

  • Measure before optimizing (Lighthouse, Web Vitals, bundle analyzer)
  • Fix waterfalls: parallelize fetches, hoist server data
  • Code-split routes and heavy widgets
  • Images: dimensions, modern formats, priority for LCP
See 
references/a11y_performance.md
for INP and CLS tactics.
  • 优化前先测量（Lighthouse、Web Vitals、包分析工具）
  • 修复请求瀑布：并行请求、提升服务端数据优先级
  • 对路由和重型组件进行代码分割
  • 图片处理：设置尺寸、使用现代格式、为LCP图片设置优先级
INP与CLS优化策略请参考 
references/a11y_performance.md
。

6. Testing and review

6. 测试与评审

LayerFocus
UnitHooks, formatters, reducers
ComponentReact Testing Library—behavior not implementation
E2ECritical journeys only
PR review: a11y, edge states, unnecessary client boundaries, bundle impact, test gaps.
See 
references/frontend_code_review.md
for review rubric.
层级重点
单元测试Hooks、格式化工具、Reducer
组件测试React Testing Library——关注行为而非实现细节
端到端测试仅覆盖关键流程
PR评审要点： 无障碍性、边缘状态、不必要的客户端边界、包体积影响、测试缺口。
评审准则请参考 
references/frontend_code_review.md
。

When to load references

何时查阅参考文档

  • Components and composition → 
    references/component_architecture.md
  • State and fetching → 
    references/state_data_fetching.md
  • Design system → 
    references/design_system.md
  • A11y and performance → 
    references/a11y_performance.md
  • Code review → 
    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