cleen-ui-data-display

Render data with @cleen/ui DataGrids, Kanban boards, charts, and loading skeletons.

Updated Mar 4, 2026

Search Tags:#charts #ui components #kanban #loading states #tables #data display

Ready to run

npx skills add https://github.com/shawnlivermore/cleen-ui-skills --skill cleen-ui-data-display

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: cleen-ui-data-display
Source: https://github.com/shawnlivermore/cleen-ui-skills/tree/main/skills/cleen-ui-data-display
Command: npx skills add https://github.com/shawnlivermore/cleen-ui-skills --skill cleen-ui-data-display

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill prevents the inefficient and error-prone practice of manually creating UI components for displaying data (like tables, grids, charts, or loading states) when the @cleen/ui library already provides robust, purpose-built solutions.

Core Features & Use Cases

Tabular Data: Use DataGrid and DataGridWithFilters for dynamic, sortable, searchable tables.
Visualizations: Implement charts (Chart, SimpleChart), progress indicators (ProgressBar, ProgressCircle), and status badges (PillBadge).
Loading States: Employ Loader and various Skeleton components to provide a smooth user experience during data fetching.
Kanban Boards: Utilize KanbanBoard and KanbanList for agile project management views.
General Containers: Use Card for organizing distinct data sections or widgets.

Quick Start

Use the cleen-ui-data-display skill to render a list of users in a sortable and searchable table.

Frequently Asked Questions about cleen-ui-data-display

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

FAQPage Schema

How do I render sortable and searchable data tables in my UI?▼

To render sortable and searchable data tables, use DataGrid and DataGridWithFilters components. These interactive tables provide dynamic data display capabilities for efficient UI development without manual component creation.

What is the best way to display loading states during data fetching?▼

The best way to display loading states during data fetching is using Loader and Skeleton components. These provide smooth user feedback during data retrieval, replacing the need for manually crafted loading indicators.

Can I use kanban boards for agile project management views?▼

Yes, you can use KanbanBoard and KanbanList components to implement kanban boards for agile project management views. These provide standardized visual organization for project task tracking.

How do I create charts and progress indicators for visual data representation?▼

To create charts and progress indicators for visual data representation, implement Chart, SimpleChart, ProgressBar, and ProgressCircle components. These handle visual data mapping without manual charting logic.

Do I need to manually build UI components for displaying data?▼

No, you do not need to manually build UI components for displaying data. Purpose-built solutions like Card, PillBadge, and various data display components prevent inefficient and error-prone manual UI creation.