claude-code-lab

Zustand 상태 관리 라이브러리 베스트 프랙티스 가이드. create, createStore, useStore, useShallow, Slices Pattern, TypeScript, persist/devtools/immer 미들웨어

TanStack Query(React Query) 베스트 프랙티스 가이드. useQuery, useSuspenseQuery, useMutation, Query Key Factory, Cache Invalidation, SSR Prefetch

Next.js 16 App Router 개발 가이드. params Promise, Server/Client Components, Cache Components, Proxy 패턴

TailwindCSS 베스트 프랙티스 가이드. 유틸리티 클래스, 반응형 디자인, 다크 모드, 테마 커스터마이징

Emotion.js(CSS-in-JS) 베스트 프랙티스 가이드. styled 컴포넌트, css prop, Object Styles, Theming, SSR, 성능 최적화 등

Feature-Sliced Design(FSD) 아키텍처 방법론 가이드. 레이어/슬라이스/세그먼트 설계, 의존성 규칙, Public API 패턴

React/Next.js 성능 최적화 가이드. 워터폴 제거, 번들 최적화, 렌더링 개선

Playwright E2E 테스트 Page Object Model 패턴 가이드

Tailwind CSS className 순서 정렬 및 클린업 스킬

코드베이스 분석 기반 아키텍처 다이어그램 .excalidraw 파일 생성 및 PNG/SVG 내보내기

서비스 개발을 위한 아이디어 기획서 작성. 사용자와의 Q&A를 통해 서비스 컨셉, 핵심 기능, 디자인 방향을 정의

가상 페르소나 생성 및 AI 인터뷰 시뮬레이션으로 사용자 인사이트 도출

서비스 개발을 위한 제품 요구사항 정의서(PRD) 작성

코드 플로우 시각화 인터랙티브 웹 리포트 생성

슬랙 스레드 업로드를 위한 문서 정리. 회의록, 건의/제안, 보고서 양식으로 구조화

코드 품질 도구 번들: Tailwind CSS 클린업, security/performance/a11y 리뷰 에이전트, convention/architecture 검증, 리팩토링 커맨드, 코딩 룰

개발 워크플로우 도구 번들: excalidraw/slack-thread/save-context/agent-team 스킬, documentation/error-fixer/web-research/plan-verifier 에이전트, 브레인스토밍/실행/PR/브랜치/에이전트팀/sync-dev 커맨드

Figma 디자인-투-코드 자동화 번들: 디자인 분석, 구현 계획, 참조 기반 계획, 실행 스킬 및 Figma MCP 통합

Playwright E2E 테스트 자동화 번들: 테스트 계획, 테스트 생성, 실패 테스트 복구 에이전트

인터뷰 기반 에이전트 팀 구축: 복잡도×성격 매트릭스로 최적 팀 추천 및 자동 생성