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

syncfusion-react-tabs — скилл для Claude Code: вкладки Syncfusion

Помогает агенту собрать и настроить компонент Tab из Syncfusion для React: заголовки, перетаскивание, ленивую загрузку контента.

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

Что делает syncfusion-react-tabs

Скилл описывает работу с TabComponent из пакета @syncfusion/ej2-react-navigations: как разложить контент по вкладкам, задать положение заголовков, включить перетаскивание для переупорядочивания и настроить отрисовку содержимого. Внутри — справочники по установке пакета, стилям заголовков, режимам переполнения, доступности и локализации.

Отдельная часть посвящена стратегиям рендеринга: по требованию, динамический и при первой загрузке. Выбор между ними решает, сохранится ли состояние вкладки при переключении, поэтому для форм с введёнными данными это повод проверить настройку до того, как пользователь потеряет введённое.

Скилл рассчитан на React-проект с уже подключённым Syncfusion: в примерах фигурируют импорты из @syncfusion/ej2-react-navigations и CSS-темы tailwind3. Если пакет ещё не стоит, начинать придётся с его установки.

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

  • собрать интерфейс с вкладками и переключением между разделами
  • настроить положение заголовков вкладок: сверху, снизу, слева или справа
  • включить перетаскивание вкладок для изменения порядка
  • выбрать режим отрисовки контента, чтобы не терять состояние формы
  • добавить локализацию и поддержку RTL для вкладок

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

  • Собери вкладки на Syncfusion React с заголовками Home, Profile и Settings
  • Включи перетаскивание вкладок и запрети его для последней вкладки
  • Переведи заголовки вкладок на русский и включи RTL

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

1Через Skills CLI (Vercel)

npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-tabs -a claude-code

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

~/.claude/skills/syncfusion-react-tabs/SKILL.md

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

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

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

syncfusion-react-image-editor Скилл для работы с компонентом Syncfusion React Image Editor: подскажет агенту, как встроить редактирование картинок в React-приложение. CX Codex +1 713установок syncfusion-react-barcode Скилл для генерации штрихкодов, QR-кодов и Data Matrix в React через компоненты Syncfusion. Пригодится, когда нужно встроить коды в форму, отчёт или этикетку. CX Codex +1 706установок syncfusion-react-dashboard-layout Скилл для ИИ-агента: подсказывает, как собрать дашборд на React с перетаскиваемыми панелями Syncfusion. CX Codex +1 703установок syncfusion-react-maps Помогает агенту собрать географическую карту на React: GeoJSON, маркеры, пузыри, легенда, хороплет. Пригодится, когда данные нужно показать по регионам. CX Codex +1 702установок syncfusion-react-blockeditor Скилл помогает агенту подключить Syncfusion React BlockEditor: блочный редактор контента с меню, drag-and-drop и совместной работой. CX Codex +1 701установок syncfusion-react-treeview Скилл для ИИ-агента, который помогает собрать иерархический TreeView из @syncfusion/ej2-react-navigations: выбор узлов, чекбоксы, drag-drop, инлайн-редактирование. CX Codex +1 700установок syncfusion-react-popups Скилл для ИИ-агентов, который подсказывает, как собирать модальные окна, тултипы и поповеры на компонентах Syncfusion для React. CX Codex +1 658установок syncfusion-react-3d-chart Скилл помогает агенту собрать объёмные столбчатые и линейчатые диаграммы Syncfusion в React-проекте. Пригодится, когда нужен график с осями, легендой и экспортом. CX Codex +1 656установок

Похожие

tab-navigation dembrandt Скилл для проектирования вкладок: подсказывает, когда они уместны, как устроена полоса вкладок и как ведёт себя клавиатура. CX Codex +1 674установок expo-router expo Скилл для работы с файловой маршрутизацией, стеками, модалями и табами в Expo Router. Пригодится, если вы строите навигацию в мобильном приложении на React Native. CX Codex +1 27 900установок navigation-patterns Owl-Listener Помогает подобрать схемы переходов между разделами интерфейса: от таббаров до боковых панелей. Полезен при проектировании мобильных и десктопных экранов. CX Codex +1 1 800установок react-spring-physics freshtechbro Скилл для React-анимаций на физике пружин: React Spring и Popmotion. Пригодится, когда нужны жесты, инерция и прерываемые переходы. CX Codex +1 2 400установок react-joyride gilbarbara Учит агента создавать пошаговые туры и онбординг-подсказки в React-приложениях через библиотеку React Joyride v3. CX Codex +1 686установок react-native-architecture Seth Hobson Скилл для Claude Code, Codex и Cursor: подсказывает структуру проекта, навигацию, нативные модули и офлайн-синхронизацию в React Native на Expo. CX Codex 15 087установок

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

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

Вопросы о syncfusion-react-tabs

Как установить syncfusion-react-tabs в Claude?

Выполните npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-tabs -a claude-code. Скилл окажется в ~/.claude/skills/syncfusion-react-tabs/SKILL.md.

Что делает syncfusion-react-tabs?

Даёт агенту инструкции по компоненту Tab из Syncfusion для React: создание вкладок, стилизация заголовков, режимы переполнения, перетаскивание, доступность и локализация.

Что нужно для работы скилла?

React-проект с пакетом @syncfusion/ej2-react-navigations и подключёнными стилями темы — в примерах используется tailwind3.

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

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

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

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