클로드스킬마트스킬 둘러보기스킬이 뭐예요?
 
← 목록으로

Angular 아키텍트

Angular 17+ standalone 컴포넌트, 시그널, NgRx, RxJS 패턴을 엔터프라이즈 수준으로 설계·구현해주는 스킬입니다.

개발·코딩중급★ 10,938⑂ 1,024AI 점수 8/10마지막 업데이트: 2026. 8. 7.

무엇을 해주나

Claude를 시니어 Angular 아키텍트처럼 동작하게 만드는 스킬입니다.

  • Angular 17+ standalone 컴포넌트 생성 (OnPush 변경 감지 + input.required() / output() / computed() 시그널 API)
  • 라우팅 설계: lazy loading, 가드, 리졸버 구성
  • NgRx 상태 관리: 액션/리듀서/셀렉터/이펙트, 엔티티 어댑터 구성 및 Redux DevTools로 스토어 흐름 검증
  • RxJS 패턴: takeUntilDestroyed로 구독 해제, 에러 핸들링 강제
  • 성능 최적화: 프로덕션 빌드로 번들 크기 확인 및 회귀 감지
  • 테스트: TestBed 기반 유닛·통합 테스트, 커버리지 85% 이상 목표

주제별로 references/components.md, rxjs.md, ngrx.md, routing.md, testing.md 문서를 필요할 때만 불러오는 구조라 컨텍스트 낭비가 적습니다.

이런 분께 추천

  • Angular 15~16 스타일(NgModule 기반)에서 17+ standalone/시그널 구조로 넘어가는 팀
  • NgRx를 도입했지만 액션·이펙트·셀렉터 구조가 팀마다 달라 일관성이 없는 프로젝트
  • 구독 누수, any 남용, 테스트 누락 같은 고질적 문제를 코드 리뷰 규칙으로 강제하고 싶은 리드 개발자

활용 예시

  1. "사용자 카드 컴포넌트를 standalone + 시그널로 만들어줘" → OnPush 전략, input.required<string>(), computed() 기반 파생 상태가 적용된 컴포넌트와 테스트 파일을 함께 생성합니다.
  2. "users 기능에 NgRx 스토어를 붙여줘" → load/success/failure 액션, 불변성을 지키는 리듀서, feature 셀렉터, HTTP 이펙트 세트를 한 번에 만들어 줍니다.
  3. "이 컴포넌트의 메모리 누수를 잡아줘" → 수동 subscribe를 takeUntilDestroyed(destroyRef) 또는 async 파이프로 리팩터링하고, *ngFor에 trackBy를 추가합니다.

· · · 설치 가이드 · · ·

Claude 앱에 설치 (터미널 필요 없음)
  1. 아래 버튼으로 ZIP 파일을 받으세요.
  2. Claude 설정 → Capabilities에서 '코드 실행 및 파일 생성'을 켭니다. (한 번만)
  3. Claude에서 Customize → Skills → + → '스킬 업로드'를 누르고 받은 ZIP을 올립니다.
↓ ZIP 내려받기
Claude Code에 설치

Claude에게 맡기기 — 아래 문장을 Claude Code에 붙여넣으세요

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 Jeffallan/claude-skills 의 skills/angular-architect 폴더를 내 ~/.claude/skills/angular-architect/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.

직접 명령으로 설치하기

git clone https://github.com/Jeffallan/claude-skills.git && mkdir -p ~/.claude/skills && cp -r claude-skills/skills/angular-architect ~/.claude/skills/

⚠ 제3자가 만든 스킬입니다. 설치 전 원본 저장소를 한 번 확인하세요.

  1. 터미널을 엽니다.
  2. 스킬 저장소를 내려받습니다: git clone https://github.com/Jeffallan/claude-skills.git
  3. 스킬 폴더가 없으면 만듭니다: mkdir -p ~/.claude/skills
  4. 이 스킬만 복사합니다(참조 문서까지 함께 복사되도록 폴더 전체를 복사하세요): cp -r claude-skills/skills/angular-architect ~/.claude/skills/
  5. ls ~/.claude/skills/angular-architect로 SKILL.md와 references/ 폴더가 있는지 확인합니다.
  6. Claude Code를 재시작한 뒤 "Angular 17 standalone 컴포넌트 만들어줘"처럼 요청하면 스킬이 자동으로 활성화됩니다.
GitHub에서 원본 보기 ↗라이선스: MIT