用途
本技能是一个资深前端工程技能，旨在将 20 多年的 Web 开发经验转化为可操作的指导。它适用于编写、审查或优化前端代码（HTML、CSS、JS/TS）的场景，也覆盖性能优化、可访问性审计、组件架构设计、测试策略、现代 CSS 使用、打包体积优化和渐进增强等任务。技能明确声明不适用于纯后端代码或无前端交付的 DevOps/CI/CD 工作。
主要能力
- 性能审计：依据 Core Web Vitals（LCP、INP、CLS）指标清单进行审计，检查网络瀑布、打包体积、图片格式与加载策略、字体加载、布局偏移等。
- 可访问性审计：参照 WCAG 2.2 AA 进行自动化与手动检查，包括语义 HTML、键盘可操作性、颜色对比度、alt 文本、屏幕阅读器测试、动态内容播报、表单标签与错误提示。
- 前端代码审查：按正确性、可访问性、性能、可读性、安全性的优先级进行审查，涉及 XSS 向量与不安全渲染等。
- 组件架构设计：提供组件拆分启发式、组合优于配置、状态放置决策树（表单输入→本地状态，筛选/排序→URL 参数，服务端数据→服务端状态/缓存，主题/认证→上下文/全局）。
- 现代 CSS 编写：提供布局、响应式、主题、排版、动画、优先级管理的决策指南，涵盖容器查询、级联层、子网格、:has()/:is()、视图过渡等。
- 测试策略设计：基于前端测试奖杯（静态分析→单元→集成→E2E），规定按角色和名称查询、断言用户可见结果、模拟网络而非组件等规则。
- 打包体积优化：使用 source-map-explorer 或 webpack-bundle-analyzer 审计，替换大库、动态导入、检查重复依赖、确保 tree shaking、设置性能预算（如压缩后 JS < 200KB）。
- 渐进增强：确保核心内容与导航在无 JavaScript 时可用，为异步操作添加加载/错误/空状态，尊重 prefers-reduced-motion 等用户偏好。
使用方式
当用户请求构建、审查或优化前端 UI 代码，或询问性能、可访问性、组件架构、测试策略、现代 CSS、图片/字体/打包优化等问题时触发该技能。技能激活后，首次响应需以 🧢 emoji 开头。技能内置参考文件（web-performance.md、accessibility.md、modern-css.md、component-architecture.md、testing-strategy.md、code-quality.md），仅在任务需要相应深度时加载。首次激活时会检查已安装的配套技能，对比 frontmatter 中的 recommended_skills 字段，对缺失项提示一次并提供安装命令：npx skills add AbsolutelySkilled/AbsolutelySkilled --skill <name>。
适用场景
- 编写、审查或优化 HTML/CSS/JS/TS 前端代码
- 提升 Web 性能或 Core Web Vitals 分数
- 可访问性审计或 WCAG 合规指导
- 设计组件架构或决定状态管理方案
- 制定前端测试策略
- 获取资深级别的前端代码审查反馈
- 使用现代 CSS（容器查询、级联层、子网格）
- 优化图片、字体或打包体积
限制
- 不适用于纯后端代码或无前端交付的 DevOps/CI/CD/基础设施工作。
- 参考文件内容详细且消耗上下文，仅在任务需要时加载。
- 部分具体指标（如性能预算数值、对比度比例）为技能内置指导值，实际项目需结合测量数据。
- 技能未提供具体框架的安装或配置步骤，保持框架无关。
- 关于收费、价格、平台支持范围等事实暂未提供。