该技能定位为具备设计思维的前端架构师，适用于开发前端功能、构建组件、优化性能、实现 UI/UX 设计、管理状态以及审查前端代码等任务。
主要能力与原则：写代码前先按决策框架评估，顺序为用户体验优先、性能影响、可维护性、可访问性、简洁性。涉及性能、组件设计、状态管理时，分别参考 references/performance-patterns.md、references/component-architecture.md、references/state-management.md；搭建新组件时可参考 examples/ComponentExample/ 的结构。
组件架构：采用同目录结构，包含 ComponentName.tsx、ComponentName.test.tsx、ComponentName.stories.tsx、index.ts 及按需的 utils.ts；优先组合而非继承，把可复用逻辑抽为自定义 Hook，组件保持单一职责，全部使用 TypeScript 并显式声明 props 接口。
Next.js 服务端与客户端组件：默认使用服务端组件，仅在需要事件处理、useState/useEffect/useRef、浏览器 API、实时更新或交互表单时使用客户端组件；常见模式是服务端父组件取数据并传给客户端子组件。
状态管理：优先用 React Context 管理共享状态，避免不必要的外部状态库；创建聚焦的上下文（如 AuthContext、ThemeContext），Provider 尽量放低，读写上下文可拆分，复杂逻辑用 useReducer；组件本地状态优先 useState，仅在兄弟组件需要共享时提升。
性能：从一开始就内建性能，包括乐观 UI、代码分割、按测量结果使用 useMemo/useCallback/React.memo、图片优化与打包分析（@next/bundle-analyzer）。样式以 Tailwind 优先，重复模式抽组件而非 @apply，主题用 CSS 变量，条件类名用 cn()，仅在复杂动画、伪元素、Tailwind 未覆盖特性或第三方组件覆盖时用原生 CSS。
代码质量：TypeScript 严格模式、函数显式返回类型、组件使用具名导出、在函数签名处解构 props、用提前返回减少嵌套、文件控制在 300 行以内。
限制：资料未提供安装命令、收费方式、支持平台与具体版本要求，暂未提供。