cleen-ui-feedback-and-errors

Display feedback, loading, and error states using @cleen/ui components.

Updated Mar 4, 2026
One-click install
npx skills add https://github.com/shawnlivermore/cleen-ui-skills --skill cleen-ui-feedback-and-errors
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: cleen-ui-feedback-and-errors
Source: https://github.com/shawnlivermore/cleen-ui-skills/tree/main/skills/cleen-ui-feedback-and-errors
Command: npx skills add https://github.com/shawnlivermore/cleen-ui-skills --skill cleen-ui-feedback-and-errors

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents developers from manually creating common UI elements for feedback, loading, and error states, ensuring consistency and leveraging the @cleen/ui library's built-in components.

Core Features & Use Cases

  • Loading Indicators: Use Loader for spinners and Skeletons for content placeholders.
  • Notifications: Display toasts for success, error, warning, or info messages using showNotification.
  • Error Handling: Manage inline field errors with infoLabels and standalone messages with InfoLabels.
  • Status Badges: Visually represent states with PillBadge.
  • Contextual Help: Provide hints with Tooltip.
  • Use Case: When fetching data for a list, use SkeletonWrapper to show SkeletonList while loading, and display a showNotification on error.

Quick Start

Use the cleen-ui-feedback-and-errors skill to display a success notification with the message 'Profile updated successfully'.

Frequently Asked Questions about cleen-ui-feedback-and-errors

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

FAQPage Schema
How do I show loading states and skeleton screens while fetching data?

To display loading states during data fetches, use the Loader component for spinners or Skeletons for content placeholders. The SkeletonWrapper specifically renders a SkeletonList to indicate progress while waiting for list data.

What is the best way to display toast notifications for success or error messages?

The best way to display toast notifications is by using the showNotification function. It handles success, error, warning, and info messages, ensuring consistent UI feedback without requiring manual implementation of notification components.

How do I handle inline form field errors and status badges in a UI?

Handle inline field errors using infoLabels, and use standalone InfoLabels for general error messages. To visually represent different system states, implement the PillBadge component for clear status indication.

Does the @cleen/ui framework include built-in components for tooltips and contextual help?

Yes, the @cleen/ui framework includes a built-in Tooltip component for contextual help. It provides hints directly within the UI, ensuring users receive necessary guidance without requiring custom tooltip implementations.

Why manually build UI feedback patterns when using a component library?

Manually building UI feedback patterns leads to inconsistencies across the application. Using pre-built components for loading, errors, and notifications ensures visual consistency and prevents manual implementation of common feedback logic.