skills.rest
echarabati
echarabatiCOMMUNITY
Explore all skills by this author →
GitHub

ui

Guide React, Next.js App Router, and Tailwind CSS UI development.

Updated Feb 2, 2026
Search Tags:#ui#accessibility#react#next.js#tailwind css#component design
One-click install
npx skills add https://github.com/echarabati/adi-capital-admin --skill ui-echarabati
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui
Source: https://github.com/echarabati/adi-capital-admin/tree/main/.agent/skills/domains/ui
Command: npx skills add https://github.com/echarabati/adi-capital-admin --skill ui-echarabati

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive guide and set of best practices for building user interfaces with React, Next.js, and Tailwind CSS, ensuring consistency, accessibility, and maintainability.

Core Features & Use Cases

  • Component Patterns: Demonstrates how to structure and build reusable UI components.
  • Styling Guidelines: Enforces consistent styling using Tailwind CSS, including responsive design and dark mode.
  • Accessibility: Provides a checklist and best practices for ensuring WCAG compliance.
  • Form Handling: Integrates with React Hook Form and Zod for robust form management.
  • Table Management: Offers patterns for both client-side and server-side table state management.
  • Error Handling & Feedback: Guides on using toasts and dialogs for user feedback, avoiding native browser alerts.
  • Use Case: Develop a new dashboard page with interactive tables, forms, and clear user feedback mechanisms, adhering to the project's design system and accessibility standards.

Quick Start

Implement a new user profile form using the provided React Hook Form and Zod pattern.

Frequently Asked Questions about ui

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

FAQPage Schema
What's the best way to build accessible UI components with Next.js and Tailwind CSS?▼

The best way to build accessible UI components with Next.js and Tailwind CSS is to use server components, a Tailwind-first styling approach, and follow WCAG compliance checklists for consistent rendering. This Skill provides those specific structural patterns.

How do I handle forms in React using Zod and React Hook Form?▼

You handle forms in React by integrating React Hook Form for state management and Zod for schema validation, ensuring robust input handling. This Skill demonstrates how to combine both for a new user profile form.

Can I manage both client-side and server-side table state in a Next.js App Router project?▼

Yes, you can manage both client-side and server-side table state in a Next.js App Router project. This Skill offers specific patterns for interactive table management strategies within your dashboard pages.

Why should I avoid native browser alerts for user feedback in React applications?▼

You should avoid native browser alerts in React applications because they disrupt the user experience and accessibility flow. Instead, this Skill guides you to use toasts and dialogs for clear, accessible user feedback mechanisms.

Does this approach to UI design recommend using UUIDs for component identifiers?▼

No, this UI design approach does not recommend using UUIDs for component identifiers. It emphasizes using human-readable IDs over UUIDs to provide better UX and simplify support within your Next.js application.

Related Skills

Explore More Software Engineering Skills→
LeoTechProLeoTechPro
1

nextjs-development

Develops Next.js 14+ apps using App Router, Server Components, Actions, SSR, and Tailwind CSS.

Community
Advanced
danbridanbri
1

jaws-accessibility

Audit web interfaces for WCAG 2.2 compliance using JAWS and NVDA.

Community
Advanced
flaviogragnolatiflaviogragnolati

react-hook-form-zod

Construct and validate React forms with React Hook Form and Zod schemas.

Community
Advanced
diegocamara89diegocamara89
3

frontend-patterns

Provide React and Next.js frontend patterns for scalable, accessible interfaces.

Community
Intermediate