디자인 레퍼런스 변환기 (Vibes)

무엇을 해주나

• 완성된 design.html(스타일 포함 정적 목업)을 재해석하지 않고 React/JSX로 기계적으로 변환합니다.
• class→className, for→htmlFor, 인라인 스타일 문자열→객체 등 변환 규칙을 표로 제공하고, <style> 블록은 한 글자도 바꾸지 않고 그대로 복사하도록 강제합니다.
• 반복 목록·입력값 등 동적 영역만 골라 TinyBase 훅(useRowIds, useCell, useAddRowCallback)으로 연결합니다.
• VibesOS 템플릿의 VibesSwitch/VibesPanel과 CSS가 충돌하지 않도록 셀렉터 스코프 지침과 다크모드 오버라이드 방법을 안내합니다.
• 마지막에 bun scripts/assemble.js app.jsx index.html로 조립하고, 시각 비교 체크리스트로 검수합니다.

이런 분께 추천

• VibesOS(Vibes 앱 템플릿 + TinyBase) 기반으로 개발하는 분
• 디자이너가 준 HTML 목업이 구현 과정에서 자꾸 달라지는 문제를 겪는 분
• "픽셀 그대로" 재현이 중요한 프로토타입/데모를 만드는 분

활용 예시

1. 디자이너가 준 design.html을 건네고 "이 디자인 그대로 Vibes 앱으로 만들어줘"라고 요청 → CSS는 그대로, 목록만 TinyBase 데이터로 치환.
2. 정적 <ul> 목록을 useRowIds('items').map(...) 형태의 반응형 목록으로 변환.
3. 정적 폼(<input>, <button>)을 값·onChange가 연결된 controlled form + useAddRowCallback으로 전환.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/popmechanic/VibesOS/HEAD/skills/design/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 popmechanic/VibesOS 의 skills/design 폴더를 내 ~/.claude/skills/popmechanic-design/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.