[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-74404":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":23,"hasPages":23,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":26,"readmeContent":27,"aiSummary":28,"trendingCount":16,"starSnapshotCount":16,"syncStatus":29,"lastSyncTime":30,"discoverSource":31},74404,"agent-skills","callstackincubator\u002Fagent-skills","callstackincubator","A collection of agent-optimized React Native skills for AI coding assistants.","",null,"Shell",1426,99,15,5,0,13,35,98,39,101.3,"MIT License",false,"main",[],"2026-06-12 04:01:15","# 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: Import rules from GitHub**\n\nCursor’s GitHub \u002F GitLab rule importer only discovers **`.mdc` files** (typically under `.cursor\u002Frules\u002F`). This repository includes those files so import succeeds.\n\n1. Open Cursor Settings (`Cmd+Shift+J` \u002F `Ctrl+Shift+J`)\n2. Navigate to **Rules** and use **Import rules from GitHub** (wording may vary by version), or add a remote rule from a Git URL\n3. Enter: `https:\u002F\u002Fgithub.com\u002Fcallstackincubator\u002Fagent-skills.git`\n\nImported rules are short Cursor **project rules**; they point at the full Agent Skills under `skills\u002F`. Clone or copy the `skills\u002F` tree into your workspace when you want the model to read the complete markdown skills locally (see Option 2).\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├── .cursor\u002F\n│   └── rules\u002F                 # Cursor importable project rules (.mdc) for “Import rules from GitHub”\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","该项目提供了一系列针对AI编码助手优化的React Native技能。核心功能包括React Native最佳实践、GitHub工作流模式、GitHub Actions工作流模式、React Native升级工作流以及逐步迁移策略等，旨在帮助开发者更高效地编写和维护React Native应用。技术特点上，项目基于JavaScript开发，并提供了详细的性能优化指南，涵盖JavaScript\u002FReact层面的性能调优到原生iOS\u002FAndroid环境下的内存管理和启动时间优化等多个方面。适用于需要提升React Native项目开发效率与质量的各种场景，如新项目的快速搭建、现有项目的持续优化或从其他平台向React Native迁移的过程。",2,"2026-06-11 03:50:04","high_star"]