A skill pack for Claude Code and other AI coding agents covering frontend engineering infrastructure, performance optimization, architecture evolution such as framework and TypeScript migrations, and quality and security. Its skills work with Angular, Vue, React, and Node.js.
Claude Code
> /plugin marketplace add wj100/fe-skills> /plugin install fe-skills@fe-skills-marketplace
Codex
$ npx skills add wj100/fe-skills -a codex
Cursor
$ npx skills add wj100/fe-skills -a cursor
Gemini CLI
$ npx skills add wj100/fe-skills -a gemini-cli
GitHub Copilot
$ copilot plugin marketplace add wj100/fe-skills$ copilot plugin install fe-skills@fe-skills-marketplace
OpenCode
$ npx skills add wj100/fe-skills -a opencode
Windsurf
$ npx skills add wj100/fe-skills -a windsurf
面向 AI Coding Agent 的中文前端工程化技能包，覆盖工程基建、性能优化、架构演进、质量安全四大领域。
A Chinese-language frontend engineering skill pack for AI coding agents, covering engineering infrastructure, performance optimization, architecture evolution, and quality assurance.
| 技能 / Skill | 名称 / Name | 涵盖领域 / Domains |
|---|---|---|
| fe-engineering | 前端工程基建 | 技术栈分析、文档获取、构建工具升级、项目重构、开发规范、Monorepo |
| fe-performance | 前端性能优化 | 懒加载、图片优化、Service Worker、首屏优化、Core Web Vitals、Bundle 瘦身 |
| fe-architecture | 前端架构演进 | 框架升级、微前端、TypeScript 迁移、CSS 架构迁移 |
| fe-quality | 前端质量与安全 | 安全加固、错误监控、CI/CD 流水线、无障碍合规 |
| pm-fe-assistant | PM 前端改动助手 | 面向产品经理的非技术语言协作、最小改动原则、Git 分支保护、阶段化沟通 |
支持的技术栈 / Supported Tech Stacks: Angular · Vue · React · Vanilla JS · Node.js
fe-skills/
├── .claude-plugin/
│ ├── plugin.json # 插件清单 / Plugin manifest
│ └── marketplace.json # 市场清单 / Marketplace manifest
├── README.md
└── skills/
├── fe-engineering/
│ ├── SKILL.md # 路由入口 / Routing entry
│ └── references/
│ ├── stack-analysis.md # 项目技术栈分析
│ ├── docs-fetching.md # 最新文档获取
│ ├── build-tool-upgrade.md # 构建工具链升级
│ ├── refactoring.md # 前端项目重构
│ ├── dev-standards.md # 开发规范标准化
│ └── monorepo.md # Monorepo 治理
├── fe-performance/
│ ├── SKILL.md
│ └── references/
│ ├── lazy-loading.md # 懒加载与代码分割
│ ├── image-optimization.md # 图片优化（WebP化）
│ ├── service-worker.md # Service Worker 缓存
│ ├── first-paint.md # 首屏性能优化
│ ├── core-web-vitals.md # Core Web Vitals 治理
│ └── bundle-analysis.md # Bundle 分析与瘦身
├── fe-architecture/
│ ├── SKILL.md
│ └── references/
│ ├── framework-upgrade.md # 框架大版本升级
│ ├── micro-frontend.md # 微前端架构
│ ├── typescript-migration.md # TypeScript 迁移
│ └── css-architecture.md # CSS 架构迁移
└── fe-quality/
│ ├── SKILL.md
│ └── references/
│ ├── security.md # 前端安全加固
│ ├── error-monitoring.md # 错误监控集成
│ ├── cicd-pipeline.md # 前端 CI/CD 流水线
│ └── accessibility.md # 无障碍（a11y）合规
└── pm-fe-assistant/
└── SKILL.md # PM 前端改动助手（单文件 skill）
通过自建 marketplace 安装：
Install via custom marketplace:
/plugin marketplace add wj100/fe-skills
/plugin install fe-skills@fe-skills-marketplace
gemini extensions install https://github.com/wj100/fe-skills
copilot plugin marketplace add wj100/fe-skills
copilot plugin install fe-skills@fe-skills-marketplace
直接对 OpenCode 说这句话，它会自动 clone 仓库并复制到 ~/.agents/skills/：
Just tell OpenCode this sentence — it will clone the repo and copy skills to ~/.agents/skills/ automatically:
全局安装这个 skill https://github.com/wj100/fe-skills
如果只想装到当前项目（项目级安装）：
For project-level install only:
项目级安装这个 skill https://github.com/wj100/fe-skills
技能会根据对话内容自动触发。以下是各技能的典型触发场景：
Skills trigger automatically based on conversation context. Typical trigger scenarios:
| 你说的话 / What you say | 触发技能 / Triggered skill |
|---|---|
| "分析一下这个项目的技术栈" | fe-engineering |
| "帮我把 Webpack 迁移到 Vite" | fe-engineering |
| "统一一下项目的 ESLint 配置" | fe-engineering |
| "优化一下首屏加载速度" | fe-performance |
| "图片转成 WebP 格式" | fe-performance |
| "配置 Service Worker 缓存" | fe-performance |
| "把 Vue2 升级到 Vue3" | fe-architecture |
| "引入微前端架构" | fe-architecture |
| "项目迁移到 TypeScript" | fe-architecture |
| "加一下 CSP 安全策略" | fe-quality |
| "接入 Sentry 错误监控" | fe-quality |
| "搭建前端 CI/CD 流水线" | fe-quality |
| "把登录页的按钮改成蓝色" | pm-fe-assistant |
| "修改首页的提示文案" | pm-fe-assistant |
| "调整一下导航栏的间距" | pm-fe-assistant |
也可以直接通过 skill 工具手动加载：
You can also manually load skills via the skill tool:
# Claude Code
/skill fe-engineering
/skill fe-performance
# OpenCode
@skill fe-engineering
@skill fe-performance
fe-skills 专注于前端工程化工作流，与以下技能互补：
fe-skills focuses on frontend engineering workflows and complements these skills:
| 互补技能 / Complementary Skill | 职责 / Responsibility |
|---|---|
frontend-design | UI 视觉设计与美学 / UI visual design & aesthetics |
webapp-testing | Playwright E2E 测试 / Playwright E2E testing |
web-design-guidelines | Web 设计规范检查 / Web design guideline compliance |
每个技能采用三层加载架构，最大化利用上下文窗口：
Each skill uses a three-level loading architecture to maximize context window efficiency:
name + description，始终在上下文中（~100 tokens）SKILL.md 主体，技能触发时加载（<200 行）references/*.md，按需加载（150-350 行/文件）所有内容都是可执行的工作流，不是知识百科。每个参考文件遵循：
All content is executable workflows, not encyclopedic knowledge. Each reference file follows:
问题识别 → 诊断分析 → 分步执行 → 验证确认
Problem identification → Diagnosis → Step-by-step execution → Verification
说明文字使用中文，技术术语保留英文原文：
Explanations in Chinese, technical terms kept in English:
执行 `npm run build` 构建生产环境包，使用 `webpack-bundle-analyzer` 分析产物体积。
每个参考文件在适用时都会提供框架特定的指导：
Each reference file provides framework-specific guidance where applicable:
| 技术栈 / Stack | 覆盖范围 / Coverage |
|---|---|
| React | Next.js, CRA, hooks 模式, React.lazy, ErrorBoundary |
| Vue | Vue 2/3, Nuxt, Composition API, Pinia, defineAsyncComponent |
| Angular | Angular 14+, standalone components, Angular Universal, NgRx |
| Vanilla JS | 原生 DOM API, Web Components, 无框架场景 |
| Node.js | 构建工具配置, SSR 服务端, 工具链脚本 |
欢迎通过 Issue 或 PR 贡献内容。请遵循以下原则：
Contributions welcome via Issue or PR. Please follow these principles:
License: MIT
Stars on GitHub
Helps you take a change from a rough idea or bug report through to a tested, reviewed result, with each step handled by a focused skill. Its skills cover pinning down domain terms, designing module interfaces, diagnosing hard bugs, and reviewing changes against your repo's coding standards.
@mattpocockA development methodology for coding agents that makes the agent brainstorm before building, follow plans, run parallel work and finish branches in a disciplined way. You get fewer skipped steps and more consistent results from your coding assistant.
@obraGives your coding agent a planning, testing and review routine to follow on every task. It plans before building, checks changes with tests, has a fresh reviewer look for regressions, and saves repeated wins as reusable skills.
@affaan-mDeveloper tools for working on the React codebase itself. Provides skills for extracting error messages, managing and debugging feature flags across release channels, running Flow type checks, and fixing lint and formatting issues before committing.
@facebookA skill pack for Claude Code and other AI coding agents covering frontend engineering infrastructure, performance optimization, architecture evolution such as framework and TypeScript migrations, and quality and security. Its skills work with Angular, Vue, React, and Node.js. Install it with the command on its page. It includes fe-architecture, fe-engineering, fe-performance. Its skills do not fire on their own yet. Free and open source.
Is this plugin yours?
Claim it with GitHubSubmit a pluginPromote it