메뉴
前端质量与安全技能包，涵盖前端安全加固、错误监控集成、前端 CI/CD 流水线、无障碍（a11y）合规。 当需要加固前端安全防护（XSS/CSP/依赖审计）、集成错误监控（Sentry/自研SDK）、搭建前端 CI/CD 流水线（GitHub Actions/GitLab CI/Lighthouse CI）、或进行无障碍适配（WCAG/ARIA）时触发此技能。 支持 Angular、Vue、React、原生 JS、Node.js 技术栈。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
面向产品经理（非开发人员）的前端改动协作助手。当用户是 PM、设计师、运营等非技术角色， 通过自然语言描述想要修改的前端界面（文案、样式、按钮、页面布局等）时触发此技能。 助手会用通俗语言沟通、绝不展示代码、绝不进行任何 Git 分支操作，并按"理解需求 → 告知方案 → 执行修改 → 汇报结果"的流程协作。 典型触发场景：用户说"把按钮改成蓝色"、"修改登录页文案"、"调整一下首页布局"等界面改动需求，且语气明显是非技术人员。
前端架构演进技能包，涵盖框架大版本升级、微前端架构、TypeScript 迁移、CSS 架构迁移。 当需要升级框架版本（Vue2→3、React Class→Hooks、Angular 升级）、引入微前端、迁移到 TypeScript、或重构 CSS 架构时触发此技能。 支持 Angular、Vue、React、原生 JS、Node.js 技术栈。
前端工程基建技能包，涵盖项目技术栈分析、最新文档获取、构建工具链升级、前端项目重构、开发规范标准化、Monorepo 治理。 当需要分析前端项目架构、升级构建工具、统一开发规范、管理 Monorepo、或进行系统性重构时触发此技能。 支持 Angular、Vue、React、原生 JS、Node.js 技术栈。
前端性能优化技能包，涵盖懒加载与代码分割、图片优化（WebP化）、Service Worker 缓存、首屏性能优化、Core Web Vitals 治理、Bundle 分析与瘦身。 当需要优化前端加载速度、减小包体积、改善用户体验指标、配置缓存策略、或进行性能诊断时触发此技能。 支持 Angular、Vue、React、原生 JS、Node.js 技术栈。
| name | fe-quality |
| description | 前端质量与安全技能包，涵盖前端安全加固、错误监控集成、前端 CI/CD 流水线、无障碍（a11y）合规。 当需要加固前端安全防护（XSS/CSP/依赖审计）、集成错误监控（Sentry/自研SDK）、搭建前端 CI/CD 流水线（GitHub Actions/GitLab CI/Lighthouse CI）、或进行无障碍适配（WCAG/ARIA）时触发此技能。 支持 Angular、Vue、React、原生 JS、Node.js 技术栈。 |
前端质量保障的四大支柱：安全防护、错误监控、自动化流水线、无障碍合规。
对任意前端项目执行质量快速扫描：
# 1. 依赖安全审计
pnpm audit --production
# 2. 代码规范检查
npx eslint . --ext .ts,.tsx,.vue,.js
# 3. 无障碍检查（需安装 axe-core CLI）
npx @axe-core/cli http://localhost:3000
# 4. Lighthouse 综合审计
npx lighthouse http://localhost:3000 --output html --output-path report.html
根据具体需求选择对应参考文档：
| 场景 | 参考文档 | 典型触发 |
|---|---|---|
| XSS 防御、CSP 配置、依赖漏洞 | security.md | "加固安全"、"配置 CSP"、"审计依赖" |
| Sentry 接入、自研监控、Error Boundary | error-monitoring.md | "接入 Sentry"、"错误上报"、"监控" |
| CI/CD 搭建、Preview Deploy、Lighthouse CI | cicd-pipeline.md | "搭建流水线"、"自动部署"、"CI" |
| WCAG 合规、ARIA 标注、键盘导航 | accessibility.md | "无障碍"、"a11y"、"屏幕阅读器" |
按风险等级排序处理：
pnpm audit、依赖检查