skills.rest
JaveedIshaq
JaveedIshaqCOMMUNITY
Explore all skills by this author →
Website𝕏@javeedishaqGitHub

ui-patterns

Provide React and Next.js UI patterns for accessibility, forms, and responsive design.

1|Updated Jan 8, 2026
Search Tags:#ui#performance#accessibility#frontend#react#component patterns
One-click install
npx skills add https://github.com/JaveedIshaq/ai-workflow-orchestrator --skill ui-patterns-javeedishaq
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-patterns
Source: https://github.com/JaveedIshaq/ai-workflow-orchestrator/tree/main/templates/skills/ui-patterns
Command: npx skills add https://github.com/JaveedIshaq/ai-workflow-orchestrator --skill ui-patterns-javeedishaq

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide and reusable patterns for building user interfaces with a focus on accessibility, performance, and maintainability. It helps developers create consistent, high-quality UIs across different frameworks and component libraries.

Core Features & Use Cases

  • Component Organization: Demonstrates Atomic Design principles for structuring UI components.
  • Server vs. Client Components: Explains the differences and best practices for Next.js Server and Client Components.
  • Accessibility Patterns: Covers best practices for buttons, links, forms, and focus management to ensure WCAG compliance.
  • Loading & Error States: Provides patterns for implementing skeleton loaders, Suspense, and Error Boundaries.
  • Form Handling: Illustrates form creation using react-hook-form and zod for validation.
  • Responsive Design: Shows how to implement responsive layouts using Tailwind CSS and media queries.
  • Use Case: A developer needs to build a new feature with a complex form and ensure it's accessible and performs well. They can refer to this Skill for guidance on component structure, accessibility attributes, form validation, and loading states.

Quick Start

Refer to the UI Patterns Skill for guidance on building accessible and performant React components.

Frequently Asked Questions about ui-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What's the best way to structure React components for accessibility and performance?▼

Structure React components using Atomic Design principles to build accessible and performant interfaces. This approach organizes UI elements hierarchically, making components maintainable and reusable across modern web applications.

How do I handle form validation in Next.js using react-hook-form and zod?▼

Handle Next.js form validation by integrating react-hook-form with zod to manage schema validation. This combination provides type-safe form state management, ensuring accessible user inputs and robust error handling.

When should I use Next.js Server Components instead of Client Components?▼

Use Next.js Server Components for static content and data fetching to improve performance, reserving Client Components for interactive UI elements. This strategy minimizes client-side JavaScript and optimizes initial page loading.

How do I implement accessible loading and error states in React?▼

Implement accessible React loading and error states using skeleton loaders, Suspense, and Error Boundaries. These patterns provide visual feedback during asynchronous operations, maintaining WCAG compliance and improving user experience.

Does this UI pattern guide work with Tailwind CSS for responsive design?▼

Yes, the UI pattern guide works with Tailwind CSS to implement responsive layouts. It demonstrates using utility classes and media queries to build accessible, adaptive interfaces across various screen sizes.

Related Skills

Explore More Design & Creative Skills→
zhangzhang-111-izhangzhang-111-i
2

senior-frontend

Scaffold React and Next.js projects with TypeScript and Tailwind CSS.

Community
Advanced
statick88statick88
1

nextjs-best-practices

Guide Next.js App Router implementation with component and data fetching best practices.

Community
Intermediate
ever-worksever-works
21

tailwind-css-patterns

Create responsive layouts and component styling with Tailwind CSS utility classes.

Official
Advanced
shinnytechshinnytech

using-shadcn-ui

Create React UI components with shadcn/ui and Tailwind CSS.

Official
Intermediate