nextjs-domain-architecture — for Claude Code nextjs-domain-architecture, template_ichms2, community, for Claude Code, ide skills, GOV-02, GOV-01, Next.js, Domain, Architecture

v1.0.0

이 스킬 정보

Next.js 프로젝트 아키텍처 관리에 App Router + TanStack Query를 사용하는 풀스택 에이전트에 적합 현지화된 요약: Domain-oriented architecture standard for Next.js App Router + TanStack Query projects. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

기능

Next.js Domain Architecture Skill (Rules-Driven)
rules/ 하위 문서를 기준으로 Next.js App Router + TanStack Query 프로젝트의 생성/수정/리뷰를 일관되게 수행하기 위한 실행형 스킬이다.
팀 규칙을 기준으로 신규 기능을 생성할 때
외주 산출물/AI 산출물의 구조 적합성을 리뷰할 때
PR에서 Hard Gate/Warning 판단과 예외 기록이 필요할 때

# 핵심 주제

ichms ichms
[0]
[0]
업데이트: 3/6/2026

Skill Overview

Start with fit, limitations, and setup before diving into the repository.

Next.js 프로젝트 아키텍처 관리에 App Router + TanStack Query를 사용하는 풀스택 에이전트에 적합 현지화된 요약: Domain-oriented architecture standard for Next.js App Router + TanStack Query projects. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

이 스킬을 사용하는 이유

에이전트가 팀 규칙과 거버넌스 지침을 따라 Next.js 프로젝트를 생성, 수정 및 검토할 수 있도록 하며, App Router 및 TanStack Query를 사용하여 효율적인 데이터 관리 및 검색을 수행한다. 하드 규칙 및 우선순위 행렬은 `rules/00-governance/hard-rules.md` 및 `rules/00-governance/priority-matrix.md`에 정의

최적의 용도

Next.js 프로젝트 아키텍처 관리에 App Router + TanStack Query를 사용하는 풀스택 에이전트에 적합

실행 가능한 사용 사례 for nextjs-domain-architecture

App Router 및 TanStack Query를 사용하여 Next.js 프로젝트 자동 설정
팀의 거버넌스 지침을 따라 기존 Next.js 프로젝트를 검토 및 리팩토링
사전에 정의된 규칙 및 우선순위 행렬을 기반으로 Next.js 프로젝트 구조 생성 및 수정

! 보안 및 제한 사항

  • 거버넌스 지침을 얻기 위해 `rules/` 디렉토리에 대한 액세스가 필요
  • Next.js 및 TanStack Query 설정이 필요
  • 팀의 규칙 및 거버넌스 지침은 `rules/00-governance/hard-rules.md` 및 `rules/00-governance/priority-matrix.md`에 사전에 정의되어야 함

About The Source

The section below is adapted from the upstream repository. Use it as supporting material alongside the fit, use-case, and installation summary on this page.

Labs 데모

Browser Sandbox Environment

⚡️ Ready to unleash?

Experience this Agent in a zero-setup browser environment powered by WebContainers. No installation required.

Boot Container Sandbox

FAQ 및 설치 단계

These questions and steps mirror the structured data on this page for better search understanding.

? 자주 묻는 질문

nextjs-domain-architecture은 무엇인가요?

Next.js 프로젝트 아키텍처 관리에 App Router + TanStack Query를 사용하는 풀스택 에이전트에 적합 현지화된 요약: Domain-oriented architecture standard for Next.js App Router + TanStack Query projects. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

nextjs-domain-architecture은 어떻게 설치하나요?

다음 명령을 실행하세요: npx killer-skills add ichms/template_ichms2. Cursor, Windsurf, VS Code, Claude Code와 19개 이상의 다른 IDE에서 동작합니다.

nextjs-domain-architecture은 어디에 쓰이나요?

주요 활용 사례는 다음과 같습니다: App Router 및 TanStack Query를 사용하여 Next.js 프로젝트 자동 설정, 팀의 거버넌스 지침을 따라 기존 Next.js 프로젝트를 검토 및 리팩토링, 사전에 정의된 규칙 및 우선순위 행렬을 기반으로 Next.js 프로젝트 구조 생성 및 수정.

nextjs-domain-architecture 와 호환되는 IDE는 무엇인가요?

이 스킬은 Cursor, Windsurf, VS Code, Trae, Claude Code, OpenClaw, Aider, Codex, OpenCode, Goose, Cline, Roo Code, Kiro, Augment Code, Continue, GitHub Copilot, Sourcegraph Cody, and Amazon Q Developer 와 호환됩니다. 통합 설치에는 Killer-Skills CLI를 사용하세요.

nextjs-domain-architecture에 제한 사항이 있나요?

거버넌스 지침을 얻기 위해 `rules/` 디렉토리에 대한 액세스가 필요. Next.js 및 TanStack Query 설정이 필요. 팀의 규칙 및 거버넌스 지침은 `rules/00-governance/hard-rules.md` 및 `rules/00-governance/priority-matrix.md`에 사전에 정의되어야 함.

이 스킬 설치 방법

  1. 1. 터미널 열기

    프로젝트 디렉터리에서 터미널 또는 명령줄을 여세요.

  2. 2. 설치 명령 실행

    npx killer-skills add ichms/template_ichms2 를 실행하세요. CLI가 IDE 또는 에이전트를 자동으로 감지하고 스킬을 설정합니다.

  3. 3. 스킬 사용 시작

    스킬이 이제 활성화되었습니다. 현재 프로젝트에서 nextjs-domain-architecture을 바로 사용할 수 있습니다.

! Source Notes

This page is still useful for installation and source reference. Before using it, compare the fit, limitations, and upstream repository notes above.

Upstream Repository Material

The section below is adapted from the upstream repository. Use it as supporting material alongside the fit, use-case, and installation summary on this page.

Upstream Source

nextjs-domain-architecture

현지화된 요약: Domain-oriented architecture standard for Next.js App Router + TanStack Query projects. This AI agent skill supports Claude Code, Cursor, and

SKILL.md
Readonly
Upstream Repository Material
The section below is adapted from the upstream repository. Use it as supporting material alongside the fit, use-case, and installation summary on this page.
Upstream Source

Next.js Domain Architecture Skill (Rules-Driven)

rules/ 하위 문서를 기준으로 Next.js App Router + TanStack Query 프로젝트의 생성/수정/리뷰를 일관되게 수행하기 위한 실행형 스킬이다.

When To Use

  • 팀 규칙을 기준으로 신규 기능을 생성할 때
  • 기존 기능을 리팩토링/수정할 때
  • 외주 산출물/AI 산출물의 구조 적합성을 리뷰할 때
  • PR에서 Hard Gate/Warning 판단과 예외 기록이 필요할 때

Source Of Truth

  • Hard Rule 원문/집행 강도 SSOT: rules/00-governance/hard-rules.md (GOV-02)
  • Priority/Enforcement 해석 기준: rules/00-governance/priority-matrix.md (GOV-01)
  • 실행형 AI 지시 SSOT: rules/30-ai/ai-agent-rules.md (AI-OPS-01)
  • 문서 경로 탐색: rules/00-index.md (Rule Locator)

참고 전용 문서(*.example.md, rules/50-reference/*)는 실행 지시로 해석하지 않는다.

Execution Order

  1. 작업 유형을 결정한다.
  2. GOV-02 기준 Hard Gate를 먼저 적용한다.
  3. 해당 도메인의 Core Rule(ARC/RQ/IMP/STATE/TYPE/REACT)을 적용한다.
  4. Warning/Guide 항목은 리뷰 코멘트와 개선 계획을 남긴다.
  5. Hard Rule 예외가 필요하면 EX-01 템플릿 초안을 작성한다.

Work Modes

  • Mode A (신규 기능 생성): 파일 세트를 순서대로 생성한다.
  • Mode B (기존 코드 수정): 필요한 파일만 최소 수정한다.

Mode A 생성 순서 (AI-OPS-01)

  1. type.ts
  2. queryKeys.ts
  3. service.ts (필요 시 get*ForPage)
  4. hooks/queries.ts
  5. hooks/mutations.ts (mutation 필요 시)
  6. components/Page.tsx
  7. app/*/page.tsx

Hard Gate Checklist (Must Pass)

  • HR-ARC-01: app/*/page.tsx는 Thin Route(엔트리/조합)만 담당한다.
  • HR-ARC-02: app/* read-only 조회는 features/domain-*/service.ts 공개 함수(get*ForPage)만 경유한다.
  • HR-ARC-03: app/*에서 write/invalidate/정책성 side effect를 직접 처리하지 않는다.
  • HR-IMP-01: packages/* -> features/* import 금지.
  • HR-IMP-02: features/common -> features/domain-* import 금지.
  • HR-IMP-03: app/*에서 service.ts import는 read-only 공개 함수만 허용.
  • HR-RQ-01: query key는 queryKeys.ts factory로만 생성/사용.
  • HR-RQ-02: service.ts에 React Query 훅 import 금지(순수 API만).
  • HR-TYPE-01: any 금지.
  • HR-REACT-03: react-hooks/exhaustive-deps 비활성화 금지.

Hard Gate 위반은 EX-01 승인 정보 없이 머지할 수 없다.

Warning And Guide Checklist

  • HR-RQ-03 (Warning): mutation 성공 경로별 lists/detail invalidate 누락 금지.
  • HR-STATE-01 (Warning): 서버 상태를 store/local state에 중복 저장하지 않는다.
  • HR-TYPE-02,03,04 (Warning): 타입 파일의 type 기본 원칙, union 상수 소스 파생, 컴포넌트/훅 계약 타입 의도 확인.
  • HR-STYLE-01 (Warning): 신규 함수는 함수 표현식 기본.
  • HR-REACT-01,02 (Warning): Effect 용도 제한, mount fetch 기본 패턴 금지.
  • SCALE-01 (Guide): 3축(크기/복잡도/렌더 영향)으로 분리 필요성을 판단한다.
  • DOM-01 (Warning): common 승격은 3조건(2개 이상 도메인 재사용, 정책 비의존, 소유권 합의) 충족 시만 허용.

Layer And Import Boundaries

  • app/*: 라우트 엔트리/조합, 필요 시 read-only get*ForPage 호출
  • features/domain-*: 도메인 UI/쿼리/서비스/타입 소유
  • features/common: 도메인 비의존 공통 UI/훅/유틸
  • packages/*: 범용 모듈만, app 정책/화면 흐름 결정 금지

허용 import 방향:

  • app/* -> features/domain-* | features/common | packages/*
  • features/domain-* -> features/common | packages/*
  • features/common -> packages/*
  • packages/* -> packages/*

Query And State Rules

  • Query key는 all > lists > list, all > details > detail 구조를 기본으로 한다.
  • key 파라미터는 정규화 객체로 넣는다.
  • service.ts는 API I/O와 (선택) get*ForPage만 가진다.
  • 서버 상태는 TanStack Query cache를 단일 소스로 유지한다.
  • URL 공유 상태는 URL에, 전역 UI 상태는 store에, 임시 입력 상태는 local/form state에 둔다.

Type And React Rules

  • type.ts|types.ts|dto.ts의 모델 타입 선언은 type을 기본으로 한다.
  • union은 as const 상수 소스에서 파생한다.
  • 불확실 입력은 unknown으로 받고 내로잉한다.
  • components/*, hooks/*의 Props/계약 타입은 type/interface 모두 허용한다.
  • 상속/계약 가독성이 중요하면 interface ... extends ...를 우선 고려한다.
  • 부모 -> 자식 값 props는 명사형(query), 변경 요청은 on*, 자식 내부 DOM 핸들러는 handle*를 사용한다.

Exception Protocol (EX-01)

Hard Rule 예외는 PR에 아래 필드를 모두 남긴다.

md
1### Rule Exception 2- Rule ID: IMP-01 3- Owner: @author 4- Approver: @reviewer 5- Reason: external SDK constraint 6- Scope: /features/domain-a/service.ts:21 7- Expiry: 2026-04-30 8- Follow-up: remove after wrapper migration
  • 누락 필드가 있으면 예외는 무효다.
  • 만료일 도달 시 7일 내 갱신/제거한다.
  • eslint-disable는 최소 라인 범위 + 사유 주석만 허용한다.

Output Contract For Agent Responses

가능한 경우 아래 순서로 결과를 출력한다.

  1. 생성/수정 파일 목록
  2. Hard Rule 준수 체크(통과/예외)
  3. Warning/Guide 항목(필요 시 Scale Check 포함)
  4. 예외 필요 시 Rule ID + 사유 + 만료일 초안

Quick References

  • Governance: rules/00-governance/*
  • Core Rules: rules/01-architecture-foundation.md ~ rules/12-react-component-practices.md
  • AI Execution: rules/30-ai/ai-agent-rules.md
  • Enforcement Mapping: rules/40-operations/enforcement-mapping.md
  • Reference/Glossary: rules/12-react-component-practices.example.md, rules/50-reference/glossary.md

관련 스킬

Looking for an alternative to nextjs-domain-architecture or another community skill for your workflow? Explore these related open-source skills.

모두 보기

openclaw-release-maintainer

Logo of openclaw
openclaw

현지화된 요약: 🦞 # OpenClaw Release Maintainer Use this skill for release and publish-time workflow. It covers ai, assistant, crustacean workflows. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

333.8k
0
인공지능

widget-generator

Logo of f
f

현지화된 요약: Generate customizable widget plugins for the prompts.chat feed system # Widget Generator Skill This skill guides creation of widget plugins for prompts.chat. It covers ai, artificial-intelligence, awesome-list workflows. This AI agent skill supports Claude Code, Cursor, and Windsurf

149.6k
0
인공지능

flags

Logo of vercel
vercel

현지화된 요약: The React Framework # Feature Flags Use this skill when adding or changing framework feature flags in Next.js internals. It covers blog, browser, compiler workflows. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

138.4k
0
브라우저

pr-review

Logo of pytorch
pytorch

현지화된 요약: Usage Modes No Argument If the user invokes /pr-review with no arguments, do not perform a review. It covers autograd, deep-learning, gpu workflows. This AI agent skill supports Claude Code, Cursor, and Windsurf workflows.

98.6k
0
개발자