Does it include testing best practices?

Yes, it provides structured workflows for unit testing with Vitest, integration testing with React Testing Library, and E2E testing with Playwright.

Does this skill support the latest React features?

Yes, it implements React 19 patterns including the React Compiler, modern hooks, and optimized Server/Client component boundaries.

How does it handle CSS and styling?

It utilizes Tailwind CSS v4 combined with cn() and cva() for scalable, maintainable, and type-safe component variants.

Is it compatible with the Next.js App Router?

Absolutely; it is purpose-built for App Router conventions including layouts, server actions, and streaming with Suspense.

Next.js UI Development Specialist

Name: Next.js UI Development Specialist
Author: sellernote

bysellernote

•

设计工具

Builds and maintains production-ready Next.js interfaces using feature-based architecture and Tailwind CSS v4.

The Next.js UI Dev skill streamlines the creation of high-quality frontend components by enforcing strict architectural patterns and modern web standards. It automates the implementation of React 19 patterns, Tailwind CSS v4 styling with CVA, and robust form handling using React Hook Form and Zod. Designed to follow a structured feature-based architecture, this skill ensures a consistent dependency flow from pages to UI components while maintaining high test coverage through Vitest and Playwright workflows.

主要功能

01Tailwind CSS v4 styling implementation using cn() and cva()

021 GitHub stars

03Strict feature-based architecture with domain-specific co-location

04Type-safe form management with React Hook Form and Zod integration

05React 19 pattern optimization including Server and Client Components

06Automated test generation for Vitest, RTL, and Playwright

使用场景

01Refactoring existing components into a scalable, type-safe architecture

02Scaffolding new feature modules with co-located API hooks and UI components

03Implementing complex multi-step forms with dual client and server-side validation

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add sellernote/sellernote-vibecode-plugin nextjs-ui-dev

For use in Claude.ai and ChatGPT

主要功能

01Tailwind CSS v4 styling implementation using cn() and cva()

021 GitHub stars

03Strict feature-based architecture with domain-specific co-location

04Type-safe form management with React Hook Form and Zod integration

05React 19 pattern optimization including Server and Client Components

06Automated test generation for Vitest, RTL, and Playwright

使用场景

01Refactoring existing components into a scalable, type-safe architecture

02Scaffolding new feature modules with co-located API hooks and UI components

03Implementing complex multi-step forms with dual client and server-side validation

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add sellernote/sellernote-vibecode-plugin nextjs-ui-dev

For use in Claude.ai and ChatGPT