Community코딩 & 개발github.com

mantinedev/mantine-custom-components

Mantine의 테마, Styles API 및 핵심 기능과 통합되는 커스텀 컴포넌트를 구축합니다.

mantine-custom-components란 무엇인가요?

이 스킬은 Mantine UI 라이브러리에서 커스텀 컴포넌트를 개발할 때 필요한 모든 작업을 지원합니다. `factory()`, `polymorphicFactory()`, `genericFactory()`를 사용한 새로운 컴포넌트 생성부터 Styles API 지원 추가 (`classNames`, `styles`, `vars`, `unstyled`), `createVarsResolver`를 통한 CSS 변수 구현, 하위 컴포넌트와 공유 컨텍스트를 가진 복합 컴포넌트 구축, 그리고 `Component.extend()`를 사용한 MantineProvider 등록까지 폭넓게 다룹니다. 주로 `@mantine/core` 패키지의 `Factory`, `useProps`, `useStyles`, `BoxProps`, `StylesApiProps`, `ElementProps`와 같은 핵심 기능을 사용하는 작업에 적합합니다. Claude Code, Cursor, Codex 등 다양한 AI 에이전트 플랫폼에서 사용할 수 있으며, Mantine의 일관된 테마 시스템과 스타일링 API를 활용하여 재사용 가능하고 유지보수하기 쉬운 컴포넌트를 만드는 데 효과적입니다.

지원 대상~Claude Code~Codex CLI~Cursor
Part ofReact
npx skills add https://github.com/mantinedev/skills/tree/main/skills/mantine-custom-components

Installed? Explore more 코딩 & 개발 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

mantine-custom-components은(는) 무엇을 하나요?

Mantine의 테마, Styles API 및 핵심 기능과 통합되는 커스텀 컴포넌트를 구축합니다. 이 스킬은 다음과 같은 경우에 사용합니다: (1) factory(), polymorphicFactory(), 또는 genericFactory()를 사용하여 새 컴포넌트를 생성할 때, (2) Styles API 지원(classNames, styles, vars, unstyled)을 추가할 때, (3) createVarsResolver를 통해 CSS 변수를 구현할 때, (4) 하위 컴포넌트와 공유 컨텍스트를 가진 복합 컴포넌트를 구축할 때, (5) Component.extend()를 사용하여 컴포넌트를 MantineProvider에 등록할 때, 또는 (6) @mantine/core에서 Factory, useProps, useStyles, BoxProps, StylesApiProps, 또는 ElementProps와 관련된 작업을 수행할 때.

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

관련 스킬