npx claudepluginhub hbs9312/hbs9312-plugins --plugin frontflowThis skill uses the workspace's default tool permissions.
현재 이 스킬은 자동 스크린샷 비교의 설정 가이드를 제공합니다.
Guides Next.js Cache Components and Partial Prerendering (PPR): 'use cache' directives, cacheLife(), cacheTag(), revalidateTag() for caching, invalidation, static/dynamic optimization. Auto-activates on cacheComponents: true.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Share bugs, ideas, or general feedback.
현재 이 스킬은 자동 스크린샷 비교의 설정 가이드를 제공합니다. 실제 자동 비교 기능은 Phase 2에서 구현 예정입니다.
## Chromatic으로 시각 회귀 테스트 설정
1. 설치
npm install --save-dev chromatic
2. package.json에 스크립트 추가
"chromatic": "chromatic --project-token=YOUR_TOKEN"
3. CI에서 자동 실행
PR마다 Storybook 스크린샷을 캡처하고
이전 버전과 비교하여 시각적 변경을 감지
4. Figma 비교는 수동
Chromatic의 스크린샷 + Figma 캡처를 나란히 비교
## Percy로 시각 테스트
1. 설치
npm install --save-dev @percy/cli @percy/storybook
2. 실행
percy storybook http://localhost:6006
3. Percy 대시보드에서 diff 확인
향후 이 스킬이 할 것: