What kind of UI components are included?

It provides patterns for Stat Cards with trend indicators, flexible Data Tables, Widget Registries for dynamic layouts, and Skeleton screens for loading states.

Can I use this for mobile-responsive dashboards?

Absolutely. The skill includes responsive grid patterns that automatically adapt from single-column mobile views to complex multi-column desktop layouts.

What technologies does this skill support?

It primarily focuses on React applications using TanStack Table, TanStack Query, and Tailwind CSS or standard CSS Grid for layout management.

Does it handle real-time updates?

Yes, it provides specific patterns for Server-Sent Events (SSE) integration with TanStack Query to keep dashboard metrics updated automatically without page refreshes.

Dashboard UI Patterns

Name: Dashboard UI Patterns
Author: yonatangross

byyonatangross

•

Analíticas y Monitorización

Implements production-ready React dashboard architectures featuring responsive layouts, real-time data widgets, and advanced TanStack tables.

This skill provides a comprehensive toolkit for building high-performance admin panels and analytics dashboards using React. It leverages modern best practices like CSS Grid for responsive layouts, TanStack Table for complex data grids, and Server-Sent Events (SSE) combined with TanStack Query for real-time data synchronization. By offering patterns for widget registries, stat cards, and skeleton loading states, it ensures developers can build professional, scalable, and UX-optimized data interfaces while avoiding common performance pitfalls like duplicated queries and layout shift.

Características Principales

01Pre-built skeleton loading states for optimized perceived performance

0269 GitHub stars

03Responsive CSS Grid dashboard layouts and sidebar navigation

04Real-time data synchronization using SSE and TanStack Query

05Advanced data tables with sorting, filtering, and pagination

06Composable widget registry for dynamic dashboard building

Casos de Uso

01Creating complex data-driven interfaces with interactive tables and charts

02Building enterprise admin panels and SaaS analytics dashboards

03Implementing real-time monitoring systems for infrastructure or IoT data

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yonatangross/orchestkit dashboard-patterns

For use in Claude.ai and ChatGPT

Download Skill