[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"tool-callstackincubator--agent-skills":3,"similar-callstackincubator--agent-skills":65},{"id":4,"github_repo":5,"name":6,"description_en":7,"description_zh":8,"ai_summary_zh":9,"readme_en":10,"readme_zh":11,"quickstart_zh":12,"use_case_zh":13,"hero_image_url":14,"owner_login":15,"owner_name":16,"owner_avatar_url":17,"owner_bio":18,"owner_company":19,"owner_location":19,"owner_email":19,"owner_twitter":19,"owner_website":20,"owner_url":21,"languages":22,"stars":31,"forks":32,"last_commit_at":33,"license":34,"difficulty_score":35,"env_os":36,"env_gpu":37,"env_ram":37,"env_deps":38,"category_tags":41,"github_topics":19,"view_count":44,"oss_zip_url":19,"oss_zip_packed_at":19,"status":45,"created_at":46,"updated_at":47,"faqs":48,"releases":64},2544,"callstackincubator\u002Fagent-skills","agent-skills","A collection of agent-optimized React Native skills for AI coding assistants.","agent-skills 是一套专为 AI 编程助手设计的技能库，旨在提升人工智能在 React Native 开发及相关工作流中的辅助能力。它由知名技术团队 Callstack 维护，核心内容涵盖了从代码优化、版本升级到 CI\u002FCD 自动化等多个维度的最佳实践。\n\n对于开发者而言，使用 AI 辅助编程时常常面临上下文缺失或建议不够专业的问题。agent-skills 通过提供结构化的“技能包”，让 Claude Code、OpenAI Codex 和 Cursor 等主流 AI 工具能够直接读取并应用行业标准规范。例如，在处理性能瓶颈时，AI 可以依据内置的《React Native 优化终极指南》提供关于 FPS、内存管理及 Bundle 优化的精准建议；在进行项目迁移或升级时，它也能引导 AI 避开常见的依赖冲突陷阱，并提供分阶段集成策略。此外，它还包含了 GitHub 工作流和 Actions 的标准化模式，帮助团队规范代码审查与构建流程。\n\n这套工具特别适合 React Native 开发者、移动应用工程师以及希望提升 AI 编码准确性的技术团队使用。其独特的技术亮点在于采用","agent-skills 是一套专为 AI 编程助手设计的技能库，旨在提升人工智能在 React Native 开发及相关工作流中的辅助能力。它由知名技术团队 Callstack 维护，核心内容涵盖了从代码优化、版本升级到 CI\u002FCD 自动化等多个维度的最佳实践。\n\n对于开发者而言，使用 AI 辅助编程时常常面临上下文缺失或建议不够专业的问题。agent-skills 通过提供结构化的“技能包”，让 Claude Code、OpenAI Codex 和 Cursor 等主流 AI 工具能够直接读取并应用行业标准规范。例如，在处理性能瓶颈时，AI 可以依据内置的《React Native 优化终极指南》提供关于 FPS、内存管理及 Bundle 优化的精准建议；在进行项目迁移或升级时，它也能引导 AI 避开常见的依赖冲突陷阱，并提供分阶段集成策略。此外，它还包含了 GitHub 工作流和 Actions 的标准化模式，帮助团队规范代码审查与构建流程。\n\n这套工具特别适合 React Native 开发者、移动应用工程师以及希望提升 AI 编码准确性的技术团队使用。其独特的技术亮点在于采用了通用的 Agent Skills 标准，不仅支持通过插件市场一键安装，还能以本地文件形式灵活集成到多种 AI 编辑器中。这意味着用户无需复杂配置，即可让 AI 助手“学会”专家级的开发经验，从而生成更高质量、更符合工程规范的代码，显著减少调试时间并提升开发效率。","# Agent Skills\n\nA collection of agent-optimized skills for AI coding assistants. The repo ships raw Agent Skills for assistants that can read `skills\u002F` directly, plus marketplace metadata for both Claude Code and Codex plugin workflows.\n\n## Available Skills\n\n| Skill                                                                | Description                                             |\n| -------------------------------------------------------------------- | ------------------------------------------------------- |\n| [react-native-best-practices](.\u002Fskills\u002Freact-native-best-practices\u002F) | React Native optimization best practices from Callstack |\n| [github](.\u002Fskills\u002Fgithub\u002F)                                           | GitHub workflow patterns for PRs, code review, branching |\n| [github-actions](.\u002Fskills\u002Fgithub-actions\u002F)                           | GitHub Actions workflow patterns for React Native simulator\u002Femulator build artifacts |\n| [upgrading-react-native](.\u002Fskills\u002Fupgrading-react-native\u002F)           | React Native upgrade workflow: templates, dependencies, and common pitfalls |\n| [react-native-brownfield-migration](.\u002Fskills\u002Freact-native-brownfield-migration\u002F) | Incremental migration strategy to adopt React Native or Expo in native apps using @callstack\u002Freact-native-brownfield, with setup, packaging, and phased integration steps |\n\n## React Native Best Practices\n\nPerformance optimization skills based on [**The Ultimate Guide to React Native Optimization**](https:\u002F\u002Fwww.callstack.com\u002Febooks\u002Fthe-ultimate-guide-to-react-native-optimization) by [Callstack](https:\u002F\u002Fwww.callstack.com\u002F).\n\nCovers:\n\n- **JavaScript\u002FReact**: Profiling, FPS, re-renders, lists, state management, animations\n- **Native**: iOS\u002FAndroid profiling, TTI, memory management, Turbo Modules\n- **Bundling**: Bundle analysis, tree shaking, R8, app size optimization\n\n### Quick Start\n\n#### Claude Code\n\nUse the Claude Code marketplace metadata in `.claude-plugin\u002Fmarketplace.json`.\n\n**1. Add the marketplace:**\n\n```bash\n\u002Fplugin marketplace add callstackincubator\u002Fagent-skills\n```\n\n**2. Install the skill you want:**\n\n```bash\n\u002Fplugin install react-native-best-practices@callstack-agent-skills\n```\n\nOther available installs:\n\n```bash\n\u002Fplugin install github@callstack-agent-skills\n\u002Fplugin install github-actions@callstack-agent-skills\n\u002Fplugin install upgrading-react-native@callstack-agent-skills\n\u002Fplugin install react-native-brownfield-migration@callstack-agent-skills\n```\n\nOr use the interactive menu:\n\n```bash\n\u002Fplugin menu\n```\n\n**For local development:**\n\n```bash\nclaude --plugin-dir .\u002Fpath\u002Fto\u002Fagent-skills\n```\n\nOnce installed, Claude will automatically load the relevant skill based on the task.\n\n#### OpenAI Codex\n\nThis repo supports Codex in two different ways.\n\n**Option 1: Install the bundled Codex plugins**\n\n```bash\nnpx codex-plugin add callstackincubator\u002Fagent-skills\n```\n\nThis reads `.agents\u002Fplugins\u002Fmarketplace.json`, installs the bundled plugins into `.codex\u002Fplugins\u002F`, and makes them available after restarting Codex.\n\n**Option 2: Install standalone skills**\n\nAll major AI coding assistants support the Agent Skills standard.\n\n**Install via skill-installer:**\n\n```\n$skill-installer install react-native-best-practices from callstackincubator\u002Fagent-skills\n```\n\n**Or clone manually:**\n\n```bash\n# Project-level\ngit clone https:\u002F\u002Fgithub.com\u002Fcallstackincubator\u002Fagent-skills.git\ncp -r agent-skills\u002Fskills\u002F* .codex\u002Fskills\u002F\n\n# User-level\ncp -r agent-skills\u002Fskills\u002F* ~\u002F.codex\u002Fskills\u002F\n```\n\nRestart Codex to recognize newly installed skills.\n\n**Usage:** Type `$` to mention a skill or use `\u002Fskills` command.\n\nThese skills include `agents\u002Fopenai.yaml` metadata for Codex Skills UI compatibility.\n\n#### Other AI Assistants\n\n##### Cursor\n\n**Option 1: Install from GitHub (Recommended)**\n\n1. Open Cursor Settings (`Cmd+Shift+J` \u002F `Ctrl+Shift+J`)\n2. Navigate to **Rules → Add Rule → Remote Rule (GitHub)**\n3. Enter: `https:\u002F\u002Fgithub.com\u002Fcallstackincubator\u002Fagent-skills.git`\n\n**Option 2: Local Installation**\n\n```bash\n# Project-level\ngit clone https:\u002F\u002Fgithub.com\u002Fcallstackincubator\u002Fagent-skills.git .cursor\u002Fskills\u002Fagent-skills\n\n# User-level (available in all projects)\ngit clone https:\u002F\u002Fgithub.com\u002Fcallstackincubator\u002Fagent-skills.git ~\u002F.cursor\u002Fskills\u002Fagent-skills\n```\n\n**Usage:** Type `\u002F` in Agent chat to search and select skills by name.\n\n##### Gemini CLI\n\n**Install from repository:**\n\n```bash\ngemini skills install https:\u002F\u002Fgithub.com\u002Fcallstackincubator\u002Fagent-skills.git\n```\n\n**Or install to workspace:**\n\n```bash\ngemini skills install https:\u002F\u002Fgithub.com\u002Fcallstackincubator\u002Fagent-skills.git --scope workspace\n```\n\n**Management commands:**\n- `\u002Fskills list` - view all discovered skills\n- `\u002Fskills enable \u003Cname>` \u002F `\u002Fskills disable \u003Cname>` - toggle availability\n- `\u002Fskills reload` - refresh skill inventory\n\n##### OpenCode\n\nClone to any supported skills directory:\n\n```bash\n# Project-level\ngit clone https:\u002F\u002Fgithub.com\u002Fcallstackincubator\u002Fagent-skills.git\ncp -r agent-skills\u002Fskills\u002F* .opencode\u002Fskill\u002F\n\n# User-level\ncp -r agent-skills\u002Fskills\u002F* ~\u002F.config\u002Fopencode\u002Fskill\u002F\n```\n\nOpenCode also discovers Claude-compatible paths (`.claude\u002Fskills\u002F`, `~\u002F.claude\u002Fskills\u002F`).\n\n**Permission control** in `opencode.json`:\n\n```json\n{\n  \"permission\": {\n    \"skill\": {\n      \"*\": \"allow\"\n    }\n  }\n}\n```\n\n##### Other Assistants\n\nFor assistants without native skills support, point them to the skill file:\n\n```\nRead skills\u002Freact-native-best-practices\u002FSKILL.md for React Native performance guidelines\n```\n\nOr reference specific topics:\n\n```\nLook up js-profile-react.md for React DevTools profiling instructions\n```\n\n### Code Examples\n\nThe [callstack\u002Foptimization-best-practices](https:\u002F\u002Fgithub.com\u002Fcallstack\u002Foptimization-best-practices) repository contains runnable code examples for:\n\n- React Compiler setup\n- Dedicated React Native SDKs vs web polyfills\n- R8 code shrinking on Android\n\n## Other AI Assistants\n\nSee [AI Assistant Integration Guide](.\u002Fdocs\u002Fai-assistant-integration.md) for detailed setup instructions with Cursor, GitHub Copilot, Claude API, ChatGPT, and other AI coding assistants.\n\n## Structure\n\n### Repo Structure\n\n```\nagent-skills\u002F\n├── .claude-plugin\u002F\n│   └── marketplace.json     # Claude Code marketplace definition\n├── .agents\u002F\n│   └── plugins\u002F\n│       └── marketplace.json # Codex marketplace definition for bundled plugins\n├── plugins\u002F\n│   ├── building-react-native-apps\u002F\n│   └── testing-react-native-apps\u002F\n└── skills\u002F\n    ├── react-native-best-practices\u002F\n    │   ├── SKILL.md              # Main skill file with quick reference\n    │   └── references\u002F           # Detailed skill files\n    │       ├── images\u002F           # Visual references for profilers, diagrams\n    │       ├── js-*.md           # JavaScript\u002FReact skills\n    │       ├── native-*.md       # Native iOS\u002FAndroid skills\n    │       └── bundle-*.md       # Bundling & app size skills\n    │\n    ├── github\u002F\n    │   ├── SKILL.md              # Main skill file with PR workflow patterns\n    │   └── references\u002F           # Detailed GitHub workflow files\n    │\n    ├── github-actions\u002F\n    │   ├── SKILL.md              # Main skill file for GitHub Actions build artifacts\n    │   ├── agents\u002Fopenai.yaml    # Codex Skills UI metadata\n    │   └── references\u002F           # iOS\u002FAndroid action templates and download flows\n    │\n    ├── upgrading-react-native\u002F\n    │   ├── SKILL.md              # Main skill file with RN upgrade workflow routing\n    │   └── references\u002F           # Detailed upgrade flow files\n    │\n    └── react-native-brownfield-migration\u002F\n        ├── SKILL.md              # Main skill file for Expo\u002Fbare path routing\n        ├── agents\u002Fopenai.yaml    # Codex Skills UI metadata\n        └── references\u002F           # Brownfield packaging and integration flow files\n```\n\nUse `.claude-plugin\u002Fmarketplace.json` for Claude Code plugin installs and `.agents\u002Fplugins\u002Fmarketplace.json` for Codex plugin installs.\n\nThe standalone `skills\u002F` directory contains repo-local skills. The `plugins\u002F` directory contains installable Codex plugin bundles.\n\n## Contributing\n\nContributions welcome! Skills should be:\n\n- **Actionable**: Step-by-step instructions, not theory\n- **Searchable**: Clear headings and keywords\n- **Complete**: Include code examples and common pitfalls\n\nWhen adding or editing skills, follow the [agentskills.io specification](https:\u002F\u002Fagentskills.io\u002Fspecification) and [Claude Code best practices](https:\u002F\u002Fplatform.claude.com\u002Fdocs\u002Fen\u002Fagents-and-tools\u002Fagent-skills\u002Fbest-practices). The maintainer checklist lives in [AGENTS.md](.\u002FAGENTS.md), with supporting details in [docs\u002Fskill-conventions.md](.\u002Fdocs\u002Fskill-conventions.md).\n\n## Roadmap \u002F Work in Progress\n\nThis is just the start! The following features are planned or in progress.\n\n### Visual Feedback Integration (Planned)\n\nSeveral skills involve interpreting visual profiler output (flame graphs, treemaps, memory snapshots). AI agents cannot yet process these autonomously.\n\n**Affected skills:**\n\n- `js-profile-react.md` - React DevTools flame graphs\n- `js-measure-fps.md` - FPS graphs and performance overlays\n- `native-profiling.md` - Xcode Instruments \u002F Android Studio Profiler\n- `native-measure-tti.md` - TTI timeline visualization\n- `native-view-flattening.md` - View hierarchy inspection\n- `bundle-analyze-js.md` - Bundle treemap visualization\n- `bundle-analyze-app.md` - App size breakdown (Emerge Tools, Ruler)\n\n**Planned solution:** MCP (Model Context Protocol) integration for screenshot capture and visual analysis. Contributions welcome!\n\n### Complementary Skills\n\nFor complete coverage, consider pairing with:\n\n- [Vercel React Best Practices](https:\u002F\u002Fgithub.com\u002Fvercel-labs\u002Fagent-skills\u002Ftree\u002Freact-best-practices\u002Fskills\u002Freact-best-practices) - React\u002FNext.js web optimization (40+ rules)\n\n### Future Work\n\n- [ ] MCP integration for visual profiler feedback\n- [ ] Additional skills for debugging, testing, and CI\u002FCD\n- [ ] More code examples and interactive tutorials\n\n---\n\n## Made with ❤️ at Callstack\n\nReact Native performance skills based on The Ultimate Guide to React Native Optimization.\n\n[Callstack](https:\u002F\u002Fwww.callstack.com\u002F) is a group of React and React Native experts. Contact us at [hello@callstack.com](mailto:hello@callstack.com) if you need help with performance optimization or just want to say hi!\n\nLike what we do? ⚛️ [Join the Callstack team](https:\u002F\u002Fwww.callstack.com\u002Fcareers) and work on amazing React Native projects!\n","# 代理技能\n\n专为 AI 编码助手优化的代理技能集合。该仓库提供了可供助手直接读取 `skills\u002F` 目录的原始代理技能，以及适用于 Claude Code 和 Codex 插件工作流的市场元数据。\n\n## 可用技能\n\n| 技能                                                                | 描述                                             |\n| -------------------------------------------------------------------- | ------------------------------------------------------- |\n| [react-native-best-practices](.\u002Fskills\u002Freact-native-best-practices\u002F) | 来自 Callstack 的 React Native 优化最佳实践         |\n| [github](.\u002Fskills\u002Fgithub\u002F)                                           | GitHub 工作流模式：PR、代码审查、分支管理           |\n| [github-actions](.\u002Fskills\u002Fgithub-actions\u002F)                           | GitHub Actions 工作流模式：用于构建 React Native 模拟器\u002F模拟设备的工件 |\n| [upgrading-react-native](.\u002Fskills\u002Fupgrading-react-native\u002F)           | React Native 升级流程：模板、依赖项及常见陷阱       |\n| [react-native-brownfield-migration](.\u002Fskills\u002Freact-native-brownfield-migration\u002F) | 使用 @callstack\u002Freact-native-brownfield 在原生应用中逐步采用 React Native 或 Expo 的迁移策略，包含设置、打包和分阶段集成步骤 |\n\n## React Native 最佳实践\n\n基于 [Callstack](https:\u002F\u002Fwww.callstack.com\u002F) 出版的《**React Native 优化终极指南**》（[The Ultimate Guide to React Native Optimization](https:\u002F\u002Fwww.callstack.com\u002Febooks\u002Fthe-ultimate-guide-to-react-native-optimization)）的性能优化技能。\n\n涵盖内容：\n\n- **JavaScript\u002FReact**：性能分析、FPS、重新渲染、列表、状态管理、动画\n- **原生**：iOS\u002FAndroid 性能分析、首次可交互时间 (TTI)、内存管理、Turbo Modules\n- **打包**：包分析、Tree Shaking、R8、应用大小优化\n\n### 快速入门\n\n#### Claude Code\n\n使用 `.claude-plugin\u002Fmarketplace.json` 中的 Claude Code 市场元数据。\n\n**1. 添加市场：**\n\n```bash\n\u002Fplugin marketplace add callstackincubator\u002Fagent-skills\n```\n\n**2. 安装所需技能：**\n\n```bash\n\u002Fplugin install react-native-best-practices@callstack-agent-skills\n```\n\n其他可用安装命令：\n\n```bash\n\u002Fplugin install github@callstack-agent-skills\n\u002Fplugin install github-actions@callstack-agent-skills\n\u002Fplugin install upgrading-react-native@callstack-agent-skills\n\u002Fplugin install react-native-brownfield-migration@callstack-agent-skills\n```\n\n或者使用交互式菜单：\n\n```bash\n\u002Fplugin menu\n```\n\n**本地开发：**\n\n```bash\nclaude --plugin-dir .\u002Fpath\u002Fto\u002Fagent-skills\n```\n\n安装完成后，Claude 会根据任务自动加载相关技能。\n\n#### OpenAI Codex\n\n本仓库支持两种方式使用 Codex。\n\n**选项 1：安装捆绑的 Codex 插件**\n\n```bash\nnpx codex-plugin add callstackincubator\u002Fagent-skills\n```\n\n此命令会读取 `.agents\u002Fplugins\u002Fmarketplace.json`，将捆绑插件安装到 `.codex\u002Fplugins\u002F` 目录下，并在重启 Codex 后生效。\n\n**选项 2：单独安装技能**\n\n所有主流 AI 编码助手均支持代理技能标准。\n\n**通过技能安装程序安装：**\n\n```\n$skill-installer install react-native-best-practices from callstackincubator\u002Fagent-skills\n```\n\n**或手动克隆：**\n\n```bash\n# 项目级\ngit clone https:\u002F\u002Fgithub.com\u002Fcallstackincubator\u002Fagent-skills.git\ncp -r agent-skills\u002Fskills\u002F* .codex\u002Fskills\u002F\n\n# 用户级\ncp -r agent-skills\u002Fskills\u002F* ~\u002F.codex\u002Fskills\u002F\n```\n\n重启 Codex 以识别新安装的技能。\n\n**使用方法：** 输入 `$` 调用技能，或使用 `\u002Fskills` 命令。\n\n这些技能包含 `agents\u002Fopenai.yaml` 元数据，以兼容 Codex Skills UI。\n\n#### 其他 AI 助手\n\n##### Cursor\n\n**选项 1：从 GitHub 安装（推荐）**\n\n1. 打开 Cursor 设置（`Cmd+Shift+J` \u002F `Ctrl+Shift+J`）\n2. 导航至 **Rules → Add Rule → Remote Rule (GitHub)**\n3. 输入：`https:\u002F\u002Fgithub.com\u002Fcallstackincubator\u002Fagent-skills.git`\n\n**选项 2：本地安装**\n\n```bash\n# 项目级\ngit clone https:\u002F\u002Fgithub.com\u002Fcallstackincubator\u002Fagent-skills.git .cursor\u002Fskills\u002Fagent-skills\n\n# 用户级（在所有项目中可用）\ngit clone https:\u002F\u002Fgithub.com\u002Fcallstackincubator\u002Fagent-skills.git ~\u002F.cursor\u002Fskills\u002Fagent-skills\n```\n\n**使用方法：** 在代理聊天中输入 `\u002F`，即可按名称搜索并选择技能。\n\n##### Gemini CLI\n\n**从仓库安装：**\n\n```bash\ngemini skills install https:\u002F\u002Fgithub.com\u002Fcallstackincubator\u002Fagent-skills.git\n```\n\n**或安装到工作区：**\n\n```bash\ngemini skills install https:\u002F\u002Fgithub.com\u002Fcallstackincubator\u002Fagent-skills.git --scope workspace\n```\n\n**管理命令：**\n- `\u002Fskills list`：查看所有已发现的技能\n- `\u002Fskills enable \u003Cname>` \u002F `\u002Fskills disable \u003Cname>`：切换技能可用性\n- `\u002Fskills reload`：刷新技能清单\n\n##### OpenCode\n\n克隆到任何支持的技能目录：\n\n```bash\n# 项目级\ngit clone https:\u002F\u002Fgithub.com\u002Fcallstackincubator\u002Fagent-skills.git\ncp -r agent-skills\u002Fskills\u002F* .opencode\u002Fskill\u002F\n\n# 用户级\ncp -r agent-skills\u002Fskills\u002F* ~\u002F.config\u002Fopencode\u002Fskill\u002F\n```\n\nOpenCode 还会发现与 Claude 兼容的路径（`.claude\u002Fskills\u002F`、`~\u002F.claude\u002Fskills\u002F`）。\n\n**权限控制** 在 `opencode.json` 中定义：\n\n```json\n{\n  \"permission\": {\n    \"skill\": {\n      \"*\": \"allow\"\n    }\n  }\n}\n```\n\n##### 其他助手\n\n对于不支持原生技能的助手，可以直接指向技能文件：\n\n```\n阅读 skills\u002Freact-native-best-practices\u002FSKILL.md，获取 React Native 性能指南\n```\n\n或引用特定主题：\n\n```\n查阅 js-profile-react.md，了解 React DevTools 性能分析说明\n```\n\n### 代码示例\n\n[callstack\u002Foptimization-best-practices](https:\u002F\u002Fgithub.com\u002Fcallstack\u002Foptimization-best-practices) 仓库包含可运行的代码示例，涵盖：\n\n- React Compiler 的设置\n- 专用 React Native SDK 与 Web polyfill 的对比\n- Android 上的 R8 代码压缩\n\n## 其他 AI 助手\n\n请参阅 [AI 助手集成指南](.\u002Fdocs\u002Fai-assistant-integration.md)，获取与 Cursor、GitHub Copilot、Claude API、ChatGPT 等 AI 编码助手的详细设置说明。\n\n## 结构\n\n### 仓库结构\n\n```\nagent-skills\u002F\n├── .claude-plugin\u002F\n│   └── marketplace.json     # Claude Code 市场定义\n├── .agents\u002F\n│   └── plugins\u002F\n│       └── marketplace.json # 封装插件的 Codex 市场定义\n├── plugins\u002F\n│   ├── building-react-native-apps\u002F\n│   └── testing-react-native-apps\u002F\n└── skills\u002F\n    ├── react-native-best-practices\u002F\n    │   ├── SKILL.md              # 主技能文件，包含快速参考\n    │   └── references\u002F           # 详细技能文件\n    │       ├── images\u002F           # 用于性能分析器和图表的视觉参考资料\n    │       ├── js-*.md           # JavaScript\u002FReact 技能\n    │       ├── native-*.md       # 原生 iOS\u002FAndroid 技能\n    │       └── bundle-*.md       # 打包与应用大小相关的技能\n    │\n    ├── github\u002F\n    │   ├── SKILL.md              # 主技能文件，包含 PR 工作流模式\n    │   └── references\u002F           # 详细的 GitHub 工作流文件\n    │\n    ├── github-actions\u002F\n    │   ├── SKILL.md              # 主技能文件，介绍 GitHub Actions 构建产物\n    │   ├── agents\u002Fopenai.yaml    # Codex Skills UI 元数据\n    │   └── references\u002F           # iOS\u002FAndroid 操作模板及下载流程\n    │\n    ├── upgrading-react-native\u002F\n    │   ├── SKILL.md              # 主技能文件，包含 RN 升级工作流引导\n    │   └── references\u002F           # 详细的升级流程文件\n    │\n    └── react-native-brownfield-migration\u002F\n        ├── SKILL.md              # 主技能文件，用于 Expo\u002Fbare 路径引导\n        ├── agents\u002Fopenai.yaml    # Codex Skills UI 元数据\n        └── references\u002F           # 老项目打包与集成流程文件\n```\n\n请使用 `.claude-plugin\u002Fmarketplace.json` 进行 Claude Code 插件安装，而 `.agents\u002Fplugins\u002Fmarketplace.json` 则用于 Codex 插件安装。\n\n独立的 `skills\u002F` 目录包含仓库本地的技能。`plugins\u002F` 目录则包含可安装的 Codex 插件包。\n\n## 贡献说明\n\n欢迎贡献！技能应具备以下特点：\n\n- **可操作性**：提供分步指导，而非理论阐述。\n- **可搜索性**：标题清晰，关键词明确。\n- **完整性**：包含代码示例及常见陷阱说明。\n\n在添加或编辑技能时，请遵循 [agentskills.io 规范](https:\u002F\u002Fagentskills.io\u002Fspecification)以及 [Claude Code 最佳实践](https:\u002F\u002Fplatform.claude.com\u002Fdocs\u002Fen\u002Fagents-and-tools\u002Fagent-skills\u002Fbest-practices)。维护者检查清单位于 [AGENTS.md](.\u002FAGENTS.md)，相关支持文档则见 [docs\u002Fskill-conventions.md](.\u002Fdocs\u002Fskill-conventions.md)。\n\n## 路线图 \u002F 进度\n\n这仅仅是个开始！以下功能正在规划或开发中。\n\n### 视觉反馈集成（计划中）\n\n部分技能涉及解析视觉性能分析工具的输出（火焰图、树状图、内存快照）。目前 AI 代理尚无法自主处理这些内容。\n\n**受影响的技能：**\n\n- `js-profile-react.md` - React DevTools 火焰图\n- `js-measure-fps.md` - FPS 图表与性能叠加层\n- `native-profiling.md` - Xcode Instruments \u002F Android Studio Profiler\n- `native-measure-tti.md` - TTI 时间线可视化\n- `native-view-flattening.md` - 视图层级检查\n- `bundle-analyze-js.md` - 包体积树状图可视化\n- `bundle-analyze-app.md` - 应用大小拆解（Emerge Tools、Ruler）\n\n**计划解决方案：** 集成 MCP（模型上下文协议）以实现截图捕获与视觉分析。欢迎贡献！\n\n### 补充技能建议\n\n为实现全面覆盖，建议搭配以下资源：\n\n- [Vercel React 最佳实践](https:\u002F\u002Fgithub.com\u002Fvercel-labs\u002Fagent-skills\u002Ftree\u002Freact-best-practices\u002Fskills\u002Freact-best-practices) - React\u002FNext.js Web 优化（40+ 条规则）\n\n### 未来工作\n\n- [ ] 集成 MCP 以支持视觉性能分析反馈\n- [ ] 添加更多调试、测试及 CI\u002FCD 相关技能\n- [ ] 提供更多代码示例与交互式教程\n\n---\n\n## 由 Callstack 用心打造\n\n基于《React Native 性能优化终极指南》的 React Native 性能技能。\n\n[Callstack](https:\u002F\u002Fwww.callstack.com\u002F) 是一群 React 和 React Native 专家团队。如需性能优化帮助或只是想打个招呼，请发送邮件至 [hello@callstack.com](mailto:hello@callstack.com)！\n\n喜欢我们的工作吗？⚛️ [加入 Callstack 团队](https:\u002F\u002Fwww.callstack.com\u002Fcareers)，一起参与精彩的 React Native 项目吧！","# agent-skills 快速上手指南\n\n`agent-skills` 是一套专为 AI 编程助手优化的技能集合，主要包含 React Native 性能优化最佳实践、GitHub 工作流模式等。本指南将帮助你在主流 AI 助手（Claude Code, Codex, Cursor 等）中快速集成并使用这些技能。\n\n## 环境准备\n\n*   **系统要求**：支持 macOS, Linux, Windows。\n*   **前置依赖**：\n    *   已安装并配置好以下任一 AI 编程助手：\n        *   Claude Code\n        *   OpenAI Codex CLI\n        *   Cursor\n        *   Gemini CLI\n        *   OpenCode\n    *   Git：用于克隆仓库或安装远程规则。\n    *   Node.js \u002F npm：部分安装命令依赖 `npx。\n\n## 安装步骤\n\n根据你使用的 AI 助手，选择对应的安装方式：\n\n### 1. Claude Code\n\n通过插件市场安装：\n\n```bash\n# 1. 添加市场源\n\u002Fplugin marketplace add callstackincubator\u002Fagent-skills\n\n# 2. 安装所需技能（以 react-native-best-practices 为例）\n\u002Fplugin install react-native-best-practices@callstack-agent-skills\n```\n\n其他可用技能：\n```bash\n\u002Fplugin install github@callstack-agent-skills\n\u002Fplugin install github-actions@callstack-agent-skills\n\u002Fplugin install upgrading-react-native@callstack-agent-skills\n\u002Fplugin install react-native-brownfield-migration@callstack-agent-skills\n```\n\n*本地开发模式：*\n```bash\nclaude --plugin-dir .\u002Fpath\u002Fto\u002Fagent-skills\n```\n\n### 2. OpenAI Codex\n\n**方式一：安装 bundled 插件（推荐）**\n```bash\nnpx codex-plugin add callstackincubator\u002Fagent-skills\n```\n*注意：安装后需重启 Codex。*\n\n**方式二：手动安装独立技能**\n```bash\n# 项目级安装\ngit clone https:\u002F\u002Fgithub.com\u002Fcallstackincubator\u002Fagent-skills.git\ncp -r agent-skills\u002Fskills\u002F* .codex\u002Fskills\u002F\n\n# 用户级安装（全局可用）\ncp -r agent-skills\u002Fskills\u002F* ~\u002F.codex\u002Fskills\u002F\n```\n*注意：安装后需重启 Codex。使用 `$` 提及技能或使用 `\u002Fskills` 命令调用。*\n\n### 3. Cursor\n\n**方式一：通过 GitHub 远程规则安装（推荐）**\n1. 打开 Cursor 设置 (`Cmd+Shift+J` \u002F `Ctrl+Shift+J`)\n2. 导航至 **Rules → Add Rule → Remote Rule (GitHub)**\n3. 输入仓库地址：`https:\u002F\u002Fgithub.com\u002Fcallstackincubator\u002Fagent-skills.git`\n\n**方式二：本地克隆安装**\n```bash\n# 项目级\ngit clone https:\u002F\u002Fgithub.com\u002Fcallstackincubator\u002Fagent-skills.git .cursor\u002Fskills\u002Fagent-skills\n\n# 用户级\ngit clone https:\u002F\u002Fgithub.com\u002Fcallstackincubator\u002Fagent-skills.git ~\u002F.cursor\u002Fskills\u002Fagent-skills\n```\n*使用方法：在 Agent 聊天中输入 `\u002F` 搜索并选择技能。*\n\n### 4. Gemini CLI\n\n```bash\n# 从仓库安装\ngemini skills install https:\u002F\u002Fgithub.com\u002Fcallstackincubator\u002Fagent-skills.git\n\n# 或仅安装到当前工作区\ngemini skills install https:\u002F\u002Fgithub.com\u002Fcallstackincubator\u002Fagent-skills.git --scope workspace\n```\n\n### 5. OpenCode\n\n```bash\n# 项目级\ngit clone https:\u002F\u002Fgithub.com\u002Fcallstackincubator\u002Fagent-skills.git\ncp -r agent-skills\u002Fskills\u002F* .opencode\u002Fskill\u002F\n\n# 用户级\ncp -r agent-skills\u002Fskills\u002F* ~\u002F.config\u002Fopencode\u002Fskill\u002F\n```\n\n需在 `opencode.json` 中配置权限：\n```json\n{\n  \"permission\": {\n    \"skill\": {\n      \"*\": \"allow\"\n    }\n  }\n}\n```\n\n### 6. 其他不支持原生技能的助手\n\n直接引用技能文件路径即可，例如：\n```\nRead skills\u002Freact-native-best-practices\u002FSKILL.md for React Native performance guidelines\n```\n\n## 基本使用\n\n安装完成后，AI 助手会根据上下文自动加载相关技能，或通过命令手动触发。\n\n**示例场景：React Native 性能优化**\n\n1.  **自动触发**：\n    当你询问关于 React Native列表渲染卡顿或内存泄漏问题时，Claude Code 或 Codex 会自动参考 `react-native-best-practices` 中的 `js-*.md` 或 `native-*.md` 文件提供建议。\n\n2.  **手动调用 (Codex\u002FCursor)**：\n    在聊天框输入：\n    ```\n    $react-native-best-practices 如何优化 FlatList 的性能？\n    ```\n    或者在 Cursor 中输入 `\u002F` 选择 `react-native-best-practices`。\n\n3.  **查阅特定主题**：\n    你可以直接要求 AI 查阅具体文档，例如：\n    ```\n    请根据 js-profile-react.md 中的指南，教我如何使用 React DevTools 进行性能分析。\n    ```\n\n**核心技能说明：**\n*   `react-native-best-practices`: 涵盖 JS\u002FReact 性能分析、原生模块优化、Bundle 大小优化等。\n*   `github`: 提供 PR 创建、代码审查和分支管理的标准工作流。\n*   `upgrading-react-native`: 指导 React Native 版本升级的步骤和常见陷阱。","某初创团队的高级前端工程师正负责将一款成熟的 iOS 原生应用逐步迁移至 React Native 架构，以加速多端迭代并降低维护成本。面对复杂的混合开发环境和性能瓶颈，他需要确保代码质量符合工业级标准，同时避免常见的迁移陷阱。\n\n### 没有 agent-skills 时\n- **性能优化靠摸索**：在处理长列表滚动卡顿问题时，需手动查阅大量文档排查重渲染原因，容易遗漏 FlashList 替代方案或 memo 优化细节，导致调试周期长达数天。\n- **升级过程高风险**：执行 React Native 版本升级时，缺乏标准化的依赖检查清单，常因忽略 Breaking Changes 或原生模块链接问题导致构建失败，回滚成本极高。\n- **混合集成混乱**：在原生应用中嵌入 RN 页面时，缺乏统一的 Brownfield 迁移策略，打包配置和通信桥接代码往往写得杂乱无章，后续维护困难。\n- **CI\u002FCD 配置繁琐**：为适配 RN 模拟器构建，需手动编写复杂的 GitHub Actions 脚本，经常因缓存策略不当或环境差异导致流水线频繁报错。\n\n### 使用 agent-skills 后\n- **最佳实践自动注入**：调用 `react-native-best-practices` 技能后，AI 直接基于 Callstack 权威指南建议启用 Fabric 架构和优化动画驱动，代码一次性通过性能审查。\n- **升级流程标准化**：利用 `upgrading-react-native` 技能，AI 自动生成包含依赖冲突解决步骤的升级计划，精准识别并修复了不兼容的原生库，实现平滑过渡。\n- **迁移策略清晰化**：通过 `react-native-brownfield-migration` 技能，AI 提供了分阶段集成模板，规范了原生与 RN 的通信接口，确保了模块化交付的稳定性。\n- **工作流一键生成**：借助 `github-actions` 技能，快速生成了针对 RN 构建优化的 CI 配置文件，自动处理缓存和模拟器启动逻辑，大幅缩短反馈循环。\n\nagent-skills 将资深专家的经验沉淀为可执行的 AI 指令，显著降低了 React Native 高级开发的认知负荷与试错成本。","https:\u002F\u002Foss.gittoolsai.com\u002Fimages\u002Fcallstackincubator_agent-skills_c010ab5a.png","callstackincubator","Callstack Incubator","https:\u002F\u002Foss.gittoolsai.com\u002Favatars\u002Fcallstackincubator_a7f9c9ff.png","We don't follow best practices, we set them. This is where it happens.",null,"https:\u002F\u002Fcallstack.com","https:\u002F\u002Fgithub.com\u002Fcallstackincubator",[23,27],{"name":24,"color":25,"percentage":26},"JavaScript","#f1e05a",76.7,{"name":28,"color":29,"percentage":30},"Shell","#89e051",23.3,1187,82,"2026-04-03T01:15:36","MIT",1,"Linux, macOS, Windows","未说明",{"notes":39,"python":37,"dependencies":40},"该工具并非独立运行的软件，而是为 AI 编码助手（如 Claude Code, OpenAI Codex, Cursor, Gemini CLI, OpenCode）提供的技能包集合。无需特定的 Python 或 GPU 环境，只需将技能文件复制到对应 AI 助手的配置目录或通过其插件市场安装即可使用。主要依赖宿主 AI 助手的环境。",[],[42,43],"Agent","插件",2,"ready","2026-03-27T02:49:30.150509","2026-04-06T05:35:48.547454",[49,54,59],{"id":50,"question_zh":51,"answer_zh":52,"source_url":53},11752,"如何为 React Native ≥ 0.79 项目处理 Android 16 KB 内存页对齐问题？","对于 React Native ≥ 0.79，核心的 16 KB 支持已由 RNGP (React Native Gradle Plugin) 处理，因此通常不需要额外的 NDK 版本检查。但是，之前包含的或第三方的预构建原生库（prebuilt native libraries）不会自动重新构建，因此在升级时仍需验证 ELF 对齐情况。\n\n建议创建一个针对 RN 的单一文件技能（skill），专注于检测第三方原生库中的 ELF 错位，并指向官方 Android 文档以获取修复指南。这在进行旧应用升级时特别有用。","https:\u002F\u002Fgithub.com\u002Fcallstackincubator\u002Fagent-skills\u002Fissues\u002F9",{"id":55,"question_zh":56,"answer_zh":57,"source_url":58},11753,"Hermes 引擎在 iOS 上是否完全支持 NumberFormat.formatToParts？","不完全支持。虽然相关文档可能声称 NumberFormat 已完全实现，但在 iOS 上 Hermes 仍然不支持 `formatToParts` 方法。这是一个已知的实现状态差异，开发时需注意此限制。","https:\u002F\u002Fgithub.com\u002Fcallstackincubator\u002Fagent-skills\u002Fissues\u002F36",{"id":60,"question_zh":61,"answer_zh":62,"source_url":63},11754,"是否建议在 Expo 生产应用中启用 Inline Requires（内联要求）优化？","Expo 官方文档已在“摇树优化”（tree-shaking）部分记录了 `inlineRequire` 设置。默认情况下，Expo 中该设置为 false。\n\n你可以考虑将其开启以获得潜在的性能收益（如启动速度提升），但需要注意权衡副作用（side effects）和可能需要排除的模块。由于这是公开可用的知识，建议参考 Expo 官方文档关于副作用的处理指南，而不是在此处重复详细配置。","https:\u002F\u002Fgithub.com\u002Fcallstackincubator\u002Fagent-skills\u002Fissues\u002F13",[],[66,77,86,94,106,114],{"id":67,"name":68,"github_repo":69,"description_zh":70,"stars":71,"difficulty_score":72,"last_commit_at":73,"category_tags":74,"status":45},3808,"stable-diffusion-webui","AUTOMATIC1111\u002Fstable-diffusion-webui","stable-diffusion-webui 是一个基于 Gradio 构建的网页版操作界面，旨在让用户能够轻松地在本地运行和使用强大的 Stable Diffusion 图像生成模型。它解决了原始模型依赖命令行、操作门槛高且功能分散的痛点，将复杂的 AI 绘图流程整合进一个直观易用的图形化平台。\n\n无论是希望快速上手的普通创作者、需要精细控制画面细节的设计师，还是想要深入探索模型潜力的开发者与研究人员，都能从中获益。其核心亮点在于极高的功能丰富度：不仅支持文生图、图生图、局部重绘（Inpainting）和外绘（Outpainting）等基础模式，还独创了注意力机制调整、提示词矩阵、负向提示词以及“高清修复”等高级功能。此外，它内置了 GFPGAN 和 CodeFormer 等人脸修复工具，支持多种神经网络放大算法，并允许用户通过插件系统无限扩展能力。即使是显存有限的设备，stable-diffusion-webui 也提供了相应的优化选项，让高质量的 AI 艺术创作变得触手可及。",162132,3,"2026-04-05T11:01:52",[75,76,42],"开发框架","图像",{"id":78,"name":79,"github_repo":80,"description_zh":81,"stars":82,"difficulty_score":44,"last_commit_at":83,"category_tags":84,"status":45},1381,"everything-claude-code","affaan-m\u002Feverything-claude-code","everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。\n\n通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。\n\n这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上",138956,"2026-04-05T11:33:21",[75,42,85],"语言模型",{"id":87,"name":88,"github_repo":89,"description_zh":90,"stars":91,"difficulty_score":44,"last_commit_at":92,"category_tags":93,"status":45},2271,"ComfyUI","Comfy-Org\u002FComfyUI","ComfyUI 是一款功能强大且高度模块化的视觉 AI 引擎，专为设计和执行复杂的 Stable Diffusion 图像生成流程而打造。它摒弃了传统的代码编写模式，采用直观的节点式流程图界面，让用户通过连接不同的功能模块即可构建个性化的生成管线。\n\n这一设计巧妙解决了高级 AI 绘图工作流配置复杂、灵活性不足的痛点。用户无需具备编程背景，也能自由组合模型、调整参数并实时预览效果，轻松实现从基础文生图到多步骤高清修复等各类复杂任务。ComfyUI 拥有极佳的兼容性，不仅支持 Windows、macOS 和 Linux 全平台，还广泛适配 NVIDIA、AMD、Intel 及苹果 Silicon 等多种硬件架构，并率先支持 SDXL、Flux、SD3 等前沿模型。\n\n无论是希望深入探索算法潜力的研究人员和开发者，还是追求极致创作自由度的设计师与资深 AI 绘画爱好者，ComfyUI 都能提供强大的支持。其独特的模块化架构允许社区不断扩展新功能，使其成为当前最灵活、生态最丰富的开源扩散模型工具之一，帮助用户将创意高效转化为现实。",107662,"2026-04-03T11:11:01",[75,76,42],{"id":95,"name":96,"github_repo":97,"description_zh":98,"stars":99,"difficulty_score":44,"last_commit_at":100,"category_tags":101,"status":45},2268,"ML-For-Beginners","microsoft\u002FML-For-Beginners","ML-For-Beginners 是由微软推出的一套系统化机器学习入门课程，旨在帮助零基础用户轻松掌握经典机器学习知识。这套课程将学习路径规划为 12 周，包含 26 节精炼课程和 52 道配套测验，内容涵盖从基础概念到实际应用的完整流程，有效解决了初学者面对庞大知识体系时无从下手、缺乏结构化指导的痛点。\n\n无论是希望转型的开发者、需要补充算法背景的研究人员，还是对人工智能充满好奇的普通爱好者，都能从中受益。课程不仅提供了清晰的理论讲解，还强调动手实践，让用户在循序渐进中建立扎实的技能基础。其独特的亮点在于强大的多语言支持，通过自动化机制提供了包括简体中文在内的 50 多种语言版本，极大地降低了全球不同背景用户的学习门槛。此外，项目采用开源协作模式，社区活跃且内容持续更新，确保学习者能获取前沿且准确的技术资讯。如果你正寻找一条清晰、友好且专业的机器学习入门之路，ML-For-Beginners 将是理想的起点。",84991,"2026-04-05T10:45:23",[76,102,103,43,42,104,85,75,105],"数据工具","视频","其他","音频",{"id":107,"name":108,"github_repo":109,"description_zh":110,"stars":111,"difficulty_score":72,"last_commit_at":112,"category_tags":113,"status":45},3128,"ragflow","infiniflow\u002Fragflow","RAGFlow 是一款领先的开源检索增强生成（RAG）引擎，旨在为大语言模型构建更精准、可靠的上下文层。它巧妙地将前沿的 RAG 技术与智能体（Agent）能力相结合，不仅支持从各类文档中高效提取知识，还能让模型基于这些知识进行逻辑推理和任务执行。\n\n在大模型应用中，幻觉问题和知识滞后是常见痛点。RAGFlow 通过深度解析复杂文档结构（如表格、图表及混合排版），显著提升了信息检索的准确度，从而有效减少模型“胡编乱造”的现象，确保回答既有据可依又具备时效性。其内置的智能体机制更进一步，使系统不仅能回答问题，还能自主规划步骤解决复杂问题。\n\n这款工具特别适合开发者、企业技术团队以及 AI 研究人员使用。无论是希望快速搭建私有知识库问答系统，还是致力于探索大模型在垂直领域落地的创新者，都能从中受益。RAGFlow 提供了可视化的工作流编排界面和灵活的 API 接口，既降低了非算法背景用户的上手门槛，也满足了专业开发者对系统深度定制的需求。作为基于 Apache 2.0 协议开源的项目，它正成为连接通用大模型与行业专有知识之间的重要桥梁。",77062,"2026-04-04T04:44:48",[42,76,75,85,104],{"id":115,"name":116,"github_repo":117,"description_zh":118,"stars":119,"difficulty_score":72,"last_commit_at":120,"category_tags":121,"status":45},2181,"OpenHands","OpenHands\u002FOpenHands","OpenHands 是一个专注于 AI 驱动开发的开源平台，旨在让智能体（Agent）像人类开发者一样理解、编写和调试代码。它解决了传统编程中重复性劳动多、环境配置复杂以及人机协作效率低等痛点，通过自动化流程显著提升开发速度。\n\n无论是希望提升编码效率的软件工程师、探索智能体技术的研究人员，还是需要快速原型验证的技术团队，都能从中受益。OpenHands 提供了灵活多样的使用方式：既可以通过命令行（CLI）或本地图形界面在个人电脑上轻松上手，体验类似 Devin 的流畅交互；也能利用其强大的 Python SDK 自定义智能体逻辑，甚至在云端大规模部署上千个智能体并行工作。\n\n其核心技术亮点在于模块化的软件智能体 SDK，这不仅构成了平台的引擎，还支持高度可组合的开发模式。此外，OpenHands 在 SWE-bench 基准测试中取得了 77.6% 的优异成绩，证明了其解决真实世界软件工程问题的能力。平台还具备完善的企业级功能，支持与 Slack、Jira 等工具集成，并提供细粒度的权限管理，适合从个人开发者到大型企业的各类用户场景。",70612,"2026-04-05T11:12:22",[85,42,75,43]]