프로젝트

AI 에이전트에게 같은 바텀시트를 요청해도 드래그 처리나 애니메이션이 빠지고 디자인이 달라질 때가 있습니다. fe-skills는 구현 기준을 공유하기 위해 만든 스킬 라이브러리입니다. 패턴의 사용 시점, 기술 선택 이유, 수정할 부분과 주의사항을 예제 코드와 함께 정리했습니다. Claude Code 플러그인 마켓플레이스에서 설치할 수 있습니다.

• UI·애니메이션 스킬 29종, 설계 문답 스킬 1종
• CSS 우선 설계, 런타임 의존성 0

$ /plugin marketplace add Guksu/fe-skills
$ /plugin install fe-ui@fe-skills        # 애니메이션 · UI/UX 구현 29종
$ /plugin install fe-system@fe-skills    # 코드 짜기 전 설계 문답 1종

AI 에이전트에게 개발을 맡길 때마다 브랜치 생성, 테스트 작성, 커밋 권한에 관한 지침을 반복해서 전달해야 했습니다. guksu-harness는 이런 지침을 프로젝트의 작업 규칙으로 정리합니다. 역할별 에이전트와 작업 절차, 기록 양식을 만들고 훅으로 명령 실행을 제한합니다. Claude Code 플러그인 마켓플레이스에서 설치할 수 있습니다.

• 브랜치 · 기록 · 인계 · 배포 전 점검 스킬 9종
• 훅으로 Git 변경 · 시크릿 읽기 · 보호 브랜치 편집 차단

$ /plugin marketplace add Guksu/guksu-harness
$ /plugin install guksu-harness@guksu-harness
$ /harness 이 프로젝트에 하네스 구축해줘   # 에이전트 · 스킬 · 훅 생성

Claude Code가 컴퓨터에 남긴 기록을 읽어 토큰 사용량과 비용을 터미널에서 보여주는 도구입니다. 일별 비용, 프로젝트별 사용량, 캐시 절감액을 확인할 수 있습니다. 데이터는 외부로 보내지 않고 로컬에서만 처리하며, 설치 전에 남아 있던 기록도 집계합니다. npm에서 설치할 수 있습니다.

• 일간 · 주간 · 월간 비용과 모델별 · 프로젝트별 · 브랜치별 사용량 집계
• 요청 ID 기준 중복 제거로 정확한 비용 계산
• 히트맵 · 사용량 추이 · 세션 순위 · 캐시 절감액 · 월 예산 조회

$ tokkaebi today
✔ 파일 269개 확인 · +16건 수집 (0.0초)

오늘 사용량 · 2026-08-11 (화) · $87.27
모델별 · 프로젝트/브랜치별 표 출력

캐시 절감  $390.21 — 캐시가 없었다면 오늘 $477.48
연속 사용  2일째

유형별 문제 풀이와 오답 복습을 함께 관리하는 코딩테스트 연습 앱입니다. 로드맵을 따라 문제를 풀며 유형별 진행률과 정확도를 확인하고, 틀린 문제는 복습 큐에서 다시 풀 수 있습니다. 시간 제한이 있는 모의고사와 풀이 접근을 설명한 뒤 코딩을 시작하는 라이브 코테 모드도 제공합니다.

• 그리디 · DP · BFS/DFS 등 18개 유형, 123문제와 유형별 진행률
• 오답 복습 큐 — 틀린 문제를 모아 다시 풀기
• 모의고사 — 제한 시간 안에 제출한 풀이만 채점
• 라이브 코테 — 무작위 문제를 35분 동안 풀이, 접근 설명 후 코딩 시작

연인이나 친구와 다녀온 음식점을 함께 기록하는 앱입니다. '로그'라는 공유 공간을 만들고 초대 코드로 참여해 사진, 별점, 메모를 남깁니다. 방문한 음식점은 지도에 핀으로 표시해 다시 찾아볼 수 있습니다. React Native로 개발했으며 App Store에서 운영 중입니다.

• 초대 코드로 참여하는 공유 공간 '로그' — 최대 5명
• 카카오 장소 검색으로 위치·주소 입력, 사진 최대 5장과 별점·방문일·메모 기록
• 기록한 맛집 · 주변 음식점 · 위시리스트를 한 지도에서 확인

앱의 웹뷰에서 키보드와 스크롤 동작을 다루기 위한 헤드리스 UI 라이브러리입니다. 키보드가 열릴 때 화면 배치가 밀리거나 스크롤이 네이티브 동작과 어긋나는 문제에 대응합니다. Three.js 카메라 모델로 패널을 넘기는 페이저를 구현했으며, 코어와 React·Vue 패키지로 제공합니다.

• CSS3DRenderer 카메라 모델 기반 가로·세로 페이저와 핀치 줌 (ScrollContainer)
• visualViewport로 iOS 키보드 레이아웃 밀림 방지 (StableInput)
• 네이티브 바운스와 충돌 없는 풀투리프레시 상태 머신 (PullToRefresh)
• 소프트 키보드·세이프에어리어 변화를 감지하는 훅 (useVirtualKeyboard · useSafeArea)

"버그가 났어요"라는 제보만으로는 당시 상황을 재현하기 어렵습니다. qa-recorder는 최근 20분 동안의 화면(DOM) 변화와 네트워크·콘솔 로그를 백그라운드에서 기록합니다. 버그 발생 직후 버튼을 누르면 기록을 HTML 리포트로 내보내 당시 화면과 요청을 함께 확인할 수 있습니다. 브라우저에서 동작하는 라이브러리입니다.

• rrweb 기반 DOM 세션 리플레이로 당시 화면 재생
• HAR 1.2 포맷 네트워크 캡처 (fetch · XHR 인터셉트, 최대 100개)
• error · warn · onerror · unhandledrejection 자동 수집
• Authorization · Cookie 등 민감한 헤더 자동 마스킹

용량이 큰 영상을 브라우저에서 압축하는 웹 앱입니다. WebCodecs를 지원하는 환경에서는 GPU 가속 인코딩을 사용하고, 지원하지 않으면 FFmpeg.wasm으로 전환합니다. 해상도와 품질을 조절할 수 있으며, 영상은 서버에 업로드하지 않고 기기 안에서 처리합니다.

• 브라우저 지원 여부에 따라 WebCodecs · FFmpeg.wasm 엔진 선택
• H.264 인코딩 · CRF 18~40 품질 슬라이더
• 원본 / 1080p / 720p / 480p 해상도 선택
• 실시간 진행률 표시 · 영상은 브라우저 밖으로 나가지 않음

환경변수와 JSON 설정을 하나의 스키마로 검증하는 도구입니다. 문자열로 입력된 값을 숫자나 불리언으로 자동 변환하고, 설정의 오타와 타입 오류를 배포 전에 확인할 수 있습니다. 민감한 값을 가려서 출력하며, 설정을 검증·생성·비교하는 CLI도 제공합니다.

• 단일 스키마로 env · JSON 설정 동시 검증
• 문자열 → 숫자 · 불리언 자동 타입 변환
• 민감한 값을 가려서 출력 (sk-****xxxx)
• 별도 설정 없이 스키마에서 TypeScript 타입 추론