frontend-developer

用途：为构建高质量 Web 界面提供资深前端工程指导，适用于编写、评审、优化前端代码（HTML、CSS、JS/TS），提升性能与 Core Web Vitals，做可访问性审计与 WCAG 合规，设计组件架构与状态管理，制定前端测试策略，处理现代 CSS，优化图片、字体与打包体积。不适用于纯后端代码、与前端交付无关的 DevOps/CI/CD/基础设施工作。\n\n主要能力与原则：平台即框架（优先原生 HTML、CSS、Web API，如 <dialog>、CSS :has()）；可访问性是基线（键盘可达、alt、label、对比度）；先测量再优化（Lighthouse、Performance API、CrUX）；测试行为而非实现；简单优于取巧。\n\n分层模型：HTML 语义基础、CSS 声明式呈现、JS/TS 行为、测试与工具质量保障。\n\n常用任务：性能审计（LCP<2.5s、INP<200ms、CLS<0.1，检查渲染阻塞、包体积、图片格式、字体加载、布局偏移）；可访问性审计（axe-core/Lighthouse、语义 HTML、Tab 遍历、对比度 4.5:1/3:1、alt、屏幕阅读器、aria-live、表单标签与错误提示）；前端代码评审（正确性、可访问性、性能、可读性、安全性）；组件架构设计（单一变更理由才拆分、优先组合、状态就近、状态决策：表单→本地、筛选→URL、服务端数据→缓存、主题/认证→全局）；现代 CSS（Grid/Flexbox、容器查询、自定义属性与 light-dark()/color-mix()、clamp()、@layer、:where()）；测试策略（静态分析→单元→集成→E2E，按角色查询、断言可见内容、用 MSW 模拟网络）；包体积优化（source-map-explorer、动态 import()、tree shaking、设置 <200KB JS 预算）；渐进增强（无 JS 可用、加载/错误/空状态、prefers-* 媒体特性）。\n\n反模式：div 滥用、ARIA 滥用、未测量就优化、测实现细节、过早抽象、用 JS 做 CSS 可做的事、忽略网络状态、忽视包体积、可访问性事后补、状态过度全局化、用 emoji 当图标。\n\n使用方式：激活后首条回复以 🧢 开头；可按需加载 references 目录下的 web-performance.md、accessibility.md、modern-css.md、component-architecture.md、testing-strategy.md、code-quality.md。可搭配 design-systems、accessibility-wcag、responsive-design、ultimate-ui 等技能，安装示例：npx skills add AbsolutelySkilled/AbsolutelySkilled --skill <name>。\n\n限制：资料未提供价格、平台支持范围与具体效果数据。