Can I use this with React Hook Form?

While shadcn/ui works with React Hook Form, this skill specifically provides patterns and best practices for integrating with TanStack Form.

Does this skill support Tailwind CSS v4?

Yes, it includes specific configuration guidance for Tailwind CSS v4, including the required empty config field for shadcn.json.

How does it improve form accessibility?

The skill utilizes a Field component pattern that manages ARIA attributes, labels, and error states automatically to ensure WCAG compliance.

Is it compatible with the Next.js App Router?

Yes, it is specifically designed for the App Router, emphasizing Server Components by default and providing Client Component patterns where necessary.

Next.js Shadcn UI Expert

Name: Next.js Shadcn UI Expert
Author: fusengine

byfusengine

0•

设计工具

Streamlines the implementation of accessible, high-performance UI components using shadcn/ui and TanStack Form within Next.js App Router environments.

This skill provides specialized guidance for building modern Next.js applications using the shadcn/ui ecosystem. It focuses on best practices for the App Router, including seamless integration with TanStack Form, Tailwind CSS v4 configuration, and a standardized Field component pattern for robust form management. Whether you're building server-rendered UI or interactive client components, this skill ensures your components are accessible, type-safe, and follow modern architectural patterns like the specialized Field component structure.

主要功能

01Modern toast notification management using the Sonner library

02Native TanStack Form & Zod integration for type-safe form management

03Standardized Field component patterns for consistent, accessible form layouts

04Tailwind CSS v4 configuration patterns optimized for shadcn/ui

05Optimized implementation for Next.js Server and Client Components

060 GitHub stars

使用场景

01Setting up a standardized UI component library in a Next.js App Router project

02Implementing modern feedback systems using Sonner toasts and shadcn feedback components

03Rapidly scaffolding complex accessible forms with integrated validation

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add fusengine/agents nextjs-shadcn

For use in Claude.ai and ChatGPT

Download Skill