Mantine with LLMs

Mantine with LLMs (LLM과 함께 쓰는 Mantine)

Mantine은 Cursor, Windsurf, GitHub Copilot, ChatGPT, Claude 같은 AI 도구가 Mantine UI 라이브러리를 이해하고 작업할 수 있도록 LLM 친화적인 문서를 제공해요. llms.txt 문서는 Mantine 릴리스마다 갱신돼요.

출처: 문서

본문

문서 (Documentation)

링크:

llms.txt — 간결한 버전
단일 문서로 전체 문서 다운로드 (~1.8MB)

LLM 문서에는 다음이 포함돼요:

Getting Started — 설치와 설정 가이드
Components — props, 예시, 사용법이 포함된 모든 Mantine 컴포넌트
Hooks — 예시가 포함된 완전한 훅 문서
Theming — 테마 커스터마이즈와 MantineProvider 설정
Styles — CSS 모듈, CSS 변수, 스타일링 접근법
Frequently Asked Questions — 흔한 질문과 해결책

Cursor

Cursor에서는 @Docs 기능으로 문서를 참조할 수 있어요:

프롬프트에 @Docs 입력
Mantine 문서 URL 참조: https://mantine.dev/llms.txt
Mantine 컴포넌트, 스타일링, 구현에 대해 질문

Windsurf

Windsurf 사용자:

@https://mantine.dev/llms.txt로 문서 참조
또는 .windsurfrules 파일에 추가해 지속적으로 접근

ChatGPT와 Claude

ChatGPT나 Claude를 사용할 때:

Mantine v9를 사용 중이라고 언급
문서 URL 참조: https://mantine.dev/llms.txt
AI가 문서를 가져와 정확한 답변 제공

GitHub Copilot

Copilot은 외부 문서를 직접 지원하지 않지만:

주석에 관련 문서 스니펫 포함
더 나은 제안을 위해 컴포넌트 이름과 props를 정확히 참조

스킬 (Skills)

Mantine은 mantinedev/skills 저장소에서 AI 코딩 에이전트용 스킬도 제공해요.

현재 사용 가능한 스킬:

mantine-combobox — Combobox로 커스텀 select/autocomplete/multiselect 컴포넌트 만들기
mantine-form — @mantine/form, 검증, 중첩 필드, 폼 컨텍스트로 폼 만들기
mantine-custom-components — Mantine factory API와 Styles API로 커스텀 컴포넌트 만들기

스킬 설치. 저장소에서 각 스킬을 설치해요:

npx skills add https://github.com/mantinedev/skills --skill mantine-combobox
npx skills add https://github.com/mantinedev/skills --skill mantine-form
npx skills add https://github.com/mantinedev/skills --skill mantine-custom-components

스킬 사용. AI 프롬프트에서 에이전트에게 설치된 스킬 중 하나를 사용하라고 명시적으로 말하세요.

예시:

"Use $mantine-form and build a profile form with validation and nested fields"
"Use $mantine-combobox and create a searchable multi-select with custom option rendering"
"Use $mantine-custom-components and scaffold a polymorphic component with Styles API support"

에이전트가 $skill-name 언급을 지원하지 않으면 스킬 이름을 일반 텍스트로 언급하고 그 스킬을 따르라고 요청하세요.

MCP 서버 (실험적)

Mantine은 MCP 서버 패키지도 제공해요:

@mantine/mcp-server

서버는 mantine.dev에 게시된 Mantine 정적 MCP 데이터를 읽고, AI 에이전트가 직접 호출할 수 있는 도구를 노출해요:

list_items
get_item_doc
get_item_props
search_docs

MCP 서버 구성. 대부분의 MCP 호환 도구는 JSON 구성으로 서버 추가를 지원해요. 이 서버 정의를 사용하세요:

{
  "mcpServers": {
    "mantine": {
      "command": "npx",
      "args": ["-y", "@mantine/mcp-server"]
    }
  }
}

다른 데이터 소스(예: 알파 문서나 로컬 정적 파일)를 사용하려면 환경 변수를 추가하세요:

{
  "mcpServers": {
    "mantine": {
      "command": "npx",
      "args": ["-y", "@mantine/mcp-server"],
      "env": {
        "MANTINE_MCP_DATA_URL": "https://mantine.dev/mcp"
      }
    }
  }
}

다른 도구에서 MCP 서버 사용.

Claude Desktop: Claude Desktop에서 MCP 설정을 열고 위의 mantine 서버 구성을 추가한 뒤 새 채팅을 시작해 "Find Button props and give me a usage example"처럼 Mantine 안내를 요청하세요.

Cursor: Cursor의 MCP/server 설정을 열고 같은 mantine 서버 구성을 추가한 뒤 에이전트 모드에서 Mantine 관련 질문을 하세요. Cursor가 MCP 도구를 자동으로 호출해요.

Windsurf: Windsurf의 MCP/server 설정을 열고 같은 구성으로 @mantine/mcp-server를 등록한 뒤 채팅에서 컴포넌트 문서, props, 예시를 직접 요청하세요.

기타 MCP 클라이언트(VS Code/Cline 등): 클라이언트가 커스텀 MCP 서버를 지원한다면 같은 command와 args를 추가하세요:

command: npx
args: ["-y", "@mantine/mcp-server"]

그 다음 이런 프롬프트를 사용하세요:

"List Mantine items related to input fields"
"Get full docs for Button"
"Search Mantine docs for color scheme and dark mode"

예시 프롬프트

AI 도구와 함께 사용할 수 있는 예시 프롬프트:

"Using Mantine v9, how do I create a dark mode toggle?"
"Show me how to use the AppShell component with a collapsible navbar"
"How can I customize the theme colors in MantineProvider?"
"Create a form with validation using Mantine's form hooks"
"How to align input with a button in a flex container?"

문서 생성 (Documentation Generation)

LLM 문서는 컴파일 스크립트로 소스 파일에서 자동 생성돼요. 다음을 포함해요:

MDX 파일의 컴포넌트 문서
Props 테이블과 타입
코드 예시와 데모
Styles API 문서
help.mantine.dev의 FAQ 콘텐츠

두 가지 생성 형식이 있어요:

llms.txt — /llms 경로 아래의 페이지별 .md 파일로 연결되는 기본 간결 인덱스
llms-full.txt — 모든 문서 콘텐츠를 담은 단일 대용량 파일

최신 문서를 보장하기 위해 릴리스마다 이 파일을 다시 생성해요. 파일은 AI 도구와의 더 나은 호환성을 위해 LLMs.txt 표준을 따르고 있어요.

기여 (Contributing)

LLM 문서에서 문제를 찾거나 개선 제안이 있다면 GitHub 저장소에 이슈를 열어주세요.

더 알아보기 (Learn more)

oxc-config-mantine — oxc 설정
Icons libraries — 아이콘 라이브러리