Design & UX Skill
Accessibility Compliance
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns…
$15
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.
$15 one-time
Add to a kit → Prices include 20% VAT. · Forged on real agency work · one-time, no lock-in
- Type Skill
- Category Design & UX
- Delivery Email · instant
- License One-time
Inside the run · no black box
See the actual work before you buy it.
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:
- 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
- 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
- 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
- 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
- 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
- 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
One power source. 6 lines out.
ui · core
core active · 6 lines
- ✓ data lists that handle l…
Data lists that handle loading, error, empty, and success cleanly
- ✓ forms with react hook form
Forms with React Hook Form, Zod validation, and toast feedback
- ✓ server components for cr…
Server Components for crawlable, fast-rendering pages
- ✓ next.js 15 dynamic routes
Next.js 15 dynamic routes with async params/searchParams
- ✓ conditional tailwind sty…
Conditional Tailwind styling with cn() utility
- ✓ accessible, responsive ui
Accessible, responsive UI from 375px to 1440px
Yours to keep.
Drag time forward. Watch what stays.
Forever
That's what owning means.
The rented stack
ai writing tool: subscription
expired · access lostanalytics suite: subscription
expired · access lostdesign platform: subscription
expired · access lost(nothing left)
Your forge
-
No more blank screens: every async state is handled by default
license: perpetual -
Faster, SEO-friendly pages via Server Component HTML output
license: perpetual -
Consistent forms with real validation instead of silent failures
license: perpetual -
Accessible interfaces (WCAG AA, keyboard, screen reader) baked in
license: perpetual
subscriptions expire · deeds don't
Everything in the box.
Pick a piece up. Watch it work.
Server vs Client component decision rules
6 parts · one working system · ships instantly by email
This wasn't forged for everyone.
- Not for you if you'd rather rent a tool than own one.
- Not for you if you want someone else to run your stack.
- Not for you if you're happy guessing.
Frontend developers building React/Next.js interfaces who want complete, accessible components with real data and no missing states.
then this was forged for you.Works with
Universal by design: these run in any AI. Delivered in the open Agent Skills + MCP format (native in Claude); ChatGPT, Gemini, Cursor and Copilot adapt the same files their own way.
- Claude Native format
- ChatGPT Adapts via open standards
- Gemini Adapts via open standards
- Cursor Adapts via open standards
- Copilot Adapts via open standards
Catch what's on your mind.
the air is clear. nothing between you and the forge.
catch a spark: the forge will answer
-
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.
-
How is it delivered?
By email right after purchase: ready to run, downloaded instantly, no setup wait.
-
One-time or subscription?
A one-time purchase; no subscription or hidden fees. VAT (20%) is included.
-
Can I get a refund?
As a digital product, it can’t be refunded once downloaded. That’s why we show exactly what’s inside and who it’s for, right here.