К основному содержанию
affpapa.org
RU EN
скилл CX Codex

react-navigation — скилл для Claude Code: что делает и как установить

Справочники по UI-паттернам React Navigation 7: стеки, табы, шторки, drawer, шапки, safe area. Пригодится, когда экраны и модалки надо разложить по навигатору.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓ 
npx skills add callstackincubator/agent-skills --skill react-navigation -a claude-code
Открыть на GitHub

Что делает react-navigation

Скилл подключается, когда агент собирает навигацию в приложении на React Navigation: стек, нижние и верхние табы, drawer, bottom sheet, настройка шапки. Справочники лежат в references/: stacks.md, form-sheet.md, bottom-tabs.md, native-bottom-tabs.md, material-top-tabs.md, drawers.md, header.md, safe-areas.md. В SKILL.md есть таблица «проблема → файл», поэтому агент открывает нужный справочник, а не весь набор сразу.

Есть развилка по API. В существующем приложении скилл велит сперва посмотреть, как навигация устроена сейчас, и держаться того же стиля: объектный Static API или компонентный Dynamic. Новому проекту советует Static API.

Ограничение жёсткое: всё описанное рассчитано на React Navigation 7. На другой версии API и паттерны могут не сработать, и это повод свериться с версией в package.json до того, как агент начнёт править навигатор.

Какие задачи решает

  • разложить экраны и модалки по стеку
  • собрать нижние табы, которые работают и в вебе
  • показать bottom sheet поверх текущего экрана
  • убрать наезд контента на статус-бар и инсеты таб-бара
  • настроить шапку внутри drawer-навигатора

Примеры запросов агенту

  • Собери навигацию в новом приложении на React Navigation 7: нижние табы, внутри первой вкладки стек
  • Экран входа должен открываться как form sheet, остальное — обычный стек
  • В drawer контент заезжает под статус-бар, поправь safe area и инсеты

Как установить react-navigation

1Через Skills CLI (Vercel)

npx skills add callstackincubator/agent-skills --skill react-navigation -a claude-code

2Вручную: положить файлы

~/.claude/skills/react-navigation/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/react-navigation/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Из того же набора9

react-native-best-practices Скилл передаёт агенту правила оптимизации React Native на базе опыта Callstack: от профилирования FPS и TTI до чистки бандла. Помогает устранить лаги анимаций и утечки памяти. CX Codex +1 30 200установок upgrading-react-native Обновляет React Native-приложения до новых версий: применяет диффы из rn-diff-purge, мигрирует iOS и Android, решает конфликты CocoaPods и Gradle. CX Codex +1 12 600установок github-actions Готовые шаблоны GitHub Actions для сборки React Native приложений на iOS-симуляторе и Android-эмуляторе в облаке с загрузкой артефактов. Упрощает настройку CI-пайплайнов и скачивание собранных бинарников через gh или REST API. CX Codex +1 10 900установок validate-skills Проверяет скиллы в skills/ по спецификации agentskills.io и практикам Claude Code. Нужен при создании и ревью набора скиллов. CX Codex +1 7 300установок react-native-brownfield-migration Помогает пошагово внедрять React Native или Expo в нативные приложения iOS и Android с помощью @callstack/react-native-brownfield. CX Codex +1 5 200установок create-react-native-library Скилл помогает развернуть библиотеку React Native или локальный нативный модуль прямо в приложении и подсказывает, по какой инструкции идти дальше. CX Codex +1 4 400установок react-native-tv-best-practices Проверяет React Native-приложения под ТВ: фокус и D-pad, вёрстка с десяти футов, DRM и воспроизведение, память на слабых приставках. CX Codex +1 2 300установок assess-react-native-migration Разбирает продуктовые репозитории и решает, стоит ли переносить мобильное приложение на React Native — до того, как начнётся код. CX Codex +1 2 100установок

Похожие

react-native-app aj-geddes Скилл ведёт агента по сборке кроссплатформенных мобильных приложений на React Native: навигация, состояние, запросы к API. CX Codex +1 503установок react-native-design Seth Hobson Скилл помогает собирать React Native-приложения со стилями, навигацией и анимациями Reanimated. Пригодится для кроссплатформенной мобильной разработки. CX Codex 15 522установок navigation-patterns Owl-Listener Помогает подобрать схемы переходов между разделами интерфейса: от таббаров до боковых панелей. Полезен при проектировании мобильных и десктопных экранов. CX Codex +1 1 800установок react-native-architecture Seth Hobson Скилл для Claude Code, Codex и Cursor: подсказывает структуру проекта, навигацию, нативные модули и офлайн-синхронизацию в React Native на Expo. CX Codex 15 087установок vercel-react-native-skills vercel Набор правил по React Native и Expo для ИИ-агента: списки, анимации, навигация. Пригодится, когда агент правит мобильный код и надо, чтобы он делал это одинаково. CX Codex +1 255 200установок react-native-expert https://github.com/Jeffallan Скилл для агентов ИИ-кодинга: помогает собирать мобильные приложения на React Native и Expo — навигация, нативные модули, скорость списков, код под iOS и Android. CX Codex +1 4 900установок

Рядом в теме «Фронтенд и UI»

Всё по теме «Фронтенд и UI» →

Вопросы о react-navigation

Как установить react-navigation в Claude Code?

Выполните npx skills add callstackincubator/agent-skills --skill react-navigation -a claude-code. Файл скилла появится по пути ~/.claude/skills/react-navigation/SKILL.md.

Что делает скилл react-navigation?

Даёт агенту справочники по навигационному UI на React Navigation: стеки, табы, drawer, bottom sheet, шапки и safe area. Агент берёт паттерн из нужного файла вместо того, чтобы придумывать структуру самому.

С какой версией React Navigation это работает?

Только с React Navigation 7. Для других версий API и паттерны в справочниках могут не подойти.

Исходный текст

SKILL.md · MIT 
---
name: react-navigation
description: Provides React Navigation UI patterns for stacks, tabs, drawers etc. Use when building navigation UIs with React Navigation, configuring headers, bottom sheets or handling safe areas and insets.
license: MIT
---

# React Navigation

## Overview

Guide for building navigation UIs with React Navigation.

This skill only applies to React Navigation 7. The API and patterns may not work with different versions.

## API Selection

React Navigation offers two API - object-based `Static API` and component-based `Dynamic API`.

- **Existing Apps**: Check the current navigation setup and follow the same API style when using the references
- **New Apps**: If the app does not have an existing navigation setup yet, prefer `Static API`

## When to Apply

Reference this skill when:

- Building navigation UI patterns such as stacks, tabs, drawers, sheets etc.
- Configuring headers and other built-in navigator UI
- Handling safe areas and insets in navigation UI

## References

| File                                        | Description                    |
| ------------------------------------------- | ------------------------------ |
| [stacks.md][stacks]                         | Stack based navigation         |
| [form-sheet.md][form-sheet]                 | Bottom sheet and form sheets   |
| [bottom-tabs.md][bottom-tabs]               | Cross-platform bottom tabs     |
| [native-bottom-tabs.md][native-bottom-tabs] | Native bottom tabs             |
| [material-top-tabs.md][material-top-tabs]   | Swipeable Top tabs             |
| [drawers.md][drawers]                       | Drawer navigation and sidebars |
| [header.md][header]                         | Configuring headers            |
| [safe-areas.md][safe-areas]                 | Safe-area handling             |

## Problem -> Skill Mapping

| Problem                                                                   | Start With                                  |
| ------------------------------------------------------------------------- | ------------------------------------------- |
| Showing screens and modals in a stack                                     | [stacks.md][stacks]                         |
| Showing bottom sheets or form sheets                                      | [form-sheet.md][form-sheet]                 |
| Showing screens in bottom tabs or responsive sidebars with web support    | [bottom-tabs.md][bottom-tabs]               |
| Showing screens in native tabs on iOS & Android                           | [native-bottom-tabs.md][native-bottom-tabs] |
| Showing content in swipeable top tabs                                     | [material-top-tabs.md][material-top-tabs]   |
| Using a drawer or sidebar                                                 | [drawers.md][drawers]                       |
| Configuring the header in bottom tab or drawer navigator                  | [header.md][header]                         |
| Handling safe-area such as status bar, header insets, tab bar insets etc. | [safe-areas.md][safe-areas]                 |

[stacks]: references/stacks.md
[form-sheet]: references/form-sheet.md
[safe-areas]: references/safe-areas.md
[bottom-tabs]: references/bottom-tabs.md
[native-bottom-tabs]: references/native-bottom-tabs.md
[material-top-tabs]: references/material-top-tabs.md
[drawers]: references/drawers.md
[header]: references/header.md

© callstackincubator · MIT · callstackincubator/agent-skills

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой
Золотой спонсор AI-аналитика спроса на iGaming — индекс, тренды, конкуренты
Nutra.Club Закрытое сообщество Nutra-вертикали от команды M1

Показы, клики и копирования кода — открытая статистика. Мы держим цифры публичными по той же логике, что и сам NeBlask. Стать спонсором