帮助开发者控制AI生成代码的质量和规范性

📖 简介

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

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

🎯 Trae Skill 体系

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

技能列表

对话调用

自动调用

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

Skill 目录结构

使用说明

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

🚀 快速开始

安装

初始化配置

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

分析代码

📋 内置规则

性能优化

• 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 - 避免任何类型

AI Frontend Guard

📖 简介

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

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

🎯 Trae Skill 体系

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

技能列表

对话调用

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

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

自动调用

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

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 - 使用有意义的变量名

TypeScript

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

React

• 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"
  }
}

🔗 与AI工具集成

Claude Code 集成