skills.rest
alexturpin
alexturpinCOMMUNITY
Explore all skills by this author →
GitHub

mantine

Guide Mantine UI component usage, styling, and navigation patterns.

Updated Nov 19, 2025
Search Tags:#ui#react#components#styling#navigation#mantine
One-click install
npx skills add https://github.com/alexturpin/cf-app-starter --skill mantine
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mantine
Source: https://github.com/alexturpin/cf-app-starter/tree/main/.opencode/skills/mantine
Command: npx skills add https://github.com/alexturpin/cf-app-starter --skill mantine

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides guidance and examples for using the Mantine UI library and its associated components for building user interfaces and navigation within the application.

Core Features & Use Cases

  • UI Components: Leverage Mantine for consistent styling and pre-built UI elements.
  • Iconography: Utilize icons from @tabler/icons-react.
  • Navigation: Implement internal links and nested navigation using provided components like AppLink, AppButtonLink, and AppNavLink.
  • Loading States: Manage visual feedback during data loading with <Skeleton>.
  • Modals: Replace native window.confirm with Mantine's modal manager for interactive confirmations.

Quick Start

Use the mantine skill to create a navigation link to the dashboard page with a home icon.

Frequently Asked Questions about mantine

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build React UI components using Mantine?▼

Build React UI components using Mantine by leveraging its pre-built elements for consistent styling. This skill provides guidance on component usage, interactive interfaces, and navigation patterns for frontend development.

How do I implement navigation links with Mantine and TanStack Router?▼

Implement navigation links with Mantine and TanStack Router using provided components like AppLink, AppButtonLink, and AppNavLink. These components support internal links and nested navigation within your application.

What is the best way to handle loading states in a Mantine React app?▼

Handle loading states in a Mantine React app using the Skeleton component. This provides visual feedback during data loading to improve user experience while content is being fetched.

Can I use Tabler icons with Mantine UI components?▼

Yes, you can use Tabler icons with Mantine UI components. This skill supports integrating icons from the @tabler/icons-react package to enhance your application's iconography alongside Mantine elements.

How do I replace window.confirm with a Mantine modal?▼

Replace the native window.confirm with Mantine's modal manager for interactive confirmations. This approach provides consistent, styled confirmation dialogs that match your application's UI.

Related Skills

Explore More Software Engineering Skills→
JNZader-VaultJNZader-Vault

mantine-ui

Build React interfaces with Mantine components, forms, charts, and notifications.

Official
Intermediate
xztxyxztxy

redux

Connect a Redux store as the StateStore backend for json-render.

Community
Intermediate
leejayhsuleejayhsu

TanStack Router

Implement type-safe, file-based React routing with TanStack Router.

Community
Advanced
mgd34msumgd34msu
4

chakra-ui

Provides reusable, themeable, accessible React UI components for Chakra UI v3 projects.

Community
Intermediate