skills.rest
eykissvrino
eykissvrinoCOMMUNITY
Explore all skills by this author →
GitHub

nextjs-frontend-guidelines

Standardize Next.js 15 frontend architecture with server and client component patterns.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide standardizes frontend development practices for YGS projects using Next.js 15, App Router, React 19, TypeScript, and Korean localization, reducing ambiguity and onboarding time.

Core Features & Use Cases

  • Server vs Client Component guidance for optimal performance and interactivity
  • App Router patterns including file-based routing, data fetching, and route organization
  • Styling guidance with shadcn/ui, Tailwind CSS 4, and design token consistency
  • Authentication patterns supporting Firebase, Kakao, and JWT for admin and user flows
  • Admin dashboard patterns and component organization for scalable maintenance
  • Korean localization across UI strings and components to deliver a localized experience

Quick Start

Review the resources/ files and implement the documented patterns in your Next.js app.

Frequently Asked Questions about nextjs-frontend-guidelines

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

FAQPage Schema
How do I decide between using server components and client components in Next.js 15?▼

Server components should be used by default for optimal performance, while client components are reserved for interactivity. The guidelines document implementation requirements and example-driven patterns for consistent component decisions.

What is the best way to structure App Router routing and data fetching in Next.js?▼

App Router patterns utilize file-based routing and organized route structures for scalable maintenance. The guidelines provide standardized documentation for data fetching methods and consistent import conventions across your Next.js application.

Does this guide cover styling with shadcn/ui and Tailwind CSS 4?▼

Yes, styling guidance is provided using shadcn/ui and Tailwind CSS 4. The patterns ensure design token consistency across admin dashboards and components for a unified user interface.

How do I implement multi-method authentication with Firebase, Kakao, and JWT in Next.js?▼

Authentication patterns support Firebase, Kakao, and JWT for both admin and user flows. The guidelines document these multi-method implementations to secure your Next.js application architecture.

Can I use these Next.js frontend guidelines for projects requiring Korean localization?▼

Yes, the guidelines standardize Korean localization across UI strings and components. They deliver a localized experience tailored for YGS projects using Next.js 15 and React 19.

What are the limitations of using server components by default for interactive elements?▼

Server components lack client-side interactivity, requiring client components for state and event handling. The guidelines outline when to transition between them to maintain performance without sacrificing functionality.

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
djnsty23djnsty23
2

deploy

Deploy and configure CI/CD workflows for Vercel, Supabase, and GitHub Actions.

Community
Advanced
theofernandezztheofernandezz

nextjs-core

Consolidate Next.js 16 App Router patterns for server-first data fetching and mutations.

Community
Advanced
MadAppGangMadAppGang
278

core-principles

Define React 19 SPA architecture and project structure principles.

Official
Basic