ui-skills은(는) 무엇을 하나요?
라이브 웹사이트를 실제 계산된 스타일(스크린샷이 아닌)에서 프로덕션 준비가 완료된 React + Tailwind 컴포넌트로 리버스 엔지니어링하는 Claude Code 플러그인입니다.
라이브 웹사이트를 실제 계산된 스타일(스크린샷이 아닌)에서 프로덕션 준비가 완료된 React + Tailwind 컴포넌트로 리버스 엔지니어링하는 Claude Code 플러그인입니다.
이 스킬은 Claude Code 플러그인으로, 라이브 웹사이트의 URL을 입력받아 해당 사이트의 실제 계산된 스타일(computed styles)을 기반으로 React + Tailwind CSS 컴포넌트를 생성합니다. 스크린샷이나 이미지 분석이 아닌 브라우저 렌더링 엔진의 실제 스타일 값을 추출하므로 픽셀 단위의 정확한 재현이 가능하며, 프로덕션 환경에서 바로 사용할 수 있는 깔끔하고 모듈화된 코드를 제공합니다. 프런트엔드 개발자, 디자이너, AI 에이전트 사용자 모두에게 유용하며, 기존 웹사이트의 UI를 분석하거나 리팩토링할 때 시간을 크게 절약할 수 있습니다. Claude Code 환경에서만 동작하며, Puppeteer 또는 Playwright와 같은 헤드리스 브라우저를 통해 DOM 구조와 스타일을 추출하고, 이를 React 컴포넌트 트리와 Tailwind 유틸리티 클래스로 변환하는 방식으로 작동합니다.
npx skills add dididy/ui-skills라이브 웹사이트를 실제 계산된 스타일(스크린샷이 아닌)에서 프로덕션 준비가 완료된 React + Tailwind 컴포넌트로 리버스 엔지니어링하는 Claude Code 플러그인입니다.
ElevenLabs text-to-speech with mac-style say UX.
Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.
Capture and automate macOS UI with the Peekaboo CLI.
Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".
Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.
Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".