用途
本技能是一份现代前端开发指南，面向使用 React、Vue、Angular 或 Svelte 构建 Web 应用的场景，覆盖组件架构、性能优化、无障碍与测试。适用时机包括：开发 Web 应用、构建组件库，或优化前端性能。
主要能力
框架与布局决策
选择框架时匹配团队经验与项目约束：需要广泛生态默认 React，渐进增强现有页面用 Vue，对体积敏感用 Svelte，需要自带依赖注入和路由的完整框架用 Angular。实现设计时，二维页面布局用 CSS Grid，一维组件对齐用 Flexbox，避免用绝对定位做布局。构建组件库时，每个组件需以命名导出提供 TypeScript props 接口、Storybook story 和单元测试，三者缺一不予合并。与后端集成时，将请求逻辑集中到带类型的 API 客户端层。
性能决策
LCP 超过 2.5 秒视为阻塞性缺陷，需用 Chrome DevTools Performance 分析并修复最大瓶颈后再合并。动画使用 transform 与 opacity 等仅合成属性，避免 width、height、top/left 触发布局重算。离线支持用 service worker：静态资源缓存优先，API 请求网络优先，离线回退缓存。初始 JS 超预算（如 200 KB gzip）时做路由级代码分割。图片使用 <picture> 提供 WebP/AVIF 源并写明宽高，首屏以下图片加 loading="lazy"。静态资源在内容哈希文件名上设置长缓存与 immutable，index.html 用 no-cache。
无障碍规则
任何交互组件都要加 ARIA 属性、键盘处理（Enter、Space、Escape）并用 axe-core 测试。表单中每个 input 通过 htmlFor/id 关联 label，错误消息用 aria-describedby 关联且键盘可操作。颜色传达含义时须有辅助指示（图标、文字、图案）。模态或下拉打开时锁定焦点，关闭时焦点返回触发元素。新增交互组件的 PR 须含 axe-core 集成测试，断言 WCAG 2.1 AA 零违规。
CSS 调试
按症状诊断：Flex 子项溢出加 min-width: 0（行）或 min-height: 0（列）；Grid 用 minmax(0, 1fr) 替代 1fr；position: sticky 失效需检查祖先 overflow 与 top/bottom 值；margin: auto 不居中需确认显式宽度或父级 flex；z-index 无效需有 position 且注意祖先层叠上下文；多行截断用 -webkit-line-clamp 配合 display: -webkit-box 与 -webkit-box-orient: vertical；容器查询需父级有 container-type: inline-size。
构建工具与 SSR
新项目默认 Vite；Webpack 仅用于既有项目或无替代插件；Turbopack 仅用于 Next.js 14+；esbuild 用于库与脚本；SWC 替代 Babel；单包项目不加 monorepo 工具。SSG 用于低频变更内容，SSR 用于个性化与强 SEO 页面，CSR 用于登录后页面，ISR 用于基本静态但需周期更新的页面。React Server Components 默认服务端，需要交互时加 'use client'，并在服务端组件中读取会话。
性能排查流程
先跑 Lighthouse 定位失败指标：LCP（图片/字体/JS/服务端 TTFB）、INP（长任务、React 重渲染、第三方脚本）、CLS（无尺寸媒体、字体交换、首屏动态内容）。再按步骤逐项修复，不跳过步骤。
代码质量与迁移
每个组件至少一个渲染路径单测和一个交互测试，CI 覆盖率门禁 80%。项目首日启用 strict: true。组件文件超 300 行则拆分。CI 包含 lint、类型检查、测试和体积检查四项门禁。迁移规则涵盖 CRA→Vite、Pages Router→App Router（增量按路由迁移）、JS→TS（逐文件重命名并限制 any）。
使用方式
该技能以规则集形式组织，按决策问题展开。在对应任务中按适用规则执行，例如新建组件库时遵循三要素要求，性能不达标时按流程排查。具体安装命令与调用方式暂未提供。
适用场景
适用于构建 Web 应用、开发组件库、优化前端性能、提升无障碍符合度，以及技术选型与迁移规划。
限制
文档未提供价格、收费模式、运行环境要求、具体安装命令等信息，这些内容暂未提供。