메뉴
Build React UIs with Mantine components, theming, and hooks. Use when adding or using Mantine UI, @mantine/core, MantineProvider, Mantine forms, dates, or when the user mentions Mantine, mantine.dev, or Mantine components.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
This skill should be used when setting up, auditing, or enforcing internationalization/localization in UI codebases (React/TS, i18next or similar, JSON locales), including installing/configuring the i18n framework, replacing hard-coded strings, ensuring en-US/zh-CN coverage, mapping error codes to localized messages, and validating key parity, pluralization, and formatting.
Zustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.
SOC 직업 분류 기준
| name | mantine-ui |
| description | Build React UIs with Mantine components, theming, and hooks. Use when adding or using Mantine UI, @mantine/core, MantineProvider, Mantine forms, dates, or when the user mentions Mantine, mantine.dev, or Mantine components. |
React-only component library (120+ components, 70+ hooks). Use for forms, overlays, dates, charts, notifications, and theming. Docs: mantine.dev. Pre-built examples: ui.mantine.dev.
Install core packages
@mantine/core and @mantine/hooks@mantine/form, @mantine/dates, @mantine/notifications, etc. (see reference.md)PostCSS (required for Mantine styles)
postcss, postcss-preset-mantine, postcss-simple-vars (as devDependencies)postcss.config.cjs at project root:module.exports = {
plugins: {
'postcss-preset-mantine': {},
'postcss-simple-vars': {
variables: {
'mantine-breakpoint-xs': '36em',
'mantine-breakpoint-sm': '48em',
'mantine-breakpoint-md': '62em',
'mantine-breakpoint-lg': '75em',
'mantine-breakpoint-xl': '88em',
},
},
},
};
Import styles once (e.g. in _app.tsx, main.tsx, or root layout)
import '@mantine/core/styles.css';
// Add per-package only if used: '@mantine/dates/styles.css', etc.
Wrap app with MantineProvider
import { createTheme, MantineProvider } from '@mantine/core';
const theme = createTheme({ /* optional overrides */ });
export default function App() {
return (
<MantineProvider theme={theme}>
{/* app */}
</MantineProvider>
);
}
SSR (Next.js app router, etc.) – avoid hydration flash: add ColorSchemeScript in <head> and spread mantineHtmlProps on <html>:
import { ColorSchemeScript, mantineHtmlProps } from '@mantine/core';
<html lang="en" {...mantineHtmlProps}>
<head>
<ColorSchemeScript />
{/* ... */}
</head>
<body>...</body>
</html>
createTheme, component props). Use Styles API for targeting internal parts; use responsive styles for breakpoints.component, renderRoot) – see Polymorphic components.@mantine/form with Mantine inputs for validation and state; see Form documentation.@mantine/dates/styles.css).