ui-poc-workspace

워크숍 사전 준비 가이드(packages/guide/site/ 의 index.html + guide-images/)를 S3에 싱크하고 CloudFront 캐시를 무효화해 배포한다. "가이드 배포", "가이드 올려줘", "S3에 싱크", "CloudFront invalidate", "가이드 사이트 업데이트", "캐시 무효화", "가이드 반영" 같은 요청이나, packages/guide/site/ 의 HTML·이미지를 수정한 뒤 라이브에 반영하려는 모든 상황에서 반드시 이 스킬을 사용한다. CDK 전체 스택(deploy/destroy)을 건드리지 않고 콘텐츠만 빠르게 밀어넣는 경량 경로다. 버킷명·배포 ID는 CloudFormation 스택 출력에서 자동 조회하므로 사용자가 ID를 외울 필요가 없다.

Nuxt/Vue 기반 웹 화면을 chrome-devtools-mcp 플러그인으로 직접 보고 고치는 비주얼 디버깅 워크플로. 사용자가 화면이 이상하다고 말하거나, 스크린샷·콘솔에러·레이아웃·반응형·접근성·네트워크·성능 문제를 보고할 때, 또는 단순히 "화면 봐줘", "지금 어떻게 보여?", "PRD/ADR 대로 됐는지 확인해줘" 같은 요청을 받으면 반드시 이 스킬을 트리거한다. localhost dev 서버(보통 :3000)에서 동작하는 PoC 를 디버깅하기 위해 만들어졌고, 추측으로 코드를 고치지 않고 **브라우저 실제 상태를 먼저 확인한 뒤** 수정하도록 강제한다.

워크숍 진행 상태를 Airtable에 공유합니다. 초기 설정(키 등록), 단계별 상태 보고, 전체 현황 조회, 진행자용 테이블 생성을 모두 포함합니다.

프로젝트 루트의 DESIGN.md(디자인 시스템 단일 소스 오브 트루스)를 만들고 유지한다. 웹 패키지(packages/web)에서 색상, 타이포, 간격, 테마, 컴포넌트 스타일, 다크모드, 디자인 토큰, Tailwind 설정 등 **UI 외형과 관련된 어떤 변경 요청이든** 받으면 반드시 이 스킬을 먼저 트리거해서 DESIGN.md를 먼저 업데이트하고 사용자 확인을 받은 뒤에 실제 코드를 수정한다. "버튼 색 바꿔줘", "폰트 키워줘", "다크모드 톤 조정", "카드 radius 좀 둥글게", "primary 컬러를 파랑으로" 같은 요청은 겉보기엔 단순 CSS 수정이지만 전부 디자인 시스템 변경이므로 이 스킬이 관여해야 한다. DESIGN.md가 아직 없으면 이 스킬이 프로젝트를 스캔해 초안을 만든다. Google Stitch DESIGN.md(2026 오픈소스) 스펙을 따른다.