What UI library does this skill use?

The skill is optimized for the @kit/ui library, which is the foundational design system for MakerKit based on Radix UI and Tailwind CSS.

How are data tables handled?

It provides specific instructions for the @kit/ui table component to prevent common styling issues like double borders and includes patterns for URL-synced search and filtering.

Does it include form validation?

Yes, it provides standardized patterns for type-safe forms using React Hook Form and Zod validation integrated with @kit/ui form components.

How does this skill handle dark mode?

It enforces the use of semantic color tokens that automatically switch themes, while providing specific patterns for status-based indicators that require explicit dark mode variants.

Does it support React Server Components?

Yes, it defaults to server components for data fetching and database access, only utilizing 'use client' directives for interactive elements and browser APIs.

Ballee UI & MakerKit Orchestrator

Name: Ballee UI & MakerKit Orchestrator
Author: JaveedIshaq

byJaveedIshaq

•

デザインツール

Standardizes frontend development using MakerKit UI patterns, React Server Components, and accessible dark mode designs.

概要

This skill provides a comprehensive blueprint for building high-quality interfaces within the Ballee ecosystem using MakerKit components. It guides Claude through the implementation of complex UI elements like data tables with built-in borders, type-safe forms, and server-side logic, ensuring consistency across admin CRUD pages and dashboards. By providing specific rules for semantic coloring and dark mode support, it helps developers maintain a professional, accessible design system while optimizing for React Server Components (RSC) performance.

主な機能

Type-safe form scaffolding with Zod and React Hook Form
Automated dark mode support via semantic Tailwind classes
1 GitHub stars
Optimized React Server Component (RSC) vs. Client patterns
Standardized MakerKit @kit/ui component integration
Pre-configured Admin CRUD and DataTable templates

ユースケース

Architecting performant Next.js pages by correctly delegating server and client logic.
Building complex admin dashboards with advanced data tables and URL-based filtering.
Creating accessible, dark-mode-ready forms with built-in validation and feedback.

概要

主な機能

Type-safe form scaffolding with Zod and React Hook Form
Automated dark mode support via semantic Tailwind classes
1 GitHub stars
Optimized React Server Component (RSC) vs. Client patterns
Standardized MakerKit @kit/ui component integration
Pre-configured Admin CRUD and DataTable templates

ユースケース

Architecting performant Next.js pages by correctly delegating server and client logic.
Building complex admin dashboards with advanced data tables and URL-based filtering.
Creating accessible, dark-mode-ready forms with built-in validation and feedback.