AIKraft/AI/Войти
AIKraft/Skills/Использование DOM

Использование DOM

Use Expo DOM components to run web code in a webview on native and as-is on web. Migrate web code to native incrementally.

expo official Разработка

Что делает навык

DOM Components позволяют веб-коду выполняться в WebView на нативных платформах без изменений, сохраняя исходное рендеринговое поведение в вебе. Это решает задачу использования веб-библиотек и миграции существующего кода на нативные платформы Expo без необходимости переписывания.

Когда применять

  • Использование веб-специфичных библиотек, таких как recharts, chart.js, react-syntax-highlighter или редакторов rich text.
  • Миграция существующих React-компонентов с веб-платформы на нативные без их переписывания.
  • Создание сложных HTML/CSS-макетов, для которых недоступны функции CSS в React Native.
  • Встраивание внешнего контента через iframes, требующего контекста браузера.
  • Использование веб-API графики, таких как Canvas или WebGL, которые недоступны нативно.

Как работает

  1. Импортировать DOM Components в проект Expo.
  2. Заменить стандартные React Native компоненты на DOM-компоненты для целевых участков UI.
  3. Внедрить веб-код или библиотеки, зависящие от DOM API, внутрь этих компонентов.
  4. Обеспечить выполнение кода в WebView на нативных платформах и рендеринг как есть в вебе.
  5. Протестировать работу компонентов на обеих платформах для подтверждения корректности.

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

Как использовать recharts в приложении Expo для отображения графиков на iOS и Android?
Мигрируй существующий компонент с syntax highlighter на DOM Components для работы в нативных приложениях.
Внедри iframe с внешним контентом в экран приложения, используя DOM Components.

Что понадобится

  • Среда Expo
  • Доступ к DOM API (браузерный контекст или WebView)

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «use-dom» из репозитория: # https://github.com/expo/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r use-dom/ ~/.claude/skills/use-dom/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.