skills.rest
tianhuil
tianhuilCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/tianhuil/dotfiles --skill nextjs-frontend-tianhuil
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
vanman2024vanman2024
10

tailwind-shadcn-setup

Automate Tailwind CSS and shadcn/ui setup for Next.js projects.

Community
Advanced
mgd34msumgd34msu
4

vercel

Deploy applications to Vercel with serverless functions and environment variables.

Community
Intermediate
yutnayutna
2

nextjs-data-access

Orchestrate server and client data fetching with SWR in Next.js apps.

Community
Advanced
ovachieverovachiever
52

tanstack-start

Build full-stack React apps on Cloudflare Workers with TanStack Start.

Community
Advanced