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

•

Design Tools

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.

Key Features

01Type-safe form scaffolding with Zod and React Hook Form

02Automated dark mode support via semantic Tailwind classes

031 GitHub stars

04Optimized React Server Component (RSC) vs. Client patterns

05Standardized MakerKit @kit/ui component integration

06Pre-configured Admin CRUD and DataTable templates

Use Cases

01Architecting performant Next.js pages by correctly delegating server and client logic.

02Building complex admin dashboards with advanced data tables and URL-based filtering.

03Creating accessible, dark-mode-ready forms with built-in validation and feedback.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add javeedishaq/ai-workflow-orchestrator ballee

For use in Claude.ai and ChatGPT

Download Skill