メニュー
프론트엔드 개발 스킬. RSC 보안, 서버/클라이언트 분리, SEO. 프론트엔드 작업 시 사용.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
작업 오케스트레이션 스킬. 분석 → 구현 → 리뷰 → 커밋까지 전체 워크플로우 관리. 기능 개발, 버그 수정 등 모든 작업에 사용.
검증 스킬. 빌드, 린트, 테스트, E2E 검증. 커밋/PR 전 필수 실행. AI가 스스로 코드를 검증하는 자체 검증 루프.
기능 개발 스킬. Repository 패턴, 태스크 프로세스, 코드 컨벤션. 코드 작성 시 사용.
코드 리뷰 스킬. 버그, 보안, 성능, 가독성 체크. PR 리뷰, 자기 검토 시 사용.
| name | frontend |
| description | 프론트엔드 개발 스킬. RSC 보안, 서버/클라이언트 분리, SEO. 프론트엔드 작업 시 사용. |
Server Action에서 전체 객체 반환 금지
return userreturn { id: user.id, displayName: user.displayName }Closure에서 민감 데이터 캡처 금지
인라인 Server Action 지양
src/actions/ 폴더에 별도 파일로 분리src/actions/
├── project.ts # "use server" 상단 선언
├── chapter.ts
└── auth.ts
| 서버 컴포넌트 | 클라이언트 컴포넌트 |
|---|---|
| 데이터 페칭 | useState, useEffect |
| 환경변수/DB 접근 | 이벤트 핸들러 |
| SEO 콘텐츠 | 브라우저 API |
| 무거운 의존성 | 인터랙티브 UI |
export const metadataexport async function generateMetadata<main>, <article>, <nav>, <aside> 활용| 파일 | 용도 |
|---|---|
| error.tsx | 라우트 에러 바운더리 |
| not-found.tsx | 404 페이지 |
| loading.tsx | Suspense fallback |
Next.js 공식 문서: https://nextjs.org/docs