skills.rest
tankpkg
tankpkgOFFICIAL
Explore all skills by this author →
GitHub

@tank/shadcn-mastery

Build and customize shadcn/ui design systems with semantic CSS variables and Radix composition.

1|1|Updated Feb 20, 2026
Search Tags:#forms#registry#tailwind#shadcn#radix#ui design system#data tables
One-click install
npx skills add https://github.com/tankpkg/packages --skill tank-shadcn-mastery
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: @tank/shadcn-mastery
Source: https://github.com/tankpkg/packages/tree/main/skills/shadcn-mastery
Command: npx skills add https://github.com/tankpkg/packages --skill tank-shadcn-mastery

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps teams build, customize, and scale production-ready shadcn/ui design systems without treating components as a black box dependency.

Core Features & Use Cases

  • CLI and project setup: Configure components.json, aliases, monorepos, and Tailwind v3 or v4 workflows.
  • Theming and dark mode: Manage semantic CSS variables, base color palettes, custom tokens, and responsive theme switching.
  • Component customization: Extend components with cva variants, compound patterns, asChild composition, and Radix primitives.
  • Data tables and forms: Implement TanStack Table workflows, sorting, filtering, pagination, row selection, react-hook-form, zod validation, and dynamic field arrays.
  • Composition and registry systems: Build command palettes, comboboxes, sheets, dialogs, toasts, and custom registries for distribution.
  • Use case: Ideal for engineers designing a consistent app-wide UI kit, migrating existing shadcn components, or shipping an internal registry across a monorepo.

Quick Start

Ask for a shadcn/ui implementation plan for your app that covers setup, theming, component customization, and any needed table, form, or registry patterns.

Frequently Asked Questions about @tank/shadcn-mastery

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

FAQPage Schema
How do I set up a shadcn/ui design system in a monorepo with Tailwind CSS v4?▼

Setting up a shadcn/ui design system in a monorepo involves configuring components.json, defining aliases, and aligning Tailwind CSS v3 or v4 workflows for your project structure.

How do I build data tables with sorting and filtering using TanStack Table and shadcn/ui?▼

Building data tables with shadcn/ui involves using TanStack Table workflows to implement sorting, filtering, pagination, and row selection within your custom component architecture.

What is the best way to customize shadcn/ui components with cva variants and Radix primitives?▼

Customizing shadcn/ui components is best done by extending them with cva variant patterns, utilizing asChild composition, and layering Radix primitives for accessible, reusable UI elements.

How do I manage dark mode and theming with semantic CSS variables in shadcn/ui?▼

Managing dark mode and theming in shadcn/ui requires defining semantic CSS variables, setting base color palettes, and applying custom tokens for responsive theme switching across your application.

How do I create a custom registry to distribute shadcn/ui components across projects?▼

Creating a custom registry lets you package and distribute extended shadcn/ui components, command palettes, and dialogs across single-repo or monorepo projects as a shared design system.

Can I use react-hook-form and zod validation with shadcn/ui forms?▼

Yes, shadcn/ui forms support react-hook-form integration, zod schema validation, and dynamic field arrays to handle complex data submission and validation workflows in production applications.

Related Skills

Explore More Software Engineering Skills→
jubalmjubalm
1

shadcn-init

Initialize shadcn/ui in React projects with Tailwind CSS v4 configuration.

Community
Advanced
remimoulremimoul

tailwindcss-advanced-design-systems

Define design tokens with Tailwind CSS @theme directives for multi-theme systems.

Community
Advanced
RepairYourTechRepairYourTech
6

shadcn-ui

Integrate, customize, and theme shadcn/ui components in React applications.

Community
Intermediate
exactlyexactly
24

composition-patterns

Implement scalable React UI with compound components and shared context.

Official
Intermediate