[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-82190":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":8,"htmlUrl":8,"language":9,"languages":8,"totalLinesOfCode":8,"stars":10,"forks":11,"watchers":11,"openIssues":12,"contributorsCount":12,"subscribersCount":12,"size":12,"stars1d":12,"stars7d":13,"stars30d":14,"stars90d":12,"forks30d":12,"starsTrendScore":12,"compositeScore":15,"rankGlobal":8,"rankLanguage":8,"license":16,"archived":17,"fork":17,"defaultBranch":18,"hasWiki":19,"hasPages":17,"topics":20,"createdAt":8,"pushedAt":8,"updatedAt":21,"readmeContent":22,"aiSummary":23,"trendingCount":12,"starSnapshotCount":12,"syncStatus":24,"lastSyncTime":25,"discoverSource":26},82190,"ai-frontend-guard","yuchunbo\u002Fai-frontend-guard","yuchunbo",null,"TypeScript",100,8,0,11,79,2.86,"MIT License",false,"main",true,[],"2026-06-12 02:04:24","# AI Frontend Guard\n\n\u003Cdiv align=\"center\">\n\n**帮助开发者控制AI生成代码的质量和规范性**\n\n[![npm version](https:\u002F\u002Fbadge.fury.io\u002Fjs\u002Fai-frontend-guard.svg)](https:\u002F\u002Fbadge.fury.io\u002Fjs\u002Fai-frontend-guard)\n[![License: MIT](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-MIT-yellow.svg)](https:\u002F\u002Fopensource.org\u002Flicenses\u002FMIT)\n\n\u003C\u002Fdiv>\n\n## 📖 简介\n\n`AI Frontend Guard` 是一个专为前端开发者设计的AI代码质量管控工具。当使用 Claude Code、GitHub Copilot、Cursor 等AI编程助手时，它能帮助你：\n\n- ✅ 确保AI生成的代码符合前端最佳实践\n- ✅ 自动检测潜在的性能、安全和质量问题\n- ✅ 提供可定制的代码规范规则\n- ✅ 与主流AI工具无缝集成\n- ✅ **Trae Skill 体系支持**：支持对话调用和自动触发\n\n## 🎯 Trae Skill 体系\n\n项目内置了完整的前端领域 Skill 规约体系，支持在 Trae 对话中调用：\n\n### 技能列表\n\n| 技能名称 | 功能描述 |\n|----------|----------|\n| `frontend-code-style` | 代码规范检查（命名、TS类型、组件结构、样式、导入顺序） |\n| `frontend-code-review` | 代码审查（质量、性能、安全、可维护性、复杂度） |\n\n### 对话调用\n\n```\n# 显性调用\n用 frontend-code-review 审查 src\u002F 下的代码\n\n# 隐性触发\n帮我查一下这段代码规范\n做一次前端代码审查\n```\n\n### 自动调用\n\nAI Frontend Guard 执行 `aifg analyze` 时会自动调用相关 Skill，检查结果融入工具输出报告。\n\n### Skill 目录结构\n\n```\n.trae\u002Fskills\u002F\n├── frontend-code-style\u002F     # 代码规范规约\n│   ├── SKILL.md            # 技能入口\n│   └── references\u002F         # 规则文件\n│       ├── naming-rules.md\n│       ├── code-style.md\n│       └── import-order.md\n└── frontend-code-review\u002F    # 代码审查规约\n    ├── SKILL.md            # 技能入口\n    └── references\u002F         # 规则文件\n        ├── checklist.md\n        ├── performance-checklist.md\n        ├── security-checklist.md\n        └── maintainability-checklist.md\n```\n\n### 使用说明\n\n详细使用说明请参考：[.trae\u002Fskills\u002FUSAGE.md](.trae\u002Fskills\u002FUSAGE.md)\n\n## 🚀 快速开始\n\n### 安装\n\n```bash\nnpm install -g ai-frontend-guard\n# 或\npnpm add -g ai-frontend-guard\n```\n\n### 初始化配置\n\n```bash\naifg init\n```\n\n这将创建一个 `.aifg.json` 配置文件，你可以根据项目需求自定义规则。\n\n### 分析代码\n\n```bash\n# 分析整个项目\naifg analyze\n\n# 分析特定目录\naifg analyze .\u002Fsrc\n\n# 分析单个文件\naifg check .\u002Fsrc\u002FApp.tsx\n\n# 指定框架\naifg analyze --framework react\n\n# 输出为 JSON 格式\naifg analyze --output json\n\n# 输出为 Markdown 格式\naifg analyze --output markdown\n```\n\n## 📋 内置规则\n\n### 性能优化\n- `perf-no-large-bundle` - 避免引入过大的npm包\n- `perf-no-inline-function` - 避免React组件中的内联函数\n- `perf-use-memo` - 建议使用useMemo优化计算\n\n### 安全检查\n- `sec-no-dangerously-set-innerhtml` - 避免XSS风险\n- `sec-no-eval` - 避免代码注入\n- `sec-no-hardcoded-secrets` - 避免硬编码敏感信息\n- `sec-https-only` - 确保使用HTTPS\n\n### 最佳实践\n- `bp-no-console-log` - 避免console语句\n- `bp-prefer-const` - 优先使用const\n- `bp-no-var` - 避免使用var\n- `bp-meaningful-names` - 使用有意义的变量名\n\n### TypeScript\n- `ts-no-any` - 避免any类型\n- `ts-explicit-return-type` - 函数返回类型注解\n- `ts-no-non-null-assertion` - 避免非空断言\n\n### React\n- `react-use-key-prop` - 列表项需要key属性\n- `react-no-unused-props` - 避免未使用的props\n- `react-prefer-functional-component` - 优先使用函数组件\n\n查看所有规则：\n```bash\naifg rules\n```\n\n## ⚙️ 配置文件\n\n`.aifg.json` 配置示例：\n\n```json\n{\n  \"rules\": [\n    { \"ruleId\": \"sec-no-dangerously-set-innerhtml\", \"enabled\": true, \"severity\": \"error\" },\n    { \"ruleId\": \"ts-no-any\", \"enabled\": true, \"severity\": \"warning\" }\n  ],\n  \"frameworks\": [\"react\"],\n  \"aiTools\": [\n    { \"name\": \"claude-code\", \"enabled\": true }\n  ],\n  \"output\": {\n    \"format\": \"console\"\n  }\n}\n```\n\n## 🔗 与AI工具集成\n\n### Claude Code 集成\n\n在项目根目录创建 `.claude\u002Frules.md` 文件，添加以下内容：\n\n```markdown\n# 前端代码规范\n\n在生成代码时，请遵循以下规范：\n\n## 性能优化\n- 避免引入过大的npm包（如lodash、moment）\n- React组件中避免内联函数定义\n- 使用useMemo优化复杂计算\n\n## 安全\n- 禁止使用dangerouslySetInnerHTML\n- 禁止使用eval\n- 不要硬编码API密钥、密码等敏感信息\n\n## TypeScript\n- 避免使用any类型\n- 为函数添加明确的返回类型\n- 使用可选链替代非空断言\n\n## React\n- 列表渲染必须提供key属性\n- 优先使用函数组件和Hooks\n```\n\n然后运行：\n```bash\naifg analyze --output markdown > .claude\u002Fcode-quality-report.md\n```\n\n### GitHub Copilot 集成\n\n在 `.vscode\u002Fsettings.json` 中添加：\n\n```json\n{\n  \"github.copilot.enable\": {\n    \"*\": true\n  },\n  \"editor.quickSuggestions\": {\n    \"other\": true,\n    \"comments\": false,\n    \"strings\": true\n  }\n}\n```\n\n### Cursor 集成\n\n在 `.cursorrules` 文件中添加：\n\n```\nYou are a frontend development expert. Follow these guidelines:\n\n1. Performance: Avoid large bundle imports, use code splitting\n2. Security: Never use eval or dangerouslySetInnerHTML\n3. TypeScript: Prefer explicit types over any\n4. React: Use functional components with hooks\n\nRun `aifg analyze` to check code quality.\n```\n\n## 📊 示例输出\n\n```\n╔══════════════════════════════════════════╗\n║     前端 AI 代码质量分析报告            ║\n╚══════════════════════════════════════════╝\n\n📊 总体评分: 85\u002F100\n\n📁 文件分析:\n  ✓ src\u002FApp.tsx (92分)\n  ! src\u002Futils\u002Fapi.ts (78分)\n\n📈 分类评分:\n  performance: 90\u002F100 (2 个问题)\n  security: 95\u002F100 (1 个问题)\n  typescript: 80\u002F100 (3 个问题)\n\n💡 优化建议:\n  1. 优先解决: 避免使用 any (3 处) - 使用具体的类型定义\n  2. 优先解决: 避免console.log (2 处) - 使用专业的日志库\n```\n\n## 🛠️ API 使用\n\n也可以作为Node.js模块使用：\n\n```typescript\nimport { CodeAnalyzer, FileScanner, Reporter } from 'frontend-aifg';\n\nconst scanner = new FileScanner();\nconst analyzer = new CodeAnalyzer();\nconst reporter = new Reporter();\n\nconst files = await scanner.scanDirectory('.\u002Fsrc');\nconst analysis = analyzer.analyzeFiles(files, 'react');\n\nconsole.log(reporter.formatProjectAnalysis(analysis));\n```\n\n## 🤝 贡献\n\n欢迎贡献代码、报告问题或提出建议！\n\n1. Fork 本仓库\n2. 创建特性分支 (`git checkout -b feature\u002FAmazingFeature`)\n3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)\n4. 推送到分支 (`git push origin feature\u002FAmazingFeature`)\n5. 创建 Pull Request\n\n## 📝 License\n\nMIT License - 详见 [LICENSE](LICENSE) 文件\n\n## 🙏 致谢\n\n灵感来源于：\n- [ESLint](https:\u002F\u002Feslint.org\u002F)\n- [SonarQube](https:\u002F\u002Fwww.sonarqube.org\u002F)\n- [AI Code Review](https:\u002F\u002Fgithub.com\u002Ffeatures\u002Fcopilot)\n\n---\n\n\u003Cdiv align=\"center\">\nMade with ❤️ by Frontend Developers, for Frontend Developers\n\u003C\u002Fdiv>\n","AI Frontend Guard 是一个专为前端开发者设计的AI代码质量管控工具，旨在提升使用AI编程助手如Claude Code、GitHub Copilot等生成代码的质量和规范性。其核心功能包括自动检测代码潜在的性能、安全和质量问题，提供可定制的代码规范规则，并且能够与主流AI工具无缝集成。此外，它还支持Trae Skill体系，允许用户通过对话调用或自动触发来执行特定技能，如代码规范检查和审查。该工具适用于需要确保AI生成代码符合最佳实践及项目标准的各种开发场景，特别是那些重视代码质量和安全性的团队。",2,"2026-06-11 04:08:02","CREATED_QUERY"]