Next.js 15 애플리케이션을 위한 프론트엔드 개발 가이드라인. React 19, TypeScript, Shadcn/ui, Tailwind CSS를 사용한 모던 패턴. Server Components, Client Components, App Router, 파일 구조, Shadcn/ui 컴포넌트, 성능 최적화, TypeScript 모범 사례 포함. 컴포
1---2name: frontend-dev-guidelines3description: Next.js 15 애플리케이션을 위한 프론트엔드 개발 가이드라인. React 19, TypeScript, Shadcn/ui, Tailwind CSS를 사용한 모던 패턴. Server…4---56# skills/0chan-smc/frontend-dev-guidelines/SKILL.md
F
SKILL.mdAgent skill
Transport
File
Status
Listed
SKILL.md
Install
The skill file stays in the publisher's repository.
Paste the copied command in a terminal. It installs this SKILL.md into that agent.
shterminal
1npx skills add aiskillstore/marketplace --skill frontend-dev-guidelines -a cursor -y
Paste the copied command in a terminal. It installs this SKILL.md into that agent.
Next.js 15 애플리케이션을 위한 프론트엔드 개발 가이드라인. React 19, TypeScript, Shadcn/ui, Tailwind CSS를 사용한 모던 패턴. Server Components, Client Components, App Router, 파일 구조, Shadcn/ui 컴포넌트, 성능 최적화, TypeScript 모범 사례 포함. 컴포넌트, 페이지, 기능 생성, 데이터 페칭, 스타일링, 라우팅, 프론트엔드 코드 작업 시 사용.
Download skills/0chan-smc/frontend-dev-guidelines/SKILL.md from the publisher, or copy the path and open the repository. PlugMCP lists the skill and does not host the file.
Where does frontend-dev-guidelines live?
The publisher keeps it at https://github.com/aiskillstore/marketplace.
Which agents can use frontend-dev-guidelines?
Claude, Cursor, Codex, and Grok Build can read a SKILL.md you add from the publisher's repository. Grok Bot installs it when you send the skill's GitHub folder link in a chat.
From the publisher
SKILL.md
name
frontend-dev-guidelines
description
Next.js 15 애플리케이션을 위한 프론트엔드 개발 가이드라인. React 19, TypeScript, Shadcn/ui, Tailwind CSS를 사용한 모던 패턴. Server Components, Client Components, App Router, 파일 구조, Shadcn/ui 컴포넌트, 성능 최적화, TypeScript 모범 사례 포함. 컴포넌트, 페이지, 기능 생성, 데이터 페칭, 스타일링, 라우팅, 프론트엔드 코드 작업 시 사용.
Frontend Development Guidelines
Purpose
Comprehensive guide for modern Next.js 15 development with React 19, emphasizing Server Components, Client Components, App Router patterns, Shadcn/ui components, proper file organization, and performance optimization.
When to Use This Skill
Creating new components or pages
Building new features
Fetching data (Server Components, Server Actions)
Setting up routing with Next.js App Router
Styling components with Tailwind CSS and Shadcn/ui
Performance optimization
Organizing frontend code
TypeScript best practices
Quick Start
New Component Checklist
Creating a component? Follow this checklist:
Determine Server vs Client Component (default: Server Component)
Add "use client" directive only if needed (interactivity, hooks, browser APIs)
Use TypeScript with explicit prop types
Import Shadcn/ui components from @/components/ui
Use Tailwind CSS classes for styling
Import aliases: @/components, @/lib, @/hooks
Use cn() utility for conditional classes
Default export at bottom
Use Server Components for data fetching when possible
New Page Checklist
Creating a page? Set up this structure:
Create for route
app/{route-name}/page.tsx
Use Server Component by default
Fetch data directly in Server Component
Create components/ directory for page-specific components
Use loading.tsx for loading states
Use error.tsx for error boundaries
Export metadata for SEO
Import Aliases Quick Reference
Alias
Resolves To
Example
@/
Project root
import { cn } from '@/lib/utils'
@/components
components/
import { Button } from '@/components/ui/button'
@/lib
lib/
import { cn } from '@/lib/utils'
@/hooks
hooks/
import { useMobile } from '@/hooks/use-mobile'
@/app
app/
import { Metadata } from 'next'
Defined in: tsconfig.json paths configuration
Common Imports Cheatsheet
// Next.js
import { Metadata } from 'next'
import { Suspense } from 'react'
import { notFound, redirect } from 'next/navigation'
// React (Client Components only)
;('use client')
import { useState, useCallback, useMemo } from 'react'
// Shadcn/ui Components
import { Button } from '@/components/ui/button'
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
// Utilities
import { cn } from '@/lib/utils'
// Hooks (Client Components only)
import { useMobile } from '@/hooks/use-mobile'
// Types
import type { ComponentProps } from 'react'
Topic Guides
🎨 Component Patterns
Server Components vs Client Components:
Server Components (default): No "use client", can fetch data directly, smaller bundle
Client Components: Add "use client" for interactivity, hooks, browser APIs
Key Concepts:
Default to Server Components
Only use Client Components when necessary
Use Shadcn/ui components (already Client Components)
Component structure: Props → Data Fetching → Render → Export