Does it support Next.js App Router features?

Yes, it provides clear templates and decision-making logic for distinguishing between Server Components and Client Components to ensure optimal performance.

How does it handle accessibility (A11y)?

It includes standardized patterns for ARIA attributes, manual focus management for dialogs, screen-reader-only content, and keyboard navigation triggers.

What UI frameworks does this skill support?

The skill is framework-agnostic but provides specific implementation patterns for React, Next.js, and popular libraries like Tailwind CSS, Radix UI, and shadcn/ui.

Can I use this for mobile development?

While primarily focused on web UI patterns, the core architectural principles, TypeScript interfaces, and responsive hooks are highly applicable to mobile-first web design and React Native.

Frontend UI Patterns

Name: Frontend UI Patterns
Author: JaveedIshaq

byJaveedIshaq

•

デザインツール

Implements accessible component architectures and modern UI patterns using best practices for React and design systems.

概要

This skill provides a comprehensive framework for building high-quality frontend interfaces by standardizing component organization via Atomic Design, managing the distinction between Server and Client components, and enforcing strict WCAG accessibility compliance. It streamlines the development of responsive and performant user interfaces by providing Claude with ready-to-use templates for complex UI elements like focus-managed dialogs, accessible forms with Zod validation, and robust error boundaries.

主な機能

Optimized React Server vs. Client component implementation
Performance-oriented loading states and skeleton loaders
1 GitHub stars
Responsive design hooks and Tailwind CSS layout patterns
Atomic Design component organization and directory structures
Comprehensive accessibility (A11y) and ARIA pattern integration

ユースケース

Building a production-ready component library using shadcn or Radix UI
Implementing complex form validation and state management with Zod and Hook Form
Refactoring existing React code to meet modern WCAG accessibility standards

概要

主な機能

Optimized React Server vs. Client component implementation
Performance-oriented loading states and skeleton loaders
1 GitHub stars
Responsive design hooks and Tailwind CSS layout patterns
Atomic Design component organization and directory structures
Comprehensive accessibility (A11y) and ARIA pattern integration

ユースケース

Building a production-ready component library using shadcn or Radix UI
Implementing complex form validation and state management with Zod and Hook Form
Refactoring existing React code to meet modern WCAG accessibility standards