puk0806/gugbab-claude - 2페이지

animation

motion 13.x (구 framer-motion) 핵심 패턴, CSS transition/keyframe, 성능 최적화, React 18/19 + Next.js App Router 대응

bundle-size-analysis

프론트엔드 번들 크기 측정·시각화·비교 방법론 — raw/gzip/brotli 차이, rollup-plugin-visualizer · vite-bundle-visualizer · webpack-bundle-analyzer 사용법, size-limit CI 임계치, 청크별 변경 전후 보고서 작성

claude-api-streaming-frontend

Claude Messages API 스트리밍 응답을 React 프론트에서 받는 패턴. SSE 이벤트 처리, ReadableStream 파싱, useState throttle, AbortController 중단, 백엔드 프록시 권장, 프롬프트 캐싱, 에러 재시도까지 포함.

cra-to-vite-migration

Create React App(CRA)에서 Vite로 마이그레이션하는 단계별 절차. 환경 변수·index.html·SVG·Jest→Vitest·tsconfig 변경 패턴 포함

dev-server-hmr-benchmarking

Vite·Webpack·Rsbuild 등 dev 서버의 cold start와 HMR(Hot Module Replacement) 지연을 정량적으로 측정하는 방법론. hyperfine·Chrome DevTools Performance· Vite HMR API(import.meta.hot)를 활용한 자동·수동 측정 절차와 측정 함정 정리.

dream-symbol-tagging

꿈 텍스트(자유 서술 한국어 문장)에서 주요 상징을 자동 추출·태깅하는 하이브리드 전략 가이드. 룰 기반 사전 매칭과 LLM·임베딩 기반 의미 매칭을 결합해 결정론적 속도와 문맥 인지 정확성을 동시에 확보한다. 한국어 형태소 처리 한계와 LLM JSON 출력 안정화 패턴을 함께 다룬다. <example>사용자: "꿈 일기 텍스트에서 '뱀'·'추락' 같은 상징을 자동으로 뽑아 태그로 붙이고 싶어요"</example> <example>사용자: "OpenAI…

monorepo-turborepo

모노레포 vs 멀티레포 선택 기준, Turborepo 구조 및 파이프라인 설정

nextjs

Next.js 16.x App Router 핵심 패턴, 데이터 페칭, Cache Components 캐싱 전략, 15→16 Breaking Changes

radix-ui

Radix UI Primitives 헤드리스 컴포넌트 — asChild/Slot, Compound Component, Controlled/Uncontrolled, data-attribute + SCSS 스타일링, 접근성 내장

rsbuild

Rsbuild — Rspack 기반 고수준 웹 애플리케이션 빌드 툴. zero-config React/Vue/Svelte 세팅, CRA/webpack 마이그레이션, Module Federation, Vite/tsup/Next.js와의 선택 기준 포함

seo-nextjs

Next.js 16 App Router SEO — Metadata API, canonical/hreflang, OpenGraph, JSON-LD, sitemap/robots

storybook

Storybook 10 컴포넌트 문서화 — ESM-only 설정, CSF 3 스토리, args/argTypes/controls, play function 인터랙션 테스트, autodocs 태그, TypeScript 타입 패턴, Vite/Next.js 프레임워크 설정, v8→v10 마이그레이션

storybook-visual-testing

Storybook 10 + @storybook/test-runner + Playwright toHaveScreenshot로 자체 호스팅(외부 SaaS 의존 없는) 시각 회귀 테스트 셋업 — preVisit/postVisit 훅, axe a11y 자동 검증, baseline 운영 정책, 모노레포 멀티 Storybook

swiper

Swiper 14.x 슬라이더/캐러셀 — React 컴포넌트 + Swiper Element, 핵심 모듈, 반응형, 성능 최적화, Next.js SSR 패턴

typescript-v5

TypeScript 5.x (5.0~5.9) 버전별 신규 기능과 tsconfig·React 타입 패턴, 그리고 TS 6.0(마지막 JS 컴파일러)·7.0(Go 네이티브) 시대에서 5.x 지식의 유효 범위와 마이그레이션 경로

vite-advanced-splitting

Vite 고급 코드 스플리팅 — manualChunks 함수형, 모바일/데스크톱 분리 빌드(mode), Gulp 빌드 훅 → Vite 플러그인 전환, vite:preloadError 재시도 처리

vite-pwa-service-worker

Vite 환경에서 PWA/Service Worker 설정 — vite-plugin-pwa, generateSW/injectManifest 전략, 기존 커스텀 SW 마이그레이션, Workbox 런타임 캐싱

webpack-vite-config-mapping

Webpack/Craco 설정을 Vite로 1:1 매핑하는 패턴. cacheGroups→manualChunks, Babel 플러그인, Webpack 플러그인 대응표, topLevelAwait, HTTPS 개발 서버

whisper-api-integration

OpenAI 음성 전사(STT) API 통합 패턴. POST /v1/audio/transcriptions multipart/form-data, 현재 권장 모델 gpt-transcribe($0.0045/min) · 실시간 gpt-live-transcribe · 레거시 whisper-1/gpt-4o-transcribe · 화자분리 gpt-4o-transcribe-diarize 선택 기준, languages=["ko"] 한국어 힌트(단수 language 대체),…

mobile-user-acquisition

Unity 2D 모바일 게임 수익화를 위한 유저 획득(UA) 실무 가이드. Google App Campaigns / Meta Ads / Apple Search Ads 3대 채널 운영, iOS 프라이버시(ATT·SKAN 4.0) 대응, LTV·CPI·ROAS 손익 계산, 크리에이티브 전략, 어트리뷰션 설정을 다룬다.

meal-recommendation-prompt

보유 식재료 기반 식단·레시피 추천 Claude 프롬프트 패턴. 소비기한 우선순위 반영, 구조화된 JSON 출력 포함.

nutrition-analysis-prompt

식단 입력 → 칼로리·영양소 분석 Claude 프롬프트 패턴. 하루 목표 대비 진행률, 구조화 JSON 출력, 한국 식품 기반.

claude-code-hook-authoring

Claude Code 훅(hooks) 작성법 — 이벤트 종류·stdin 입력 스키마·exit code 규약(0/2/기타)·stdout vs stderr·matcher 문법·settings.json 배선·타임아웃·차단형/비차단형 설계와 실전 함정(오탐·stdout 유실)을 다룬다. 훅을 새로 만들거나 기존 훅을 수정·디버깅할 때 참조.

dream-app-ab-testing-prompts

꿈 해몽 앱 시스템 프롬프트 A/B 테스트 설계 패턴 — 어떤 프롬프트가 사용자 만족도·안전·정확도가 높은가를 무작위 배정·통계 검정·점진적 롤아웃으로 결정. 안전 가드 A/B·민감정보 수집은 금지. <example>사용자: "꿈 해몽 앱에서 톤 warm vs academic 어떻게 A/B 테스트해?"</example> <example>사용자: "프롬프트 A/B 테스트 표본 크기 얼마나 필요해?"</example> <example>사용자: "Bayesian…

dream-interpretation-prompt-engineering

꿈 해몽 앱용 Claude API 프롬프트 설계 패턴 — 시스템 프롬프트 구조, few-shot 예시, 안전 가드, JSON 응답 스키마, 프롬프트 캐싱을 한국 전통 해몽 + 융/프로이트 심리학 두 관점 균형으로 다룹니다. <example>사용자: "꿈 해몽 앱에서 Claude API 시스템 프롬프트 어떻게 짜야 해?"</example> <example>사용자: "꿈 해몽 응답 JSON 스키마 설계 + 안전 가드 같이 보여줘"</example>…

dream-safety-classifier-prompts

꿈 해몽 앱용 *전용 안전 분류기* 프롬프트 패턴 — 자해·자살·트라우마·폭력 신호를 해몽 모델과 분리된 별도 Claude 호출로 분류해 이중 안전망을 구축한다. Anthropic content moderation 공식 가이드(risk-level + JSON 출력 + 카테고리 정의 + few-shot) 기반. <example>사용자: "해몽 모델 안전 가드만으로 부족한 이유랑 분리 분류기 설계 보여줘"</example> <example>사용자:…

ralph-loop

명시적 종료 조건이 있는 자율 반복 루프 워크플로우. 검증·테스트·다듬기 작업을 *통과 기준 충족까지* 반복 실행하되 max_iterations·convergence·timeout으로 무한 루프 방지. Geoffrey Huntley의 Ralph 기법을 우리 프로젝트 컨벤션에 맞게 종료 조건 중심으로 재정리한 메타 스킬

riper-workflow

복잡한 구현 작업을 Research→Innovate→Plan→Execute→Review 5단계로 분리해 실행하는 워크플로우. 각 단계 경계에서 사용자 확인을 거쳐 오버엔지니어링·방향 오류를 조기에 차단한다

spring-security-5-jwt-jjwt10

Spring Security 5.5.x + jjwt 0.10.7 레거시 JWT 인증 - WebSecurityConfigurerAdapter, OncePerRequestFilter, javax.servlet 환경

spring-security-6-jwt-jjwt12

Spring Boot 3.x + Spring Security 6.x + jjwt 0.12.x 기반 모던 JWT 인증 패턴. SecurityFilterChain Bean, 람다 DSL, jakarta.servlet, Virtual Threads 적용

unity-ui-system

Unity 6 LTS 2D 모바일 게임용 uGUI 시스템 전문 스킬. Canvas/RectTransform/TextMeshPro, 모바일 UI 패턴(팝업·무한 스크롤·광고·IAP), 성능 최적화, UI Toolkit과의 선택 기준 포함.

akrasia-scholarship-map

아크라시아(akrasia, 자제력 없음) 학술 논쟁의 핵심 구도와 주요 연구자·문헌을 빠르게 파악할 수 있는 도메인 지식 스킬. 도덕윤리교육 전공 대학원생(석/박사)이 학위논문·KCI 투고·세미나 준비 시 고대–현대–한국 학계–도덕심리학 흐름을 한 번에 짚도록 구성. <example>사용자: "아리스토텔레스의 propeteia와 astheneia 구분을 인용하려는데 출처를 알려줘"</example> <example>사용자: "데이비슨이 의지박약을 어떻게…

원문 언어: 다국어 혼합

aristotle-akrasia-vs-akolasia-distinction

아리스토텔레스 『니코마코스 윤리학』에서 akrasia(자제력없음)와 akolasia(무절제)의 5축 차이를 정밀하게 정리한 학위논문 자료 스킬. NE VII.4 1147b20-1148b14, VII.8 1150b29-1151a28, III.10-12 1117b23-1119b18 절별 분해와 표준 학자 해석(Bostock, Broadie-Rowe, Pakaluk, Hursthouse, Charles 등)을 포함. 도덕교육 적용을 위한 두 상태 차이의 함의 및…

crisis-intervention-resources-korea

한국 위기 대응 자원(자살·자해·정신건강·여성·청소년·노인·다문화) 핫라인과 앱·챗봇 안전 가드 응답 패턴 종합. 꿈 해몽·정신건강 앱 등 자가 진단/감정 콘텐츠 도메인에서 위험 신호 포착 시 안전한 자원 안내 문구를 작성할 때 참조. <example>사용자: "꿈 해몽 앱에 위기 안내 문구를 어떻게 넣을까?"</example> <example>사용자: "한국에서 자살예방 핫라인 번호가 어떻게 바뀌었지?"</example> <example>사용자: "정신건강…

relational-pattern-analysis

관계 패턴 분석 — Gottman Method 4 Horsemen·EFT(Emotionally Focused Therapy) pursuer/withdrawer cycle·NVC(Nonviolent Communication) 4단계의 학술적 정리. 꿈 해몽 앱에서 사용자가 관계 행동 패턴 통찰을 요청할 때 *일반론적 모델*을 제공하기 위한 참조 스킬. 임상 진단·치료 권고는 절대 금지.

원문 언어: 다국어 혼합

virtue-ethics-modern-revival

20세기 후반 영미 철학계에서 부흥한 현대 덕윤리(Virtue Ethics)의 주요 저자·저작·핵심 개념을 정리한 스킬. 도덕윤리교육 대학원생이 akrasia(의지 약함) 논문을 현대 덕윤리 맥락에 위치시키고, 학파별 관점을 객관적으로 비교할 때 참조한다. <example>사용자: "현대 덕윤리에서 akrasia를 어떻게 다루는지 정리해줘"</example> <example>사용자: "Anscombe부터 Annas까지 현대 덕윤리 부흥의 흐름을…

abstract-and-keywords-writing

학술 논문의 초록(Abstract)과 키워드(Keywords)를 학술지 표준에 맞게 작성하고 검색 노출(KCI·Google Scholar·PhilPapers·JSTOR)을 최적화하는 가이드. 대학원생이 KCI 등재지 또는 영문 학술지(APA/MLA/Elsevier/Springer)에 투고할 때, 논문이 검색·인용되는 빈도를 높이는 작성 전략과 셀프 체크리스트를 제공한다. <example>사용자: "akrasia 논문 초록을 KCI 등재지에 맞게 다듬고 싶어요.…

claude-code-headless

Claude Code CLI를 headless(`claude -p`) 모드로 프로그래매틱 실행하고, 구독(OAuth) 인증으로 중계 서버·샌드박스에서 사용하는 방법. stream-json 파싱, 인증 우선순위, 안전 가드 포함.

vercel-sandbox

Vercel Sandbox(@vercel/sandbox) 마이크로VM에서 CLI·에이전트를 실행하고 SSE로 출력을 중계하는 패턴. Sandbox.create/runCommand 스트리밍, Persistent Sandbox·스냅샷, 과금·Hobby 한도, 비용 최소화·안티패턴을 다룬다.

ingredient-management

식재료 관리 도메인 모델 — 보관 위치·카테고리·소비기한·수량 관리 패턴. PWA 오프라인 앱용 로컬 상태 설계 포함.