kb-ui

What problem does it solve?

This Skill prevents brittle, non-responsive, and inaccessible UI patterns in Next.js App Router projects by giving a portable set of rules and layouts that work reliably across mobile and desktop.

Core Features & Use Cases

• Server-first component boundaries: Enforces keeping data fetching in Server Components and placing 'use client' only where interaction/state truly requires it.
• Mobile-first layout standards: Defines a 375px baseline shell and detail-page patterns that avoid horizontal scroll and keep content readable with consistent spacing.
• Robust UI patterns for tables, filters, and loading: Covers internal scroll containers for wide tables, stacked responsive filters, cascading filter derivation, URL-based state, and Suspense skeletons that mirror real layout dimensions.
• Form + validation trust boundary guidance: Recommends RHF + Zod validation at the edge with RHF on the client and re-validation on server actions using the same schema.
• Accessibility and interaction rules: Provides an a11y checklist and discourages anti-patterns like div-based click handlers and native browser dialogs.

Quick Start

Use the kb-ui skill when creating a new component in any Next.js App Router project to apply its server/client boundary, mobile-first layout, cascading filters, URL state, Suspense skeleton, and accessibility rules.