AI Frontend Guard 是一个专为前端开发者设计的AI代码质量管控工具。当使用 Claude Code、GitHub Copilot、Cursor 等AI编程助手时，它能帮助你：

• ✅ 确保AI生成的代码符合前端最佳实践
• ✅ 自动检测潜在的性能、安全和质量问题
• ✅ 提供可定制的代码规范规则
• ✅ 与主流AI工具无缝集成
• ✅ Trae Skill 体系支持：支持对话调用和自动触发

项目内置了完整的前端领域 Skill 规约体系，支持在 Trae 对话中调用：

# 显性调用
用 frontend-code-review 审查 src/ 下的代码

# 隐性触发
帮我查一下这段代码规范
做一次前端代码审查

AI Frontend Guard 执行 aifg analyze 时会自动调用相关 Skill，检查结果融入工具输出报告。

.trae/skills/
├── frontend-code-style/     # 代码规范规约
│   ├── SKILL.md            # 技能入口
│   └── references/         # 规则文件
│       ├── naming-rules.md
│       ├── code-style.md
│       └── import-order.md
└── frontend-code-review/    # 代码审查规约
    ├── SKILL.md            # 技能入口
    └── references/         # 规则文件
        ├── checklist.md
        ├── performance-checklist.md
        ├── security-checklist.md
        └── maintainability-checklist.md

详细使用说明请参考：.trae/skills/USAGE.md

npm install -g ai-frontend-guard
# 或
pnpm add -g ai-frontend-guard

aifg init

这将创建一个 .aifg.json 配置文件，你可以根据项目需求自定义规则。

# 分析整个项目
aifg analyze

# 分析特定目录
aifg analyze ./src

# 分析单个文件
aifg check ./src/App.tsx

# 指定框架
aifg analyze --framework react

# 输出为 JSON 格式
aifg analyze --output json

# 输出为 Markdown 格式
aifg analyze --output markdown

• perf-no-large-bundle - 避免引入过大的npm包
• perf-no-inline-function - 避免React组件中的内联函数
• perf-use-memo - 建议使用useMemo优化计算

• sec-no-dangerously-set-innerhtml - 避免XSS风险
• sec-no-eval - 避免代码注入
• sec-no-hardcoded-secrets - 避免硬编码敏感信息
• sec-https-only - 确保使用HTTPS

• bp-no-console-log - 避免console语句
• bp-prefer-const - 优先使用const
• bp-no-var - 避免使用var
• bp-meaningful-names - 使用有意义的变量名

• ts-no-any - 避免any类型
• ts-explicit-return-type - 函数返回类型注解
• ts-no-non-null-assertion - 避免非空断言

• react-use-key-prop - 列表项需要key属性
• react-no-unused-props - 避免未使用的props
• react-prefer-functional-component - 优先使用函数组件

查看所有规则：

aifg rules

.aifg.json 配置示例：

{
  "rules": [
    { "ruleId": "sec-no-dangerously-set-innerhtml", "enabled": true, "severity": "error" },
    { "ruleId": "ts-no-any", "enabled": true, "severity": "warning" }
  ],
  "frameworks": ["react"],
  "aiTools": [
    { "name": "claude-code", "enabled": true }
  ],
  "output": {
    "format": "console"
  }
}

在项目根目录创建 .claude/rules.md 文件，添加以下内容：

# 前端代码规范

在生成代码时，请遵循以下规范：

## 性能优化
- 避免引入过大的npm包（如lodash、moment）
- React组件中避免内联函数定义
- 使用useMemo优化复杂计算

## 安全
- 禁止使用dangerouslySetInnerHTML
- 禁止使用eval
- 不要硬编码API密钥、密码等敏感信息

## TypeScript
- 避免使用any类型
- 为函数添加明确的返回类型
- 使用可选链替代非空断言

## React
- 列表渲染必须提供key属性
- 优先使用函数组件和Hooks

然后运行：

aifg analyze --output markdown > .claude/code-quality-report.md

在 .vscode/settings.json 中添加：

{
  "github.copilot.enable": {
    "*": true
  },
  "editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": true
  }
}

在 .cursorrules 文件中添加：

You are a frontend development expert. Follow these guidelines:

1. Performance: Avoid large bundle imports, use code splitting
2. Security: Never use eval or dangerouslySetInnerHTML
3. TypeScript: Prefer explicit types over any
4. React: Use functional components with hooks

Run `aifg analyze` to check code quality.

╔══════════════════════════════════════════╗
║     前端 AI 代码质量分析报告            ║
╚══════════════════════════════════════════╝

📊 总体评分: 85/100

📁 文件分析:
  ✓ src/App.tsx (92分)
  ! src/utils/api.ts (78分)

📈 分类评分:
  performance: 90/100 (2 个问题)
  security: 95/100 (1 个问题)
  typescript: 80/100 (3 个问题)

💡 优化建议:
  1. 优先解决: 避免使用 any (3 处) - 使用具体的类型定义
  2. 优先解决: 避免console.log (2 处) - 使用专业的日志库

也可以作为Node.js模块使用：

import { CodeAnalyzer, FileScanner, Reporter } from 'frontend-aifg';

const scanner = new FileScanner();
const analyzer = new CodeAnalyzer();
const reporter = new Reporter();

const files = await scanner.scanDirectory('./src');
const analysis = analyzer.analyzeFiles(files, 'react');

console.log(reporter.formatProjectAnalysis(analysis));

欢迎贡献代码、报告问题或提出建议！

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 创建 Pull Request

MIT License - 详见 LICENSE 文件

灵感来源于：

• ESLint
• SonarQube
• AI Code Review