skills.rest
jiaiyan
jiaiyanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

n-message

Creates configurable toast notifications with the useMessage API in Tailwind CSS apps.

8|3|Updated Mar 13, 2026
Search Tags:#notification#provider#message#ui-feedback#toast#naive-ui#imperative-api
One-click install
npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-message
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: n-message
Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/components/n-message
Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-message

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Message components provide a ready-to-use mechanism for displaying toast notifications and contextual feedback within Naive UI applications, reducing manual UI coding and ensuring consistency.

Core Features & Use Cases

  • Multiple message types: info, success, warning, error, loading
  • Imperative API: Create messages programmatically with useMessage
  • Customization: duration, closable, placement, icons
  • Global provider pattern: consistent UX across the app
  • Use Case: show a quick success after form submission, indicate loading states, and surface validation feedback

Quick Start

Mount an n-message-provider at the app root and invoke useMessage() to create and show messages.

Frequently Asked Questions about n-message

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

FAQPage Schema
How do I show toast notifications in a Naive UI application?▼

To show toast notifications in Naive UI, mount an n-message-provider at the app root and invoke the useMessage imperative API to programmatically create and display messages.

What message types can I display for operation feedback using useMessage?▼

The useMessage API supports multiple feedback types including info, success, warning, error, and loading, allowing you to display configurable toast notifications for various user interactions.

Can I customize toast duration and placement in Naive UI?▼

Yes, you can customize toast notifications by configuring duration, closable options, placement, and icons, ensuring the feedback messages adapt to your specific application context.

Why do I need a global provider pattern for transient user alerts?▼

A global provider pattern ensures consistent UX for transient user alerts across pages and components, reducing manual UI coding by centralizing the message creation logic.

Does this message component support dynamic updates for loading indicators?▼

Yes, the imperative API supports dynamic updates, allowing you to programmatically modify existing messages, which is ideal for transitioning loading indicators into success or error states.

What is the best way to surface validation feedback without manual UI coding?▼

Using a provider-based imperative API to display transient messages is the best way to surface validation feedback, as it ensures consistent UX and eliminates repetitive manual UI coding.

Related Skills

Explore More Design & Creative Skills→
pimcorepimcore
13

pimcore-studio-ui-notifications-toasts

Centralize toast notifications using the useMessage hook in Pimcore Studio UI.

Official
Intermediate
openclawopenclaw
385.7k

notion

Manage Notion pages, databases, and blocks via the Notion API.

Official
Intermediate
gsmlg-appgsmlg-app
2

project-feedback

Implement user feedback UI elements in Flutter using the app_feedback package.

Official
Basic
corey-alixcorey-alix

Notification System Assistant

Implement non-blocking toast notifications with auto-dismissal for web applications.

Official
Intermediate