frontend-builder

Build React and Next.js frontends with Next.js App Router, Tailwind CSS, and shadcn/ui.

14|5|Updated Jan 29, 2026

Search Tags:#state management #frontend #react #shadcn/ui #nextjs #tailwind #component architecture

Ready to run

npx skills add https://github.com/oakoss/agent-skills --skill frontend-builder-oakoss

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-builder
Source: https://github.com/oakoss/agent-skills/tree/main/skills/frontend-builder
Command: npx skills add https://github.com/oakoss/agent-skills --skill frontend-builder-oakoss

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the creation of modern, performant React and Next.js frontends, addressing challenges in component architecture, state management, data fetching, and styling.

Core Features & Use Cases

Modern Stack Guidance: Provides patterns for React 19+, Next.js App Router, Tailwind CSS v4, and shadcn/ui.
Architecture & Patterns: Covers component types (Page, Feature, UI, Layout), state management (useState, Context, Zustand, URL), data fetching (Server Components, TanStack Query), and form handling (React Hook Form, Server Actions).
Use Case: When starting a new web application, use this Skill to establish a robust project structure, choose the right state management solutions, and implement efficient data fetching strategies.

Quick Start

Use the frontend-builder skill to create a new React component for a user profile card.

Frequently Asked Questions about frontend-builder

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

FAQPage Schema

How do I build a React frontend with Next.js App Router?▼

Building a React frontend with Next.js App Router involves a server-first architecture using Server Components for data fetching and distinct component types, yielding a performant and maintainable UI structure.

What is the best way to manage state in a modern Next.js application?▼

State management in Next.js depends on scope: use useState for local UI, Context for shared state, Zustand for complex client state, and URL parameters for shareable state, resulting in predictable component behavior.

How do I handle data fetching and forms in Next.js Server Components?▼

Handling data fetching and forms in Next.js Server Components requires fetching data directly within the component and submitting mutations via Server Actions, eliminating manual API routes and reducing client-side JavaScript.

Can I use Tailwind CSS and shadcn/ui together in a React project?▼

You can use Tailwind CSS and shadcn/ui together in a React project. shadcn/ui components use Tailwind CSS for styling, allowing you to copy accessible UI components directly into your codebase for full architectural control.

What component architecture should I use for a maintainable React frontend?▼

A maintainable React frontend uses a structured component architecture categorizing files into Page, Feature, UI, and Layout components, which enforces strict separation of concerns and predictable data flow.

When should I use TanStack Query instead of Next.js Server Components?▼

Use TanStack Query instead of Next.js Server Components when you need complex client-side caching, optimistic UI updates, or frequent background data synchronization that the server-first architecture cannot efficiently handle.