---
title: UI
category: product
entity_type: skill
price: $15
canonical: https://forgehouse.ai/skills/ui/
lang: en
hreflang_alt: https://forgehouse.ai/tr/skiller/ui/
last_updated: 2026-06-20
---

# UI

> Frontend development patterns for React components, Next.js pages, forms, and Tailwind styling

A production frontend pattern library for React and Next.js: component classification (Server vs Client), state architecture, mandatory data-display and form patterns, and Tailwind styling discipline. Every async UI ships all four required states (loading, error, empty, success) so screens never leave users staring at a blank or broken view.

## Use cases
- Data lists that handle loading, error, empty, and success cleanly
- Forms with React Hook Form, Zod validation, and toast feedback
- Server Components for crawlable, fast-rendering pages
- Next.js 15 dynamic routes with async params/searchParams
- Conditional Tailwind styling with cn() utility
- Accessible, responsive UI from 375px to 1440px

## Benefits
- No more blank screens: every async state is handled by default
- Faster, SEO-friendly pages via Server Component HTML output
- Consistent forms with real validation instead of silent failures
- Accessible interfaces (WCAG AA, keyboard, screen reader) baked in

## What’s included
- Server vs Client component decision rules
- State architecture map (TanStack Query, Zustand, RHF, nuqs, useState)
- Copy-ready data-display, form, and server-fetch component patterns
- Component library guidance (shadcn/ui, Magic UI, Preline, Prompt Kit)
- Accessibility and completion checklists
- Red-flag table mapping anti-patterns to fixes (mock data, empty handlers, missing states)

## Who it’s for
Frontend developers building React/Next.js interfaces who want complete, accessible components with real data and no missing states.

## How it runs
Server Component or client? Every frontend build opens with that classification and closes with the four-state rule. In between, state routing, form chains and the accessibility checklist each take a turn:
1. Classifies each piece first: no interactivity stays a Server Component, hooks or events get 'use client', and hybrid needs split into a server parent that fetches data plus a client child that handles interaction
2. Routes state to the right tool by data type: server data to TanStack Query, global UI to Zustand, forms to React Hook Form, URL state to nuqs, instead of one useState carrying everything
3. Implements the mandatory 4-state sequence in every data component: Skeleton while loading, ErrorCard with a retry action on failure, EmptyState with a CTA when the list is empty, only then the real content. A missing state means the component is not accepted
4. Builds forms as a fixed chain: Zod schema, zodResolver, mutation with cache invalidation on success, toast feedback on both outcomes, and the submit button disabled while pending
5. Walks the accessibility checklist on the result: keyboard navigation works, focus states are visible, icon-only buttons carry aria-labels, color contrast holds at 4.5:1
6. Scans for red flags before closing: hardcoded mock arrays, empty onClick handlers, missing loading or error states, any types, unvalidated forms. Each one gets resolved, not shipped

## FAQ
### Which frontend stack does this assume?
React with Next.js 15 and Tailwind, plus a specific state map: TanStack Query for server data, Zustand for client state, React Hook Form with Zod for forms, nuqs for URL state. If you are on Vue or Angular the four-state discipline still translates, but the copy-ready patterns will not.

### How does 'no blank screens' get enforced rather than just recommended?
Every async UI is required to ship all four states: loading, error, empty, success, as a mandatory pattern, not a suggestion. The red-flag table maps the usual shortcuts (mock data, empty handlers, missing states) to their fixes, and the completion checklist catches what slipped through before you call the component done.

### Is this a component library I can install and get styled buttons from?
No. It is a pattern library: decision rules for Server vs Client components, state architecture, and copy-ready data-display and form structures. For visual components it points you to libraries like shadcn/ui and Magic UI rather than shipping its own.

## Price
$15, one-time, no subscription. VAT included.

Related guide: [Building a design system with Claude Design](https://forgehouse.ai/guides/claude-design-design-system/)