callstackincubator/agent-skills

AI 코딩 어시스턴트(AI coding assistants)를 위해 최적화된 에이전트 스킬(agent-optimized skills) 모음입니다. 이 저장소는 skills/ 디렉토리를 직접 읽을 수 있는 어시스턴트를 위한 원시 에이전트 스킬(raw Agent Skills)과 함께, Claude Code 및 Codex 플러그인(plugin) 워크플로우를 위한 마켓플레이스 메타데이터(marketplace metadata)를 제공합니다.

스킬 (Skill)	설명 (Description)
react-native-best-practices	Callstack에서 제공하는 React Native 최적화 모범 사례
...	Callstack의 The Ultimate Guide to React Native Optimization을 기반으로 한 성능 최적화 스킬

다루는 내용:

JavaScript/React: 프로파일링 (Profiling), FPS, 리렌더링 (re-renders), 리스트 (lists), 상태 관리 (state management), 애니메이션 (animations)
Native: iOS/Android 프로파일링 (profiling), TTI, 메모리 관리 (memory management), Turbo Modules
Bundling: 번들 분석 (Bundle analysis), 트리 쉐이킹 (tree shaking), R8, 앱 크기 최적화 (app size optimization)

.claude-plugin/marketplace.json에 있는 Claude Code 마켓플레이스 메타데이터를 사용하세요.

1. 마켓플레이스 추가:

/plugin marketplace add callstackincubator/agent-skills

2. 원하는 스킬 설치:

/plugin install react-native-best-practices@callstack-agent-skills

설치 가능한 다른 항목들:

/plugin install github@callstack-agent-skills
/plugin install github-actions@callstack-agent-skills
/plugin install upgrading-react-native@callstack-agent-skills
...

또는 대화형 메뉴를 사용하세요:

/plugin menu

로컬 개발용 (For local development):

claude --plugin-dir ./path/to/agent-skills

설치가 완료되면, Claude는 작업에 따라 관련 스킬을 자동으로 로드합니다.

이 저장소는 두 가지 방식으로 Codex를 지원합니다.

옵션 1: 번들로 포함된 Codex 플러그인 설치

npx codex-plugin add callstackincubator/agent-skills

이 명령은 .agents/plugins/marketplace.json을 읽고, 번들된 플러그인을 .codex/plugins/에 설치하며, Codex를 재시작한 후 사용할 수 있게 합니다.

옵션 2: 독립형 스킬 설치

모든 주요 AI 코딩 어시스턴트는 에이전트 스킬(Agent Skills) 표준을 지원합니다.

skill-installer를 통한 설치:

$skill-installer install react-native-best-practices from callstackincubator/agent-skills

또는 수동으로 클론(clone):

또는 수동으로 클론(clone):

# 프로젝트 레벨 (Project-level)
git clone https://github.com/callstackincubator/agent-skills.git
cp -r agent-skills/skills/* .codex/skills/
...

새로 설치된 스킬(skills)을 인식하려면 Codex를 재시작하세요.

사용법 (Usage): 스킬을 언급하려면 $를 입력하거나 /skills 명령어를 사용하세요.

이 스킬들은 Codex Skills UI 호환성을 위해 agents/openai.yaml 메타데이터를 포함하고 있습니다.

옵션 1: GitHub에서 규칙(rules) 가져오기

Cursor의 GitHub / GitLab 규칙 가져오기 기능은 .mdc 파일만 발견할 수 있습니다 (일반적으로 .cursor/rules/ 아래에 위치). 이 저장소는 해당 파일들을 포함하고 있으므로 가져오기에 성공합니다.

• Cursor 설정 열기 (Cmd+Shift+J / Ctrl+Shift+J)
• Rules로 이동하여 Import rules from GitHub(버전에 따라 문구가 다를 수 있음)를 사용하거나, Git URL로부터 원격 규칙을 추가하세요.
• 다음 주소 입력: https://github.com/callstackincubator/agent-skills.git

가져온 규칙은 짧은 Cursor **프로젝트 규칙 (project rules)**입니다. 이 규칙들은 skills/ 아래에 있는 전체 Agent Skills를 가리킵니다. 모델이 로컬에서 전체 마크다운(markdown) 스킬을 읽기를 원할 때는 skills/ 트리를 워크스페이스(workspace)로 클론하거나 복사하세요 (옵션 2 참조).

옵션 2: 로컬 설치 (Local Installation)

# 프로젝트 레벨 (Project-level)
git clone https://github.com/callstackincubator/agent-skills.git .cursor/skills/agent-skills
# 사용자 레벨 (User-level) (모든 프로젝트에서 사용 가능)
...

사용법 (Usage): Agent 채팅에서 /를 입력하여 이름으로 스킬을 검색하고 선택하세요.

저장소에서 설치:

gemini skills install https://github.com/callstackincubator/agent-skills.git

또는 워크스페이스에 설치:

gemini skills install https://github.com/callstackincubator/agent-skills.git --scope workspace

관리 명령어 (Management commands):

/skills list - 발견된 모든 스킬 보기
/skills enable <name>
/skills disable <name> - 사용 가능 여부 전환
/skills reload - 스킬 인벤토리(inventory) 새로고침

지원되는 모든 스킬 디렉토리로 클론하세요:

# 프로젝트 레벨 (Project-level)
git clone https://github.com/callstackincubator/agent-skills.git
cp -r agent-skills/skills/* .opencode/skill/
...

OpenCode 또한 Claude 호환 경로(.claude/skills/)를 발견합니다.

, ~/.claude/skills/

).

opencode.json에서의 권한 제어 (Permission control):

{
"permission": {
"skill": {
...

네이티브 스킬 지원 기능이 없는 어시스턴트의 경우, 스킬 파일을 참조하도록 지정하세요:

React Native 성능 가이드라인을 확인하려면 skills/react-native-best-practices/SKILL.md를 읽으세요

또는 특정 주제를 참조하세요:

React DevTools 프로파일링 지침은 js-profile-react.md를 찾아보세요

callstack/optimization-best-practices 저장소에는 다음 항목에 대한 실행 가능한 코드 예제가 포함되어 있습니다:

• React Compiler 설정
• 전용 React Native SDK 대 웹 폴리필 (web polyfills)
• Android에서의 R8 코드 축소 (code shrinking)

Cursor, GitHub Copilot, Claude API, ChatGPT 및 기타 AI 코딩 어시스턴트와의 상세한 설정 방법은 AI 어시스턴트 통합 가이드 (AI Assistant Integration Guide)를 참조하세요.

agent-skills/
├── .cursor/
│ └── rules/ # “GitHub에서 규칙 가져오기”를 위한 Cursor 임포트 가능 프로젝트 규칙 (.mdc)
...

Claude Code 플러그인 설치에는 .claude-plugin/marketplace.json을 사용하고, Codex 플러그인 설치에는 .agents/plugins/marketplace.json을 사용하세요.

독립적인 skills/ 디렉토리는 저장소 로컬 스킬 (repo-local skills)을 포함합니다. plugins/ 디렉토리는 설치 가능한 Codex 플러그인 번들을 포함합니다.

기여를 환영합니다! 스킬은 다음과 같아야 합니다:

실행 가능해야 함 (Actionable): 이론이 아닌 단계별 지침
검색 가능해야 함 (Searchable): 명확한 헤딩과 키워드
완전해야 함 (Complete): 코드 예제와 일반적인 실수 (common pitfalls) 포함

스킬을 추가하거나 편집할 때는 agentskills.io 사양과 Claude Code 모범 사례를 따르세요. 유지 관리자 체크리스트는 AGENTS.md에 있으며, 지원 세부 사항은 docs/skill-conventions.md에 있습니다.

이것은 시작일 뿐입니다! 다음 기능들이 계획되어 있거나 진행 중입니다.

여러 스킬은 시각적 프로파일러 출력(플레임 그래프 (flame graphs), 트리맵 (treemaps), 메모리 스냅샷 (memory snapshots))을 해석하는 작업을 포함합니다. AI 에이전트는 아직 이를 자율적으로 처리할 수 없습니다.

영향을 받는 스킬:

js-profile-react.md

• React DevTools 플레임 그래프 (flame graphs)

js-measure-fps.md

• FPS 그래프 및 성능 오버레이 (performance overlays)

native-profiling.md

• Xcode Instruments / Android Studio Profiler

native-measure-tti.md

• TTI 타임라인 시각화 (TTI timeline visualization)

native-view-flattening.md

• 뷰 계층 구조 검사 (View hierarchy inspection)

bundle-analyze-js.md

• 번들 트리맵 시각화 (Bundle treemap visualization)

bundle-analyze-app.md

• 앱 크기 상세 분석 (App size breakdown) (Emerge Tools, Ruler)

계획된 솔루션 (Planned solution): 스크린샷 캡처 및 시각적 분석을 위한 MCP (Model Context Protocol) 통합. 기여를 환영합니다!

완전한 범위를 위해 다음 항목들과 함께 사용하는 것을 고려해 보세요:

• Vercel React Best Practices - React/Next.js 웹 최적화 (40개 이상의 규칙)

• 시각적 프로파일러 피드백을 위한 MCP 통합

• 디버깅, 테스트 및 CI/CD를 위한 추가 기술

• 더 많은 코드 예제 및 대화형 튜토리얼

이 React Native 성능 기술은 'The Ultimate Guide to React Native Optimization'을 기반으로 합니다.

Callstack는 React 및 React Native 전문가 그룹입니다. 성능 최적화에 도움이 필요하거나 단순히 인사를 나누고 싶다면 hello@callstack.com으로 연락해 주세요!

저희가 하는 일이 마음에 드시나요? ⚛️ Callstack 팀에 합류하여 놀라운 React Native 프로젝트를 함께 진행해 보세요!