frontend-engineering

用途

前端工程方法论，用于构建应用面向用户的层——组件、状态管理、API 集成、响应式布局与客户端性能。该方法论定位为连接 UX 设计（用户旅程、线框、无障碍标准）与评审者（代码质量门禁）之间的环节。

职责边界

该技能明确划分了前端工程师拥有与不拥有的领域：

你负责：

• 组件实现——UI 组件组合、props/state 接口、渲染模式、生命周期
• 状态管理——客户端状态架构、数据获取模式、缓存、乐观更新
• API 集成——前端到后端的数据流、认证流程（OAuth、JWT）、实时更新
• 响应式设计实现——布局系统、断点、跨设备测试
• 客户端性能——打包优化、懒加载、Core Web Vitals、渲染优化
• 前端测试——组件测试、集成测试、视觉回归、无障碍测试
• 构建工具——打包器配置、TypeScript 配置、linting、格式化、开发环境

你不负责：

• 用户旅程、线框、无障碍标准、交互设计——属于 ux-designer
• API 契约设计——属于 technical-architect
• 测试策略与自动化——属于 QA-engineer
• 视觉识别与品牌规范——属于 brand-designer
• 编辑内容与文案——属于 writer
• 代码评审与质量门禁——属于 reviewer
• CI/CD 流水线基础设施——属于 platform-engineer

参考文件

技能附带以下参考文件，按需加载：

• references/component-architecture.md：设计组件树时加载——组合模式、props/state 接口、生命周期、无障碍基础
• references/state-management.md：选择与实现状态管理时加载——客户端与服务端状态、数据获取、缓存、乐观更新
• references/api-integration.md：连接前端与后端时加载——API 客户端设计、认证令牌流程、UI 中的错误处理、实时订阅
• references/responsive-layout-testing.md：实现响应式设计（布局系统选择——Grid vs Flexbox vs Container Queries、断点策略、跨设备测试方法论）与测试前端代码（使用 Testing Library 的组件测试、使用 Playwright/Cypress 的集成测试、视觉回归、使用 axe-core 与 Lighthouse CI 的无障碍测试、测试数据管理）
• references/performance.md：优化客户端性能时加载——Core Web Vitals、打包分析、代码分割、渲染优化

核心原则

1. 组件是组合单元，而非页面——将组件设计并构建为可复用、可组合的单元。页面由组件组装而成，而非作为单体构建。设计良好的组件可以在其创建者从未想象过的场景中复用。

2. 状态与需要它的组件就近放置——并非每个状态都属于全局存储。本地状态保持本地。服务端状态被获取并缓存。只有真正共享的应用状态才属于全局上下文。

3. 为每种状态设计，而不仅是顺利路径——每个依赖数据的组件至少有四种状态：加载、空、错误、成功。为全部四种状态设计不是锦上添花——它创造有韧性的用户体验。

4. 无障碍不是功能，而是要求——键盘导航、屏幕阅读器支持、颜色对比度、焦点管理不是增强项。它们是实现契约的一部分。

5. 性能是用户体验问题——每一毫秒的加载时间、每一次布局偏移、每一次卡顿的交互都会侵蚀用户信任。性能预算、打包分析与渲染优化是前端工程的一部分，而非事后考虑。

适用场景

适用于前端工程师在构建用户界面层时参考，包括组件设计、状态架构决策、前后端数据流集成、响应式布局实现、客户端性能优化以及前端测试策略制定。

限制

该资料未提供具体的安装命令、代码示例、收费信息或平台支持细节。