SkillFoxx
Telegram

HeroUI — скилл

Официальные скиллы HeroUI для React и React Native: компоненты третьей версии, темы на oklch и миграция со второй

  • 31 196 ★ репозитория
  • Последний коммит
  • Apache-2.0
СкиллОфициальныйВыбор редакции

Расширенный доступ

Почему такой уровень

  • Установщик `curl ... | bash` скачивает и выполняет скрипт с heroui.com, а скрипты скилла запускаются через `node` и ходят в сеть.
  • Скилл в домашнем каталоге влияет на все проекты агента, поэтому для одного проекта ставьте его в область проекта.
Все причины и проверки

heroui-inc/herouiАвтор:HeroUI

Установка

Ручная установка

npx skills add heroui-inc/heroui

Команда из README. Поддерживает Claude Code, Cursor, OpenCode и другие агенты.

Доступ и проверки

Как мы проверяем

Расширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.

  • Установщик `curl ... | bash` скачивает и выполняет скрипт с heroui.com, а скрипты скилла запускаются через `node` и ходят в сеть.
  • Скилл в домашнем каталоге влияет на все проекты агента, поэтому для одного проекта ставьте его в область проекта.

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Репозиторий HeroUI публикует три скилла. `heroui-react` рассказывает агенту о библиотеке третьей версии на Tailwind CSS v4 и React Aria, `heroui-native` покрывает React Native на Uniwind, а `heroui-migration` ведет проект со второй версии на третью. Первый скилл сразу предупреждает: приемы второй версии не работают, провайдер не нужен, компоненты собираются из вложенных частей вроде `Card.Header`, анимации идут на CSS без `framer-motion`. Сама документация в скилле не лежит: ее забирают из сети при каждой задаче. Скрипты `list_components.mjs`, `get_component_docs.mjs`, `get_source.mjs`, `get_styles.mjs` и `get_theme.mjs` достают с heroui.com описание компонента, исходники, BEM-классы и переменные темы. Перед кодом агент читает актуальные пропсы и примеры.

Для кого. Фронтенд-разработчикам на React и React Native, которые строят интерфейс на HeroUI v3 и хотят видеть в коде агента актуальный API.

Подходит, если

  • Агент собирает форму, модальное окно или целую страницу из компонентов HeroUI v3.
  • Брендовые цвета переносятся в тему на переменных `oklch`, а темный режим включается классом `dark`.
  • Приложение на HeroUI v2 переходит на v3, и агент ведет миграцию по компонентам и хукам.
  • Мобильное приложение на React Native строится на HeroUI Native.
  • В подсказках агента встречаются пропсы, которых в v3 нет, и вы хотите заменить их выдачей из документации.

Не подходит, если

  • Проект использует другую библиотеку компонентов, например shadcn/ui или Material UI.
  • В проекте остается Tailwind CSS v3: HeroUI v3 с ним не работает.
  • Работа идет без сети, а скрипты скилла берут документацию с heroui.com.

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

Собери страницу входа на HeroUI v3: форма из двух полей, кнопка с вариантом `primary` и темная тема. Перед кодом достань документацию компонентов.

Ограничения

Скилл `heroui-react` описывает только HeroUI v3 и требует Tailwind CSS v4, а `heroui-migration` помечен в метаданных как `preview`. Скрипты запускаются через `node` и ходят на heroui.com за MDX-документацией, поэтому без сети у агента остается один `SKILL.md`. Установщик по умолчанию пишет в домашний каталог, и скилл попадает во все проекты; чтобы поставить его в один проект, задайте `HEROUI_SKILL_SCOPE=project`. Пошаговая настройка в скилле дана для Next.js App Router, для других сборщиков ее придется уточнять по документации.

Как отключить. Удалите папки `heroui-react`, `heroui-native` и `heroui-migration` из каталога скиллов агента. Сама библиотека `@heroui/react` в проекте останется.

Частые вопросы

Как поставить скиллы HeroUI в Claude Code?

Выполните `npx skills add heroui-inc/heroui`. Скилл подхватывается автоматически, вызвать его вручную можно командой `/heroui-react`.

Чем `heroui-react` отличается от `heroui-native`?

`heroui-react` описывает веб-библиотеку на Tailwind CSS v4 и React Aria, а `heroui-native` — мобильную на Uniwind и React Native. Пакеты и пропсы у них разные.

Что делать с проектом на HeroUI v2?

Подключите `heroui-migration`. Он ведет к третьей версии: убрать провайдер, перейти на вложенные компоненты и Tailwind v4, заменить удаленные хуки. Скилл помечен как `preview`.

Нужен ли MCP-сервер, если есть скилл?

Для типичных задач хватает скилла. MCP-сервер `@heroui/react-mcp` отдает документацию и исходники в реальном времени, по stdio и только для `@heroui/react` v3. Подключение в Claude Code: `claude mcp add heroui-react -- npx -y @heroui/react-mcp@latest`.

Как поставить скилл только в один проект?

Запустите из корня проекта `curl -fsSL https://heroui.com/install | HEROUI_SKILL_SCOPE=project bash -s heroui-react`. Файлы лягут в `.claude/skills/` для Claude Code, `.cursor/skills/` для Cursor и `.agents/skills/` для Codex.

Обсуждение

Вопросов и отзывов пока нет.

Скиллы
Официальный

Скилл подбирает и ставит анимированные React-компоненты beUI через публичный MCP или реестр shadcn вместо самодельных виджетов

СкиллРасширенный доступ2 тыс.

Три скилла по графикам Bklit UI для React: установка из реестра shadcn, стилизация под тему приложения и переход с Recharts.

СкиллРасширенный доступ2 тыс.

Скиллы Material UI

Material UI agent skills

Четыре официальных скилла Material UI: стилизация, темы, интеграция с Next.js и совместная работа с Tailwind CSS

СкиллМинимальный доступ99,3 тыс.
Официальный

Скилл Nuxt UI v4: агент строит интерфейсы на Vue и Nuxt, подбирает компоненты, настраивает тему и верстает формы и дашборды

СкиллРасширенный доступ7,1 тыс.
Официальный

Скилл Magic UI: агент добавляет анимированные компоненты в React и Next.js через реестр shadcn и проверяет доступность

СкиллРасширенный доступ23,2 тыс.
Официальный

Скилл по третьей версии React Joyride: пошаговые туры по интерфейсу, шаги, события, свои компоненты и разбор типовых поломок

СкиллМинимальный доступ7,9 тыс.

Сравнение с похожими

Карточки с тем же главным запросом: чем они отличаются.

ИнструментОфициальныйЗвезды репозиторияГлавное отличие
HeroUI (эта карточка)да31 196
shadcn/uiнет128 022официальный скилл и MCP-сервер shadcn/ui, где компоненты копируются в проект; здесь скиллы библиотеки HeroUI на React Aria и Tailwind CSS v4
Скиллы Material UIнет99 334четыре официальных скилла Material UI со стилизацией и темами; здесь скиллы другой библиотеки, включая React Native и миграцию с версии 2

Коротко о README

README подает HeroUI, ранее NextUI, как библиотеку React-компонентов с доступностью React Aria и стилями Tailwind CSS v4 без обязательного провайдера. Отдельный раздел про ИИ перечисляет MCP-сервер, `llms.txt`, `AGENTS.md` и скиллы, а таблица сравнивает библиотеку с shadcn/ui, MUI, Chakra и Mantine.

Бейдж для README

Исходный SKILL.md

---
name: heroui-react
description: "HeroUI v3 React component library (Tailwind CSS v4 + React Aria). Use when building UIs with HeroUI — creating Buttons, Modals, Forms, Cards; installing @heroui/react; configuring dark/light themes with oklch variables; or fetching component docs. Keywords: HeroUI, Hero UI, heroui, @heroui/react, @heroui/styles."
metadata:
  author: heroui
  version: "3.0.1"
---

# HeroUI v3 React Development Guide

HeroUI v3 is a component library built on **Tailwind CSS v4** and **React Aria Components**, providing accessible, customizable UI components for React applications.

---

## Installation

```bash
curl -fsSL https://heroui.com/install | bash -s heroui-react
```

---

## CRITICAL: v3 Only - Ignore v2 Knowledge

**This guide is for HeroUI v3 ONLY.** Do NOT apply v2 patterns — the provider, styling, and component API all changed:

| Feature       | v2 (DO NOT USE)                   | v3 (USE THIS)                               |
| ------------- | --------------------------------- | ------------------------------------------- |
| Provider      | `<HeroUIProvider>` required       | **No Provider needed**                      |
| Animations    | `framer-motion` package           | CSS-based, no extra deps                    |
| Component API | Flat props: `<Card title="x">`    | Compound: `<Card><Card.Header>`             |
| Styling       | Tailwind v3 + `@heroui/theme`     | Tailwind v4 + `@heroui/styles`         	  |
| Packages      | `@heroui/system`, `@heroui/theme` | `@heroui/react`, `@heroui/styles` 		  |

```tsx
// DO NOT DO THIS - v2 pattern
import { HeroUIProvider } from "@heroui/react";
import { motion } from "framer-motion";

<HeroUIProvider>
	<Card title="Product" description="A great product" />
</HeroUIProvider>;
```

### CORRECT (v3 patterns)

```tsx
// DO THIS - v3 pattern (no provider, compound components)
import { Card } from "@heroui/react";

Сообщить о проблеме