skills.rest
chmonitor
chmonitorOFFICIAL
Explore all skills by this author →
WebsiteGitHub

product-design

Enforce OKLCH design tokens and shadcn/ui patterns for chmonitor dashboard UI.

255|42|Updated Nov 16, 2023
Search Tags:#dashboard#tailwind#ui-ux#design-system#shadcn#clickhouse#component-conventions
One-click install
npx skills add https://github.com/chmonitor/chmonitor --skill product-design-chmonitor
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: product-design
Source: https://github.com/chmonitor/chmonitor/tree/main/.claude/skills/product-design
Command: npx skills add https://github.com/chmonitor/chmonitor --skill product-design-chmonitor

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates inconsistent design and behavior when building or reviewing new chmonitor dashboard features, ensuring all UI matches the project's established visual and interaction standards.

Core Features & Use Cases

  • Design Token & Theme Rules: Enforces OKLCH theme usage, automatic dark mode support via semantic Tailwind classes, and correct brand accent (orange for metrics, emerald for health) application.
  • Component Pattern Standards: Defines canonical wiring for charts, data tables, empty/error/loading states, interactive cards, and routing conventions to match existing dashboard behavior.
  • Use Case: When adding a new cluster memory usage chart to the chmonitor dashboard, use this Skill to apply the correct ChartCard wrapper, token colors, and stale data indicator that align with all other monitoring pages.

Quick Start

Use the product-design skill to build a new dashboard page for ClickHouse table replication metrics that follows the project's existing UI conventions.

Frequently Asked Questions about product-design

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

FAQPage Schema
How do I ensure consistent UI/UX when building new ClickHouse monitoring dashboard pages?▼

To ensure consistent dashboard UI/UX, apply established design tokens and component wiring patterns. This enforces OKLCH theme usage, Tailwind v4 semantic classes, and shadcn/ui primitive rules across all new monitoring pages, charts, and data tables.

What is the best way to implement dark mode and brand colors for chmonitor dashboard charts?▼

The best way to implement dark mode and brand colors is using OKLCH design tokens with semantic Tailwind classes. This automatically handles dark mode support and correctly applies brand accents like orange for metrics and emerald for health status.

How do I add a new cluster metrics chart that matches existing dashboard component conventions?▼

To add a new metrics chart, use the canonical ChartCard wrapper and apply token colors. This ensures the new chart aligns with existing chmonitor component conventions, including stale data indicators and established interactive patterns.

Can I use shadcn/ui primitives with Tailwind v4 for my ClickHouse dashboard error and loading states?▼

Yes, you can use shadcn/ui primitives with Tailwind v4 for dashboard states. This combination is supported by applying project-specific component pattern standards to correctly wire empty, error, and loading states across all features.

Why does my new dashboard page look inconsistent with the existing chmonitor UI during code review?▼

A new dashboard page looks inconsistent if it skips established design system standards. Enforcing adherence to OKLCH design tokens, semantic Tailwind classes, and shadcn/ui primitive rules during development resolves visual and behavioral mismatches.

Related Skills

Explore More Design & Creative Skills→
justinlevinedotmejustinlevinedotme
7

vite-shadcn-tailwind4

Initialize shadcn/ui with Tailwind v4 in Vite projects.

Community
Advanced
bbvch-aibbvch-ai
9

design-system

Provide Vue.js, Tailwind CSS, and PrimeVue design tokens and component patterns.

Official
Intermediate
duyetduyet

clickhouse-monitoring

Monitor ClickHouse clusters through the ClickHouse Monitor dashboard.

Community
Advanced
s0lci700s0lci700
1

svelte-native

Convert bits-ui or shadcn-svelte components into native Svelte 5 with CSS and design tokens.

Community
Advanced