Mantine React Component Development Skill

When to Use This Skill

Apply this skill when working on:

• Component Development: Creating or editing React components built on Mantine's factory pattern
• TypeScript Patterns: Implementing polymorphic components, type-safe props, and CSS variables
• Styles API: Configuring component styling through Mantine's Styles API system (selectors, vars, modifiers)
• Component Composition: Building compound components with static sub-components (e.g., Component.Target)
• Context Management: Implementing safe context patterns for component state sharing
• Accessibility: Ensuring ARIA compliance, keyboard navigation, and focus management
• Code Review: Maintaining consistency with established patterns and conventions
• Documentation: Writing component demos, MDX docs, and API references

Project Structure

Components are organized in a monorepo workspace structure: