Can I customize the installed components?

Yes, since shadcn/ui uses an 'open code' approach, this skill helps you modify the source code of components directly in your project using Tailwind CSS.

Can I use this skill to build complex forms?

Yes, the skill includes patterns for integrating the shadcn/ui Form component with React Hook Form and Zod for robust, accessible validation.

Does this skill support dark mode configuration?

Absolutely. It offers specific instructions for setting up dark mode using next-themes or CSS variables depending on your chosen framework.

How does it handle component accessibility?

The skill leverages Radix UI primitives to ensure all components follow ARIA standards, keyboard navigation best practices, and screen reader compatibility.

How does this skill help with shadcn/ui installation?

It provides precise CLI commands and configuration guidance for initializing shadcn/ui across various frameworks including Next.js, Vite, Remix, and Laravel.

Shadcn UI Assistant

Name: Shadcn UI Assistant
Author: johannesbremer

byjohannesbremer

0•

デザインツール

Streamlines the implementation and customization of accessible, high-quality React components using Tailwind CSS and Radix UI primitives.

This skill provides expert guidance for integrating shadcn/ui into modern web projects, offering comprehensive support for CLI operations, component styling, and complex UI patterns. It simplifies the process of building accessible forms, data tables, and interactive overlays while maintaining the 'open code' philosophy where you own the source. Whether you are setting up dark mode in Next.js or customizing design tokens via components.json, this skill ensures best practices for performance and accessibility across frameworks like Vite, Remix, and Astro.

主な機能

01CLI command automation for component installation and initialization

02Accessible form implementation using React Hook Form and Zod

030 GitHub stars

04Advanced data table construction with sorting and pagination

05Comprehensive dark mode and theme configuration support

06Tailwind CSS customization and design token management

ユースケース

01Building complex, accessible web forms with integrated validation logic

02Customizing shadcn/ui primitives to match specific brand identities and design requirements

03Rapidly prototyping professional-grade user interfaces with consistent design systems

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add johannesbremer/praxisplaner shadcn-ui

For use in Claude.ai and ChatGPT

Download Skill