Agent skill · software engineering · aiskillstore
frontend-dev-guidelines
Next.js 15 애플리케이션을 위한 프론트엔드 개발 가이드라인. React 19, TypeScript, Shadcn/ui, Tailwind CSS를 사용한 모던 패턴. Server Components, Client Components, App Router, 파일 구조, Shadcn/ui 컴포넌트, 성능 최적화, TypeScript 모범 사례 포함. 컴포넌트, 페이지, 기능 생성, 데이터 페칭, 스타일링, 라우팅, 프론트엔드 코드 작업 시 사용.
Why this skill is useful
Provides specific patterns and best practices for Next.js 15 development that the AI wouldn't reliably generate on its own.
What it needs
About 8k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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 app/{route-name}/page.tsx for route [ ] 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 --- Topic Guides 🎨 Component Patterns Server C …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/frontend-dev-guidelines