windowook's Claude Code Lab Skills

프론트엔드 개발에서 자주 사용하는 클로드 코드 스킬을 공유합니다.

📖 사용법

스킬 & 번들 목록 보기

npx windowook-skills list
pnpm dlx windowook-skills list
yarn dlx windowook-skills list
bunx windowook-skills list

개별 스킬 설치

npx windowook-skills install <스킬 이름>

번들 설치

npx windowook-skills install --bundle <번들 이름>

모든 스킬 설치

npx windowook-skills install --all

📦 번들

| 번들 | 설명 | 포함 스킬 | | ----------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------ | | analysis | 코드 분석 & 시각화 스킬 그룹 | code-flow-report, excalidraw | | practical | 범용 실무 스킬 그룹 | save-context, slack-thread, clean-tailwind, execute-figma-plan, figma-plan, figma-reference-plan |

⚡️ 개별 스킬

| 스킬 | 설명 | | ---------------------- | --------------------------------------------- | | code-flow-report | 코드 플로우 시각화 리포트 생성 | | excalidraw | Excalidraw 아키텍처 다이어그램 생성 | | save-context | 작업 컨텍스트 저장 및 복구 | | slack-thread | Slack 스레드용 문서 정리 (회의록/건의/보고서) | | clean-tailwind | Tailwind CSS 클래스 순서 정렬 | | execute-figma-plan | Figma 구현 계획서 실행 | | figma-plan | Figma 디자인 분석 → 구현 계획서 작성 | | figma-reference-plan | Figma + 참조 코드 기반 구현 계획서 작성 |

*figma 플랜 스킬 2개는 설치하면 'figma-analyzer' 서브 에이전트도 자동으로 설치됩니다.

📍 설치 위치

스킬은 현재 디렉토리의 .claude/skills/ 폴더에 설치됩니다.

your-project/
└── .claude/
    └── skills/
        └── excalidraw/    # 설치된 스킬
            ├── SKILL.md
            └── references/

💡 예시

# 개별 스킬 설치
npx windowook-skills install excalidraw

# 코드 분석 번들 설치
npx windowook-skills install --bundle analysis

# 실무 번들 설치
npx windowook-skills install --bundle practical

# 전체 설치
npx windowook-skills install --all