AIKraft/AI/Войти
AIKraft/Skills/mantine пользовательские компоненты

mantine пользовательские компоненты

Build custom components that integrate with Mantine's theming, Styles API, and core features. Use this skill when: (1) creating a new component using factory(), polymorphicFactory(), or genericFactory(), (2) adding Styles API support (classNames, styles, vars, unstyled), (3) implementing CSS variables via createVarsResolver, (4) building compound components with sub-components and shared context,

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

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

Навык описывает создание кастомных компонентов в Mantine 9.x с использованием factory-функций и интеграцией с темизацией. Он обеспечивает поддержку Styles API, CSS-переменных и создание составных компонентов с общим контекстом.

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

  • Создание нового компонента с использованием factory(), polymorphicFactory() или genericFactory().
  • Добавление поддержки Styles API, включая classNames, styles, vars и режим unstyled.
  • Реализация CSS-переменных через функцию createVarsResolver.
  • Разработка составных компонентов, состоящих из подкомпонентов с общим контекстом.

Как работает

  1. Импортировать необходимые утилиты из '@mantine/core', такие как factory, useProps, useStyles и createVarsResolver.
  2. Определить типы стилей (StylesNames), вариантов (Variant) и CSS-переменных (CssVariables) для компонента.
  3. Использовать factory-функцию для создания компонента, применяя useProps и useStyles для обработки пропсов.
  4. Настроить резолвер переменных через createVarsResolver для работы с CSS-переменными.
  5. Импортировать CSS-модули и применить их к структуре компонента.

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

Создай кастомную кнопку Mantine с поддержкой вариантов filled и outline через factory.
Реализуй составной компонент Mantine с подкомпонентами и общим контекстом.
Добавь поддержку CSS-переменных в новый компонент Mantine с помощью createVarsResolver.

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

  • Среда с установленным Mantine 9.x
  • Доступ к '@mantine/core'

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

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

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

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