Mantine Dev
Mantine Dev assists developers by generating Mantine UI code snippets and components, speeding up development workflows and boosting productivity.
Install on your platform
We auto-selected Claude Code based on this skill’s supported platforms.
Run in terminal (recommended)
claude mcp add mantine-dev npx -- -y @trustedskills/mantine-dev
Or manually add to ~/.claude/settings.json
{
"mcpServers": {
"mantine-dev": {
"command": "npx",
"args": [
"-y",
"@trustedskills/mantine-dev"
]
}
}
}Requires Claude Code (claude CLI). Run claude --version to verify your install.
About This Skill
What it does
This skill assists developers using the Mantine UI library for React projects. It provides guidance and code snippets to streamline development workflows, including setting up a Vite + TypeScript project with CSS modules, PostCSS preset, and Vitest testing. The skill helps ensure proper configuration and usage of Mantine components, promoting productivity and adherence to best practices.
When to use it
- When starting a new React project using the Mantine UI library.
- When encountering styling or configuration issues with Mantine components.
- To quickly generate code snippets for common Mantine patterns.
- For guidance on migrating from older versions of Mantine (specifically 8.x to 9.x).
- When needing assistance with setting up PostCSS and configuring theme variables.
Key capabilities
- Provides Vite + TypeScript project setup instructions.
- Guides users through CSS module configuration using PostCSS preset.
- Offers advice on Vitest testing for Mantine components.
- Explains the importance of
MantineProviderand its role in providing a theme context. - Details how to customize themes via the
createThemefunction.
Example prompts
- "How do I set up a new Mantine project with Vite?"
- "What's the correct way to configure PostCSS for Mantine?"
- "Show me an example of customizing the theme in Mantine."
- “Explain how to use CSS variables in Mantine components.”
Tips & gotchas
- MantineProvider is essential: All Mantine components require being wrapped within a
MantineProvider. Failing to do so will prevent styling. - CSS Import Required: Remember to import
@mantine/core/styles.cssto ensure proper component styling. - Avoid Mixing Libraries: Do not attempt to combine Mantine with other UI libraries like Chakra or MUI within the same project.
Tags
TrustedSkills Verification
Unlike other registries that point to live repositories, TrustedSkills pins every skill to a verified commit hash. This protects you from malicious updates — what you install today is exactly what was reviewed and verified.
Security Audits
| Gen Agent Trust Hub | Pass |
| Socket | Pass |
| Snyk | Pass |
🌐 Community
Passed automated security scans.