nextjs-frontend

Standardize Next.js frontends with App Router, server components, and shadcn/ui.

1|Updated Nov 26, 2014

Search Tags:#frontend #react #nextjs #design-system #shadcn-ui #app-router #server-components

Ready to run

npx skills add https://github.com/tianhuil/dotfiles --skill nextjs-frontend-tianhuil

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: nextjs-frontend
Source: https://github.com/tianhuil/dotfiles/tree/main/home/.config/opencode/skills/nextjs-frontend
Command: npx skills add https://github.com/tianhuil/dotfiles --skill nextjs-frontend-tianhuil

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlines the creation and maintenance of modern Next.js frontends by providing standardized guidance for App Router usage, server components, client-side data fetching, and design system integration.

Core Features & Use Cases

App Router-first architecture with server components by default
Shadcn/ui component integration for accessible, cohesive UI
Client-side data fetching patterns and server-component optimization
Design-system tokens and responsive patterns for consistent styling

Quick Start

Create a new Next.js app using the App Router, install shadcn/ui, and scaffold a page following the design system guidelines.

Frequently Asked Questions about nextjs-frontend

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

FAQPage Schema

How do I structure a Next.js app using App Router and server components?▼

To structure a Next.js app with App Router, use server components by default for data fetching and rendering, reserving client-side components for interactive UI elements. This enforces consistent architecture conventions for scalable front-end projects.

What is the best way to integrate shadcn/ui into a Next.js frontend?▼

The best way to integrate shadcn/ui into a Next.js frontend is to install the library and scaffold pages following design system guidelines. This ensures accessible, cohesive UI components using design tokens and responsive patterns.

Can I use client-side data fetching with server components in Next.js?▼

Yes, you can use client-side data fetching patterns alongside server components in Next.js. This combination allows you to optimize server rendering while maintaining interactive client-side data retrieval where needed.

Does this approach enforce design tokens for consistent styling in Next.js?▼

Yes, this approach enforces design tokens and responsive patterns for consistent styling across your Next.js application. By standardizing these conventions, you ensure a cohesive design system throughout the scalable front-end project.

When should I not use server components by default in Next.js App Router?▼

You should not use server components by default when a specific part of your Next.js UI requires heavy client-side interactivity, state management, or browser-only APIs. In these cases, switch to client-side data fetching and rendering patterns.