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

•

Design Tools

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.

Key Features

01Optimized React Server vs. Client component implementation

02Performance-oriented loading states and skeleton loaders

031 GitHub stars

04Responsive design hooks and Tailwind CSS layout patterns

05Atomic Design component organization and directory structures

06Comprehensive accessibility (A11y) and ARIA pattern integration

Use Cases

01Building a production-ready component library using shadcn or Radix UI

02Implementing complex form validation and state management with Zod and Hook Form

03Refactoring existing React code to meet modern WCAG accessibility standards

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add javeedishaq/ai-workflow-orchestrator ui-patterns

For use in Claude.ai and ChatGPT

Download Skill