frontend-builder
Frontend Builder
Overview
Builds maintainable, performant React and Next.js frontends using a server-first architecture. Covers component design, state management, data fetching, forms, styling, and performance optimization. Not for backend API design, database schema, or deployment infrastructure.
Quick Reference
| Pattern | Approach | Key Points |
|---|---|---|
| Framework | Next.js App Router (default), React + Vite (SPAs) | Server-first rendering, file-based routing |
| Components | Page, Feature, UI, Layout types | Single responsibility, typed props, composition |
| Server vs Client | Server Components default, 'use client' at leaf nodes |
Push interactivity to edges of component tree |
| State (local) | useState, props, lift to parent |
Keep state close to where it is consumed |
| State (global) | Context API (theme, auth), Zustand (complex) | Avoid Context for frequently changing values |
| Data fetching | Server Components (server), TanStack Query (client) | Server Actions for mutations, revalidatePath for cache |
| Forms | React Hook Form + Zod, or Server Actions + useActionState |
Schema validation, optimistic updates with useOptimistic |
| Styling | Tailwind CSS v4 + shadcn/ui | CSS-first config with @theme, OKLCH colors |
| Performance | Suspense streaming, code splitting, memoization | React.lazy(), next/dynamic, selective memo() |
More from oakoss/agent-skills
playwright
|
200ui-ux-polish
Iterative UI/UX polishing workflow for web applications. Use when improving visual polish, refining desktop and mobile UX separately, running iterative enhancement cycles, applying design patterns like glassmorphism or bento grids, or auditing accessibility and WCAG compliance. Use for Stripe-level visual quality, responsive optimization, and design system alignment.
153find-skills
|
119knowledge-graph-builder
>
101tailwind
Tailwind CSS v4 patterns and design systems. Use when configuring Tailwind themes, building components, implementing dark mode, using container queries, migrating from v3, integrating shadcn/ui, or fixing build errors. Use for tailwind, css, styling, theme, design-tokens.
85pnpm-workspace
pnpm workspace monorepo management with filtering, catalogs, and shared configs. Use when setting up monorepos, managing workspace dependencies, filtering package commands, or sharing configuration across packages.
78