status-message-components
CommunityCommunicate app status clearly with toasts & loaders.
Design & Creative#UI components#loading states#empty states#toast notifications#status messages#Vue 3#user feedback
Authoralongor666
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill provides Vue 3 components for displaying various application states: loading, error, success, and empty states. It ensures clear and consistent user feedback, improving the overall user experience by informing them about ongoing processes or issues.
Core Features & Use Cases
- Toast Notifications: Implements transient messages (success, error, warning) via a Pinia store for global display.
- Loading States: Offers inline and fullscreen loading spinners with customizable text, indicating ongoing operations.
- Empty States: Provides configurable placeholders for "no results," "no data," or "error" scenarios, guiding users on next steps.
- Status Badges: Creates inline visual indicators for various statuses (success, warning, error, info).
- Use Case: After a user submits a form, this skill can display a "Success" toast notification that automatically dismisses, or a "Loading" spinner while data is being processed, ensuring immediate and clear feedback.
Quick Start
Display a success toast notification with the message "Data saved successfully" after a user action.
Dependency Matrix
Required Modules
pinia
Components
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: status-message-components Download link: https://github.com/alongor666/daylyreport/archive/main.zip#status-message-components Please download this .zip file, extract it, and install it in the .claude/skills/ directory.