클로드 코드 스킬 추천 5개: 설치 방법·실전 프롬프트·코드 예시

[대상] src/components 안의 UI를 확인해줘.
[목표] 사용자가 상태 변화를 더 쉽게 알아차리게 해줘.
[제약] 기존 디자인 토큰을 유지하고 과한 효과는 제외해줘.
[결과] 파일과 줄 번호, 이유, 적용할 값 순서로 정리해줘.

npx skills add emilkowalski/skills --skill find-animation-opportunities

find-animation-opportunities 스킬을 사용해 현재 프로젝트를 점검해줘.

대상:
- src/components
- src/app/dashboard

목표:
- 상태가 갑자기 바뀌어 사용자가 흐름을 놓치는 곳을 찾아줘.
- 버튼 클릭 피드백이 없는 곳을 찾아줘.
- 패널, 모달, 토스트가 등장한 위치와 사라지는 방향이 어긋나는지 확인해줘.

제약:
- 코드는 수정하지 마.
- 단순히 예뻐 보이기 위한 애니메이션은 제외해줘.
- 최대 5개만 중요도순으로 제안해줘.
- 기존 애니메이션 라이브러리와 디자인 토큰을 우선 사용해줘.

각 제안마다 파일과 줄 번호, 움직임의 목적, duration, easing,
시작 상태와 종료 상태를 적어줘.

대상: src/components/SaveButton.tsx:42
목적: 클릭 피드백
제안: active 상태에서 scale(0.97)
시간: 160ms
곡선: ease-out
이유: 저장 요청을 눌렀다는 즉각적인 피드백이 없음

.saveButton {
  transition: transform 160ms ease-out;
}

.saveButton:active {
  transform: scale(0.97);
}

npx skills add emilkowalski/skills --skill pick-ui-library

pick-ui-library 스킬을 사용해 이 프로젝트의 토스트 라이브러리를 골라줘.

먼저 package.json과 기존 UI 코드를 확인해줘.
요구사항은 다음과 같아.

- React와 TypeScript를 사용 중이야.
- 저장 성공과 실패 메시지가 필요해.
- 키보드 접근성과 화면 읽기 도구를 지원해야 해.
- 번들 크기가 과하게 커지면 안 돼.
- 유지보수가 활발한 라이브러리를 원해.

후보를 여러 개 나열하지 말고 가장 적합한 하나만 선택해줘.
선택 이유, 설치 명령어, 최소 사용 예시, 도입할 때 주의할 점을 알려줘.
아직 코드는 수정하지 마.

npm install sonner

async function handleSave() {
  try {
    await saveData();
    toast.success("저장했습니다.");
  } catch {
    toast.error("저장하지 못했습니다.");
  }
}

방금 선택한 라이브러리로 구현 계획을 세워줘.

- Toaster를 어느 레이아웃에 한 번만 배치할지 정해줘.
- 기존 alert 호출을 교체할 파일을 찾아줘.
- 성공, 실패, 로딩 메시지의 사용 기준을 정해줘.
- 먼저 변경할 파일 목록과 이유만 보여주고 내 확인을 기다려줘.

npx skills add mattpocock/skills --skill prototype

prototype 스킬을 사용해 다음 질문에 답하는 일회용 UI 프로토타입을 만들어줘.

질문:
대시보드에서 사용자가 이번 달 운동 달성률과 다음 운동을
동시에 가장 빠르게 파악할 수 있는 구성은 무엇인가?

조건:
- 같은 데이터를 사용한 서로 다른 시안 3개를 만들어줘.
- 하단 전환 바에서 시안을 즉시 바꿀 수 있게 해줘.
- 기존 프로젝트의 폰트와 색상 토큰만 사용해줘.
- 데이터 저장, API 연결, 테스트, 예외 처리는 만들지 마.
- PROTOTYPE임을 파일 상단과 화면에 표시해줘.
- 실행 명령어는 하나만 제공해줘.

완성한 뒤 각 시안의 장단점과 확인해야 할 질문을 정리해줘.
프로덕션 코드에는 합치지 마.

prototype 스킬을 사용해 구독 상태 모델을 검증해줘.

확인할 질문:
trial 사용자가 결제에 실패한 뒤 재시도하고 취소할 때
상태 전이가 모순 없이 동작하는가?

상태: trial, active, past_due, canceled
동작: start_trial, pay, payment_failed, retry, cancel

요구사항:
- 터미널에서 동작을 선택할 수 있게 해줘.
- 매 동작 뒤 전체 상태와 가능한 다음 동작을 출력해줘.
- 상태는 메모리에만 보관해줘.
- 테스트, 데이터베이스, 추상화는 만들지 마.
- 잘못된 전이를 발견하면 마지막에 목록으로 정리해줘.

npx skills add emilkowalski/skills --skill animate

animate 스킬을 사용해 설정 패널의 열기와 닫기 애니메이션을 구현해줘.

대상:
- src/components/SettingsPanel.tsx
- 해당 스타일 파일

목표:
- 패널이 버튼에서 이어져 나오는 것처럼 느껴져야 해.
- 열기와 닫기 도중 다시 클릭해도 자연스럽게 방향을 바꿔야 해.
- 배경 콘텐츠는 움직이지 않아야 해.

제약:
- 기존 패키지와 디자인 토큰을 먼저 확인해줘.
- 새 라이브러리는 꼭 필요할 때만 추가해줘.
- transform과 opacity를 우선 사용해줘.
- prefers-reduced-motion도 지원해줘.
- scale(0)에서 시작하지 마.
- 구현 후 변경한 duration과 easing의 이유를 설명해줘.

.popover {
  opacity: 1;
  transform: scale(1);
  transform-origin: var(--transform-origin, top right);
  transition:
    opacity 180ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

@starting-style {
  .popover {
    opacity: 0;
    transform: scale(0.97);
  }
}

@media (prefers-reduced-motion: reduce) {
  .popover {
    transform: none;
    transition: opacity 120ms ease-out;
  }

  @starting-style {
    .popover {
      opacity: 0;
      transform: none;
    }
  }
}

방금 구현한 애니메이션을 다시 확인해줘.

- 빠르게 두 번 클릭했을 때 처음부터 재시작하지 않는지 확인해줘.
- 열기와 닫기의 이동 경로가 대칭인지 확인해줘.
- 키보드로 조작해도 포커스가 올바른지 확인해줘.
- 느린 기기에서 레이아웃 변경을 반복해서 일으키는 속성이 없는지 확인해줘.
- 문제가 있으면 수정 전과 수정 후 코드를 비교해서 보여줘.

npx skills add yetone/kill-ai-slop --skill kill-ai-slop

kill-ai-slop 스킬을 사용해 이 프로젝트를 검사해줘.

대상:
- src
- README.md

진행 방식:
1. 먼저 검사만 하고 코드는 수정하지 마.
2. 발견한 항목을 파일과 줄 번호로 정리해줘.
3. 사용자 경험에 미치는 영향이 큰 순서로 묶어줘.
4. 브랜드 의도로 보이는 표현은 자동으로 제거하지 말고 따로 표시해줘.
5. 각 항목마다 왜 AI가 만든 것처럼 보이는지 설명해줘.
6. 수정한다면 무엇으로 바꿀지 한 줄씩 제안해줘.

node skill/scripts/scan.mjs path/to/project
node skill/scripts/scan.mjs path/to/project --json

slop 15  이모지 도배         src/App.tsx:1254
slop 19  유리 효과           src/App.tsx:1301
slop 26  튕기는 호버         src/App.tsx:1311
slop 30  01/02/03 번호       src/App.tsx:757

검사 결과 중 아래 항목만 수정해줘.

- 과한 그라데이션 글자
- 카드 안에 다시 들어간 카드
- 의미 없이 반복되는 알약 배지
- “단순한 X가 아니라 Y입니다” 형식의 문장

제약:
- 브랜드 색상과 정보 구조는 유지해줘.
- 디자인을 밋밋하게 만드는 것이 아니라 계층을 명확하게 만들어줘.
- 한 번에 한 유형씩 수정하고 변경 내용을 보여줘.
- 각 단계가 끝날 때 검사기를 다시 실행해 남은 항목을 알려줘.
- 내가 확인하기 전에는 다음 유형으로 넘어가지 마.