Fe quality

中文前端开发技能包 / Chinese frontend engineering skill pack — 工程基建、性能优化、架构演进、质量安全 (Claude Code / Gemini / OpenCode)

Install

npx -y skills add wj100/fe-skills --skill fe-quality

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
6 stars6 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

前端质量与安全技能包，涵盖前端安全加固、错误监控集成、前端 CI/CD 流水线、无障碍（a11y）合规。当需要加固前端安全防护（XSS/CSP/依赖审计）、集成错误监控（Sentry/自研SDK）、搭建前端 CI/CD 流水线（GitHub Actions/GitLab CI/Lighthouse CI）、或进行无障碍适配（WCAG/ARIA）时触发此技能。支持 Angular、Vue、React、原生 JS、Node.js 技术栈。

SKILL.md

2.2 KB, as published. Nobody here has run it

前端质量与安全

前端质量保障的四大支柱：安全防护、错误监控、自动化流水线、无障碍合规。

快速健康检查

对任意前端项目执行质量快速扫描：

# 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"、"屏幕阅读器"

优先级建议

按风险等级排序处理：

P0 安全漏洞 → 立即修复（XSS、依赖高危漏洞）
P1 错误监控 → 上线前必须具备（生产环境可观测性）
P2 CI/CD → 提升团队效率（自动化构建、测试、部署）
P3 无障碍 → 持续改进（合规要求、用户体验）

组合使用

安全 + CI/CD：在流水线中集成 pnpm audit、依赖检查
监控 + 安全：Sentry 中配置安全相关告警规则
a11y + CI/CD：在 PR 检查中集成 axe-core 自动化测试