Does it include automated testing in its output?

Yes, for every feature, it generates a render smoke test using Vitest and React Testing Library to ensure component stability.

Does this skill support other frameworks like Vue or Angular?

No, this specific skill is highly optimized for the React ecosystem, specifically focusing on Next.js, TypeScript, and Tailwind CSS.

Can it help with web accessibility compliance?

Absolutely. The skill follows a 'MUST DO' constraint for adding ARIA labels, roles, and semantic attributes to ensure elements are accessible to screen readers.

How does it decide between Server and Client Components?

It defaults to Server Components for better performance and SEO, applying the 'use client' directive only when a component requires interactive state, browser APIs, or event listeners.

Frontend Development & UI Engineering

Name: Frontend Development & UI Engineering
Author: newkayak12

bynewkayak12

0•

디자인 도구

Builds and optimizes production-grade React interfaces using Next.js App Router, TypeScript, and Tailwind CSS.

This skill acts as a senior frontend engineer to help you architect, build, and debug complex web applications. It specializes in the modern React ecosystem, specifically leveraging the Next.js App Router for optimal performance. The skill excels at making architectural decisions—such as splitting Server and Client Components—while enforcing strict TypeScript typing, mobile-first Tailwind styling, and high accessibility standards (ARIA). From implementing complex state management with TanStack Query to building type-safe forms with Zod, it ensures your frontend code is modular, testable, and ready for production.

주요 기능

010 GitHub stars

02State management via TanStack Query, Zustand, and React Hooks

03Strict TypeScript implementation with explicit prop interfaces

04Next.js App Router architecture and Server/Client Component optimization

05Responsive, mobile-first UI development using Tailwind CSS

06Accessibility-first development including ARIA patterns and semantic HTML

사용 사례

01Implementing complex multi-step forms with schema-based validation and error handling

02Refactoring legacy components into modern, type-safe Next.js modules with Vitest coverage

03Building data-heavy dashboards with real-time state management and responsive layouts

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add newkayak12/claude-skills frontend-developer

For use in Claude.ai and ChatGPT

주요 기능

010 GitHub stars

02State management via TanStack Query, Zustand, and React Hooks

03Strict TypeScript implementation with explicit prop interfaces

04Next.js App Router architecture and Server/Client Component optimization

05Responsive, mobile-first UI development using Tailwind CSS

06Accessibility-first development including ARIA patterns and semantic HTML

사용 사례

01Implementing complex multi-step forms with schema-based validation and error handling

02Refactoring legacy components into modern, type-safe Next.js modules with Vitest coverage

03Building data-heavy dashboards with real-time state management and responsive layouts

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add newkayak12/claude-skills frontend-developer

For use in Claude.ai and ChatGPT