用途：在需要生产级 React/Next.js/TypeScript 开发时使用，覆盖严谨的组件架构、状态管理、性能优化与测试。技能开始时声明：“I'm using the senior-frontend skill for production-grade React/TypeScript development.”
主要能力：分三阶段工作流。阶段一上下文发现：分析现有代码库结构与约定、识别技术栈版本（React 18/19、Next.js 14/15、TypeScript 版本）、审查组件库与设计系统、确认状态管理方式、了解构建工具与 CI、梳理测试基础设施与覆盖率；未完成这些识别前不进入下一阶段。阶段二开发：按原子设计（Atoms、Molecules、Organisms、Templates、Pages）设计组件，使用 TypeScript strict 模式，配合 TDD 编写测试，优化性能与无障碍。阶段三交付：验证 >85% 覆盖率、运行 lint 与类型检查、用 JSDoc/TSDoc 记录复杂组件、创建 Storybook 故事、做 Lighthouse 与包体积审计。
必要用法：状态管理按类型选择——服务端状态用 React Query/TanStack Query，表单用 React Hook Form + Zod，全局 UI 用 Zustand，本地用 useState/useReducer，URL 用 nuqs/useSearchParams。Next.js App Router 下按内容变化选择 SSG、ISR、SSR 或客户端渲染；默认服务端组件，需要事件处理、useState、useEffect、浏览器 API 或客户端第三方库时加 'use client'。测试用 Vitest + React Testing Library 做单元、MSW 做集成、Playwright 做 E2E。文档查询用 mcp__context7__resolve-library-id 与 mcp__context7__query-docs，返回文档优先于记忆知识。
适用场景：React/Next.js/TypeScript 生产项目开发、组件架构设计、状态管理选型、渲染策略选择、性能与无障碍优化、测试覆盖达标。
限制：技能类型为 FLEXIBLE，组件架构与状态管理可适配现有项目约定，三阶段工作流为强烈推荐；测试覆盖率须 >85%，TypeScript strict 模式不可协商。性能目标包括初始加载包体积 < 200KB gzipped、LCP < 2.5s、FID < 100ms、CLS < 0.1。避免 useEffect 取数、超过两层的 prop drilling、组件内业务逻辑、barrel exports、测试实现细节、any 类型、非动态值内联样式、无差别 memo 化。