メニュー
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 ページを確認してインストールできます。
SOC 職業分類に基づく
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.
| 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).