Community생산성 & 협업github.com

kikita-create-angular-app

Claude Code / Codex용 에이전트 스킬: 최신 안정 Angular 프로젝트를 생성하고, 자체 유지 관리가 가능한 완전한 .agents/ 문서 트리를 구축하거나 기존 프로젝트에 해당 트리를 추가/업데이트합니다.

kikita-create-angular-app란 무엇인가요?

이 스킬은 AI 에이전트(Claude Code, Codex 등)가 작업하는 Angular 프로젝트에 대해 완전하고 자체 유지 관리가 가능한 문서 트리(.agents/)를 생성하여, 에이전트가 항상 정확하고 최신의 정보를 기반으로 작업할 수 있도록 합니다. 새로운 Angular 프로젝트를 부트스트랩하거나 기존 프로젝트(타인이 만든 프로젝트 포함)에 대해 문서 트리를 생성/업데이트할 수 있습니다. 사용자에게 CSS 전처리기, UI 라이브러리, 테스트 프레임워크, SSR, i18n 등 주요 설정을 질문하여 프로젝트에 맞는 맞춤형 문서를 생성합니다. 또한 MCP 서버 설치, Git 정책 설정, 패키지 매니저 선택 등 개발 환경 구성을 지원하며, 생성된 문서 트리는 지속적으로 업데이트되어 프로젝트 상태와 동기화를 유지합니다.

지원 대상✓Claude Code✓Codex CLI~Cursor
npx skills add kikita-labs/kikita-create-angular-app

Installed? Explore more 생산성 & 협업 skills: steipete/gemini, steipete/gh-issues, steipete/skill-creator · View all 6 →

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

kikita-create-angular-app은(는) 무엇을 하나요?

새로운 Angular 프로젝트를 부트스트랩하고 AGENTS.md / .agents/ 문서 트리를 생성하여, 이후 프로젝트에서 작업하는 모든 AI 에이전트(Claude Code, Codex 등)가 완전하고 자체 유지 관리 가능한 진실의 원천을 가질 수 있도록 합니다.

0. 모드 감지 (항상 먼저 수행)

대상 디렉토리의 세 가지 가능한 상태 — 다음 순서로 확인합니다:

  1. .agents/.kikita-scaffold.json 존재 → 이 프로젝트는 이미 이 스킬로 스캐폴딩되었거나 채택되었습니다. update.md를 따르십시오 — 설문을 다시 실행하지 말고, 다시 스캐폴딩하지 말고, adopt.md를 다시 실행하지 마십시오. update.md는 최신 템플릿을 가져오고, 기록된 커밋 이후의 차이점을 비교하며, 프로젝트의 (사용자 정의되었을 수 있는) .agents/ 파일에 변경 사항을 병합합니다.
  2. 비어 있거나 거의 빈 디렉토리 (package.json 없음, angular.json 없음, 아마도 .git//방금 생성한 README만 있을 수 있음) → 새 초기화. 아래 섹션 1을 계속 진행한 후, plan.md를 따릅니다.
  3. 스캐폴딩 기록이 없는 기존 프로젝트 (package.json/angular.json 존재, .agents/.kikita-scaffold.json 없음) → 다른 사람의 (또는 이전의, 이 스킬 이전) Angular 프로젝트입니다. plan.md를 실행하지 마십시오 — 빈 디렉토리를 가정하고 실제 프로젝트에 ng new를 시도합니다. 대신 adopt.md를 따르십시오: 실제로 있는 것을 기준으로 .agents/ 트리를 생성하고, 기존 설정에서 설문 답변을 추론하며 새 도구를 스캐폴딩하지 않고, 이미 존재하는 것을 변경하기 전에 묻습니다.

0.5 전제 조건 (새 초기화 전용)

  • 작업 디렉토리가 비어 있거나 사용자가 명시적으로 여기서 초기화하기를 원하는지 확인합니다.
  • 확인했을 때 디렉토리가 비어 있지 않으면 중단하고 위의 사례 3(adopt.md)으로 라우팅하고, 사용자에게 단순히 "여기서 초기화해도 괜찮습니다"라고 확인하도록 요청하지 마십시오. 실제로 필요한 것은 adopt 흐름입니다.

1. 설문 (파일 시스템을 건드리기 전에 항상 질문)

여기서부터 plan.md를 단계별로 따릅니다. 설문을 건너뛰지 마십시오. MCP 설치를 건너뛰지 마십시오. 완료되면 사용자에게 완료를 알리기 전에 checklist.md를 실행합니다.

사용자에게 한 번에 한 라운드로 질문합니다:

  1. CSS: 네이티브 CSS (사용자 정의 속성), SCSS, 또는 Tailwind CSS?
    • Tailwind는 구조적으로 다른 두 가지와는 다른 브랜치입니다: @layer {{PREFIX}}.* 체계 없음, 수동 :root 토큰 없음, SCSS 믹스인 없음 — templates/.agents/code-style/css-architecture.md, component-structure.md, templates/.agents/architecture/folder-structure.md의 CSS=Tailwind 스캐폴드 블록을 참조하십시오.
  2. UI 라이브러리: @kikita-labs/ui, Taiga UI, PrimeNG, 또는 없음 (로컬 토큰 기반 UI 세트 구축)?
    • 라이브러리가 선택된 경우: ng add 스키매틱 및/또는 MCP 서버를 제공하는지 확인합니다. 스키매틱을 선호합니다. MCP가 있으면 설치합니다 (plan.md 4단계 참조).
  3. 테스트: 없음, 단위 테스트만, E2E만, 또는 둘 다? 어떤 러너 (Vitest/Jasmine+Karma는 새 Angular에서 사용 중단 — Vitest 선호; E2E는 Playwright)?
  4. SSR: 이 앱이 서버 렌더링(Angular SSR / 하이드레이션)됩니까, 아니면 클라이언트 전용입니까?
    • .agents/architecture/platform-adapter.md 생성 여부를 결정합니다.
  5. i18n: 이 프로젝트에 여러 로케일이 필요합니까 (@angular/localize 또는 런타임 i18n 라이브러리)? 필요하다면 어떤 접근 방식?
    • .agents/i18n.md 생성 여부를 결정합니다.
  6. 공개 API에 대한 JSDoc: 내보내진 모든 심볼에 필수 JSDoc을 적용할지, 건너뛸지?
    • .agents/agent-surface.md 생성 여부를 결정합니다 (권장 기본값: 예).
  7. 프로젝트 접두사: 컴포넌트/디렉티브용 짧은 케밥 케이스 선택자 접두사.
  8. Git 정책: 에이전트가 매번 묻지 않고 커밋 및 푸시할 수 있습니까, 아니면 모든 커밋/푸시가 확인되어야 합니까?
  9. 패키지 매니저: npm, pnpm, 또는 yarn? 기본 권장 사항: pnpm (공유 컨텐츠 주소 지정 저장소를 통한 더 빠르고 디스크 효율적이며 더 엄격한 종속성 해결). 사용자가 다른 것을 요청하는 경우에만 기본값을 재정의합니다.
  10. Git 원격: 사용자가 이미 푸시할 리포지토리 URL을 가지고 있습니까? 있으면 기록합니다 — git remote add origin <url>은 git init 직후에 실행됩니다 (plan.md 9단계 참조). URL이 제공되지 않으면 건너뜁니다. 사용자가 나중에 직접 원격을 연결합니다.

모든 답변을 기록합니다 — 답변은 스캐폴딩과 생성할 문서 파일을 모두 결정합니다. 절대 조용히 기본값을 가정하지 마십시오. 사용자가 질문을 건너뛰면 해당 질문에 대해 다시 질문합니다. 이 스킬은 단일 Angular 프로젝트를 대상으로 하며, 모노레포가 아닙니다 — 사용자가 모노레포/Nx 워크스페이스를 원하면 이 스킬이 해당 범위를 다루지 않는다고 말하고 즉시 중단하고 즉흥적으로 진행하지 마십시오.

2. 생성

plan.md를 따릅니다. templates/에서 대상 프로젝트로 파일을 복사합니다. 여기에는 도트 파일(.gitignore, .editorconfig, .prettierrc, .prettierignore, .nvmrc, .vscode/extensions.json)이 포함됩니다.

설문 답변에 대해 두 가지 다른 일이 발생합니다. 혼동하지 마십시오:

  • 텍스트 자리 표시자 — 모든 {{TOKEN}}을 실제 값으로 찾아 바꾸고 남기지 않습니다: {{PREFIX}}, {{PROJECT_NAME}}, {{CSS}}, {{CSS_EXT}}, {{UI_LIB}}, {{UI_LIB_MCP_NAME}}, {{UI_LIB_MCP_PURPOSE}}, {{TESTS}}, {{GIT_POLICY}}, {{PACKAGE_MANAGER}}, {{NODE_VERSION}}, {{I18N_APPROACH}}, {{DATE}}.
  • 포함 게이트 — SSR, i18n, 필수 JSDoc, UI 라이브러리 및 CSS 엔진 답변은 자리 표시자를 채우지 않습니다. 대신 전체 파일(또는 내부의 <!-- SCAFFOLD --> 표시 블록)이 복사될지 여부를 결정합니다. "아니오" 답변 (또는 CSS의 경우 선택되지 않은 두 엔진)은 파일/블록이 빈 문자열로 채워지는 것이 아니라 삭제됨을 의미합니다. 게이트된 파일은 유지될 때 AGENTS.md / 관련 README에서 여전히 연결되어야 하며, 건너뛸 때 링크가 제거되어야 합니다.

3. 확인

성공을 보고하기 전에 checklist.md를 완전히 실행합니다.

문서 구조에 대한 참고 사항 (한 번 읽고 템플릿/을 문자 그대로 따르십시오)

  • CLAUDE.md는 항상 AGENTS.md를 가리키는 한 줄짜리 스텁입니다.
  • AGENTS.md는 필수 진입점입니다: 짧은 "필독" 목록과 절대적인 규칙을 프로젝트 루트에 배치합니다.
  • .agents/README.md는 .agents/ 아래의 모든 것에 대한 평면 인덱스입니다 — 문서 트리에 대한 배럴 index.ts에 해당합니다. 모든 루트 문서와 모든 하위 폴더 README가 여기서 연결됩니다. 조건부 파일(i18n, agent-surface, platform-adapter)이 추가되거나 건너뛸 때 동기화 상태를 유지합니다.
  • 진정으로 하나의 짧은 문서로 충분한 주제는 .agents/*.md에 평면으로 유지됩니다 (workflow, git-policy, documentation, mcp, testing-and-quality, agent-surface, refactoring, progress, i18n, accessibility).
  • 여러 개의 작은 문서로 분기되는 주제는 자체 README.md 허브가 있는 하위 폴더를 얻습니다: .agents/code-style/, .agents/architecture/, .agents/shared/, .agents/core/, .agents/decisions/. 이것은 kikita-ui/-docs(완전히 평면을 유지함)와의 의도적인 차이입니다. 이 스킬의 사양이 스캐폴딩 후에도 계속 성장할 구성 요소별 및 관심사별 재사용 문서를 요구하기 때문입니다.
  • .agents/shared/README.md는 src/app/shared/ 아래의 모든 것을 등록하며, 종속성 모양에 따라 분할됩니다: shared/ui/ (컴포넌트/디렉티브/파이프, Angular 데코레이트됨) 및 shared/utilities/ (일반 함수, Angular 가져오기 없음 — ESLint restricted-import 규칙으로 적용됨). SCSS가 선택된 경우 SCSS 믹스인은 styles/mixins/에 있으며 shared/ 아래에 있지 않습니다. .agents/core/README.md는 src/app/core/ 아래의 앱 전체 싱글톤(서비스/가드/인터셉터)을 등록합니다. 둘 다 "components"로 명명되지 않았습니다 — 둘 다 컴포넌트 이상을 다루므로 명명된 것입니다.
  • .agents/decisions/README.md는 짧은 ADR이 필요한 시기(계층 방향, 상태 소유권, 라우팅 전략, 공개 별칭 체계)를 설명합니다 — 항상 생성되며, ADR 파일 없이 시작됩니다. AGENTS.md는 항상 읽을 목록이 아닌 조건부 "구조적 변경용" 그룹 아래에 연결합니다 — shared//core/ "컴포넌트 작업용" 그룹과 동일한 패턴입니다.
  • 추적된 모든 파일 콘텐츠(JSDoc 포함)는 영어만 사용합니다. 키릴 문자, 모지바케가 없습니다.
  • .agents/의 모든 문서는 kikita-ui의 angular-code-style.md와 같이 명령형, 짧고, 예제 기반이며, 검토/확인 체크리스트로 끝나야 합니다.

관련 스킬