skills.rest
junDevCodes
junDevCodesCOMMUNITY
Explore all skills by this author →
GitHub

nextjs-frontend-guidelines

Standardize Next.js 15 frontend development with server components and shadcn/ui styling.

2|1|Updated Mar 1, 2026
Search Tags:#frontend#nextjs#shadcn-ui#app-router#server-components#tailwind-css
One-click install
npx skills add https://github.com/junDevCodes/Claude-Harness --skill nextjs-frontend-guidelines-jundevcodes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-frontend-guidelines
Source: https://github.com/junDevCodes/Claude-Harness/tree/main/.claude/skills/nextjs-frontend-guidelines
Command: npx skills add https://github.com/junDevCodes/Claude-Harness --skill nextjs-frontend-guidelines-jundevcodes

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Standardizes frontend development for Next.js 15 apps used by YGS.

Core Features & Use Cases

  • Server/Client component patterns and App Router usage to balance performance and interactivity
  • Shadcn/ui with Tailwind CSS 4 styling for consistent, accessible UI
  • Multi-method authentication flows (Firebase, Kakao, and custom JWT) with Korean localization
  • Admin dashboard patterns and project structure conventions to speed up delivery
  • Practical examples and a reference project structure that maps to your codebase

Quick Start

Follow the guidelines to start building Next.js 15 components and pages using server components by default, with client components only for interactivity, and apply shadcn/ui + Tailwind styling.

Frequently Asked Questions about nextjs-frontend-guidelines

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

FAQPage Schema
How do I structure Next.js 15 app router pages with server and client components?▼

Next.js 15 app router structure uses server components by default for data fetching, adding client components only for interactivity to balance performance and UX.

What is the best way to style Next.js apps with shadcn/ui and Tailwind CSS?▼

The best way to style Next.js apps with shadcn/ui and Tailwind CSS is applying the components directly within your app router structure for consistent, accessible UI design across all pages.

Can I implement multi-method authentication in Next.js using Firebase and custom JWT?▼

Yes, you can implement multi-method authentication in Next.js using Firebase, Kakao, and custom JWT together, with structured flows that also support Korean localization requirements.

How do I set up an admin dashboard in Next.js 15 with Tailwind CSS?▼

Set up an admin dashboard in Next.js 15 using established project structure conventions and patterns, applying shadcn/ui with Tailwind CSS 4 to speed up delivery and ensure consistent UI.

When do I need Korean localization in my Next.js frontend project?▼

You need Korean localization in your Next.js frontend project when building apps for YGS, as it is a specific structural requirement applied alongside multi-method authentication and server-default component patterns.

Related Skills

Explore More Software Engineering Skills→
tlswhdghks42tlswhdghks42

nextjs-frontend-guidelines

Provide Next.js 15 frontend guidelines covering React 19, TypeScript, App Router, shadcn/ui, and Tailwind CSS 4 for the YGS project.

Community
Advanced
flight505flight505
9

server-components

Automate React Server Component creation with Next.js 15 patterns.

Community
Advanced
DbillionaerDbillionaer
1

nextjs-app-router-patterns

Implement Next.js 14+ App Router patterns with Server Components and data fetching.

Community
Advanced
rnavarychrnavarych
14

role-frontend:react-expert

Provide React 19 expertise for Next.js 15 and Remix applications.

Community
Advanced