skills.rest
shawnlivermore
shawnlivermoreCOMMUNITY
Explore all skills by this author →
Website𝕏@shawnypantsGitHub

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
One-click install
npx skills add https://github.com/shawnlivermore/cleen-ui-skills --skill cleen-ui-data-display
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
bdambrosiobdambrosio
10

split

Split Notes into smaller Notes using delimiters or JSON structure.

Community
Basic
kunmathkunmath
1

clerk-webhooks

Handle Clerk webhook events with verifyWebhook(req) in Next.js routes.

Community
Advanced
anliang0306anliang0306
1

polymarket

Integrate Polymarket REST and WebSocket APIs with real-time RTDS subscriptions.

Community
Intermediate
lamm-mitlamm-mit
38

d3-viz

Create custom interactive SVG data visualizations with d3.js.

Community
Intermediate