Agent skill · software engineering · mantinedev
mantine-custom-components
Build custom components that integrate with Mantine's theming, Styles API, and core features. Use this skill when: (1) creating a new component using factory(), polymorphicFactory(), or genericFactory(), (2) adding Styles API support (classNames, styles, vars, unstyled), (3) implementing CSS variables via createVarsResolver, (4) building compound components with sub-components and shared context, (5) registering a component with MantineProvider via Component.extend(), or (6) any task involving Factory, useProps, useStyles, BoxProps, StylesApiProps, or ElementProps in @mantine/core.
Why this skill is useful
Provides specific patterns and integration techniques for building custom components with Mantine's theming and Styles API that the AI wouldn't reliably generate on its own.
What it needs
Requires @mantine/core installed locally. About 2k tokens when loaded. Last updated 2026-02-19. 58 stars on the source repository.
What this skill does
Mantine Custom Components Skill Component template Factory variant — which to use Scenario Factory function Type --- --- --- Standard component factory() Factory<{}> Supports component prop (polymorphic) polymorphicFactory() PolymorphicFactory<{}> — add defaultComponent and defaultRef Props change based on a generic (e.g. multiple) genericFactory() Factory<{ signature: ... }> Use polymorphicFactory sparingly — it adds TypeScript overhead and slows IDE autocomplete. Factory type fields Theme integration Users and the theme can override defaults via Component.extend(): References references/api.md — All imports: factory, useProps, useStyles, createVarsResolver, createSafeContext, StylesApiProps, CompoundStylesApiProps, BoxProps, ElementProps, theme helpers (getSize, getRadius, etc.) references/patterns.md — Full examples: compound components with context, polymorphic component, generic component, theme integration
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills mantinedev/mantine-custom-components