Menü
A collection of guides, best practices, and resources for using Mantine UI in your projects.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
Bondery product changelog format, change categories, commit prefixes, calendar versioning, and release-note workflow. Use when editing docs/changelog/unreleased.mdx, documenting a user-visible or operationally notable change, preparing a release, choosing a conventional commit prefix, recording dependency updates, or drafting release communications.
Bondery release operator runbook — prerequisites on main, extension gates, promote main:release and product tags, Dokploy image pins, rollback, and hotfix sequencing. Use when cutting a monthly or patch release, pushing to release, tagging api-X.Y.Z / webapp-X.Y.Z / ext-X.Y.Z, pinning image tags, promoting to production, or rolling back.
Risk-proportional verification for Bondery monorepo changes. Maps changed files to npm workspaces and shared-package consumers, runs the fastest relevant lint, type, policy, test, contract, build, and runtime checks, then reviews staged and unstaged diffs without requiring commits. Use after implementing or refactoring, before handoff or a PR, when asked to verify/test/check changes, or when deciding which Bondery quality gates apply.
Bondery legal disclosure hygiene — subprocessor registry, policy-claims reconciliation, data-flow triggers, and escalation boundaries. Use when adding third-party vendors/SDKs, new data collection, analytics, AI tools, retention/deletion, or editing Privacy/Terms.
Bondery security patterns — tenant isolation, auth areas, sessions, secrets, input validation, uploads, webhooks, client trust boundaries, and deployment hardening. Use when adding authentication, authorization, API routes, secrets, uploads, webhooks, payments, sensitive data, extension bridges, or reviewing security-sensitive changes.
Bondery Fastify API contracts — transport wrappers, list pagination (offset/search/sort), resource-keyed responses, mutations, Stripe-style errors, route registration order, mobile sync, rate limits, and versioning. Use when adding or changing API routes, client API calls, OpenAPI, sync protocol, or API error codes.
| name | mantine-skills |
| description | A collection of guides, best practices, and resources for using Mantine UI in your projects. |
| metadata | {"version":"0.0.1"} |
To reference the latest Mantine UI documentation, best practices, and guides, visit the official Mantine documentation at https://mantine.dev/llms.txt.
The Avatar component in Mantine UI is designed to display user profile pictures or initials. When using the Avatar component, it is important to utilize the name prop to generate fallback initials. Avoid nesting child elements inside the Avatar, as this can lead to unexpected behavior and styling issues. Instead, rely on the name prop to ensure that the Avatar displays correctly even when an image is not provided.
When using the Anchor, Button with a Link, or Next.js Link components, import the helper components from packages/mantine-next. These provide wrappers around the standard Mantine components that are optimized for Next.js applications. Using these helper components ensures better performance and compatibility with Next.js features such as server-side rendering and client-side navigation.
Import the common ModalTitle from packages/mantine-next to ensure consistent styling and behavior across your application. The ModalTitle component provides a standardized way to display titles within modals, enhancing the user experience and maintaining a cohesive design throughout your application.
Following best practices should be used:
When implementing notifications in your application, utilize the successNotificationTemplate, errorNotificationTemplate, loadingNotificationsTemplate, warningNotificationTemplate from packages/mantine-next. These templates provide pre-configured styles and structures for success and error notifications, ensuring a consistent look and feel across your application. By using these templates, you can save time on styling and focus on delivering clear and effective notifications to your users.
When creating a dropdown menu, use following rules:
Mantine UI compoennts support Next.js server components. However, they need to be referenced as named exports. For example the List.Item must be imported as ListItem to be used in a server component.
When using text or other inputs with an async searching or loading state, use the loading prop.
