react-vite-dashboard작성자 Google Labs

React Vite Dashboard 스킬.

UI 디자인을 위한 Claude Code 및 Codex 스킬: Stitch 디자인을 TanStack Query를 사용하는 React + Vite 대시보드로 변환합니다.

Web & UI
UI 코드

google-labs-code/stitch-skills · plugins/stitch-build/skills/react-vite-dashboard/SKILL.mdSKILL.md

--- name: react-vite-dashboard description: Convert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns (ethers/viem). --- ## Prerequisites ## Workflow ## HTML → React mapping ## DESIGN.md integration ## Web3 dashboard conventions ## File structure

2026-09-14 업스트림 파일에서 읽은 전면 메타데이터 및 섹션 제목 · 전체 3,656자

01 기능

Claude Code와 Codex에서 react-vite-dashboard 스킬이 하는 일

요약, 워크플로, 산출물을 모두 해당 스킬의 SKILL.md에서 그대로 읽어 정리한 내용입니다.

SKILL.md에서2026-09-14 읽음 · 실행 기록 아님

스킬 자체의 표현으로

React 18, Vite, TypeScript, TanStack Query와 React Router를 기반으로 Stitch 화면을 데이터 밀도가 높은 대시보드로 변환하는, 프런트엔드 엔지니어를 위한 빌드 스킬로, 온체인 조회를 위한 ethers v6 또는 viem을 선택적으로 사용합니다.

이 워크플로는 여섯 단계로 진행됩니다: Stitch MCP 프리픽스를 확인하고, 화면을 가져오고, HTML과 스크린샷을 .stitch/designs/ 아래에 저장하고, DESIGN.md를 읽어 색상·타이포그래피·여백을 src/index.css의 CSS 변수로 매핑하고, 컴포넌트와 페이지를 생성한 다음, 프레젠테이션 컴포넌트를 순수하게 유지하면서 TanStack Query로 데이터를 연결합니다. 매핑 테이블은 테이블, 버튼, 폼, 로딩, 지갑 연결에 대한 동작을 정의하며, 파일은 WCAG 2.2 AA 품질 체크리스트로 마무리됩니다.

산출물

Stitch 화면으로부터 만들어진 프로덕션용 React + Vite 대시보드로, 데이터 레이어로 TanStack Query를 사용합니다.
.stitch/designs/{screen}.html과 이에 대응하는 .png 스크린샷 형태로 저장소에 보관된 원본 디자인의 로컬 복사본입니다.
역할별로 분리된 소스 트리로, hooks에는 useQuery 래퍼와 지갑 훅이, lib에는 ABI 헬퍼와 포맷터가 들어 있습니다.

예시 프롬프트 보기 ↗

작동 방식

01
MCP 프리픽스 확인하기
먼저 list_tools를 실행하고 도구가 노출되는 Stitch 프리픽스를 기록해 두어야 이후의 모든 호출을 이를 기반으로 구성할 수 있습니다.
02
화면 가져오기
확인된 프리픽스에서 get_screen 도구를 호출하며, Stitch 프로젝트 ID와 화면 ID를 모두 전달합니다.
03
DESIGN.md 토큰 연결하기
프로젝트의 DESIGN.md를 읽고 그 안의 색상, 타이포그래피, 여백 항목을 src/index.css 내부의 CSS 변수로 변환합니다.
04
생성된 UI를 역할별로 분리하기
생성된 코드는 하나의 평면 파일이 아니라 src/components, src/pages, src/hooks에 나뉘어 위치합니다.
05
TanStack Query를 통해 데이터 연결하기
비동기 요청은 TanStack Query를 거치므로 Stitch 화면에서 만들어진 프레젠테이션 컴포넌트는 순수성을 유지합니다.

02 적합성 확인

react-vite-dashboard Skill 사용 시기

이러한 종류의 UI 디자인 작업에는 Claude Code 또는 Codex에서 react-vite-dashboard skill을 사용합니다. 적합성과 제한 사항은 스킬 자체 파일에서 가져온 것입니다.

적합한 경우

화면당 컴포넌트가 많은, 마케팅 페이지가 아닌 데이터 중심 대시보드 인터페이스로 Stitch 화면을 전환하는 경우.
대시보드의 나머지 데이터 계층과 함께 ethers v6 또는 viem을 통한 온체인 읽기가 필요한 Web3 프런트엔드.
디자인 시스템이 이미 DESIGN.md에 정리되어 있고, 생성된 UI가 해당 토큰에 충실하게 유지되어야 하는 팀.

한계 인지하기

Stitch MCP가 이미 구성되어 있다고 가정합니다. 구성되어 있지 않은 경우에만 이 파일이 외부 설정 가이드를 가리킵니다.
온체인 작업은 읽기 전용 계약 호출로 범위가 제한되므로, 서명이나 쓰기 흐름은 이 스킬이 설명하는 범위 밖입니다.

제공할 사항

필요Google Stitch — SKILL.md에 필수로 명시되어 있습니다.
입력Stitch MCP 구성 완료(설정 가이드 참조)
입력토큰 정확도를 위한 프로젝트 DESIGN.md(design-md skill 참조)
입력Vite + React + TypeScript 스캐폴드(npm create vite@latest)

03 스킬 내부

react-vite-dashboard 스킬이 Claude Code와 Codex에 부여하는 규칙

SKILL.md가 에이전트를 위해 설정하는 7가지 구체적 지침, 기본값, 한도 — 결과를 바꾸는 파일의 부분

테이블은 시맨틱하게 유지됩니다
표 형식 데이터는 실제 table 요소나 TanStack Table을 사용해야 하며, div만으로 구성된 그리드는 명시적으로 배제됩니다.
지갑 코드는 분리되어 있고 키가 없습니다
지갑 연결은 WalletProvider 내부에 위치하며, 생성된 코드에는 절대 프라이빗 키를 포함해서는 안 됩니다.
모든 입력에 레이블을 지정하고 오류를 연결하기
폼에서는 label의 htmlFor와 input의 id를 짝지으며, 유효성 검사 오류는 따로 표시되지 않고 aria-describedby로 연결됩니다.
버튼의 기본 포커스 링 유지하기
버튼은 type="button"이며 눈에 보이는 포커스 링을 가지고, DESIGN.md에 포커스 토큰이 정의되어 있지 않은 한 브라우저 기본값이 유지됩니다.
로딩 상태를 프로그래밍적으로 알리기
데이터를 가져오는 화면은 스켈레톤 컴포넌트를 사용하며, 요청이 진행 중인 동안 컨테이너에 aria-busy가 설정됩니다.
가스 민감 흐름에서 읽기를 일괄 처리하기
읽기는 일괄 처리되어야 하며, 렌더 루프에서 중복된 eth_call 요청을 보내서는 안 됩니다.
저장소에 비밀 정보 없음
RPC URL은 환경 변수에서 가져오며, VITE_ 접두사는 공개 엔드포인트에만 사용됩니다.

04 활용하기

Claude Code 또는 Codex에 react-vite-dashboard 설치

npx skills add 명령 한 번 실행 후, 에이전트에서 첫 번째 작업을 수행하고 결과 체크리스트를 확인합니다.

Claude Code, Codex 또는 사용자의 에이전트에 react-vite-dashboard 추가

프로젝트에서 실행합니다. 설치 프로그램이 어떤 에이전트에 추가할지 묻습니다.

Terminal

npx skills add https://github.com/google-labs-code/stitch-skills --skill react-vite-dashboard

plugins/stitch-build/skills/react-vite-dashboard/SKILL.md를 위한 일반적인 skills CLI 형식이며, 저장소가 자체 경로를 문서화할 수도 있습니다.

스킬에 첫 UI 디자인 작업 부여하기

스킬 자체의 용어로 작성되었습니다. 대괄호 부분은 각자의 자료로 교체합니다.

Starter prompt

Turn the Stitch screen [screen ID] in project [project ID] into a React + Vite dashboard page. Pull the numbers through the TanStack Query hooks in src/hooks instead of fetching in the component, and bridge the tokens from DESIGN.md into src/index.css so the colors and spacing match. Add a read-only balance card for [token contract] that shows the network name and chain ID in the settings footer.

출처: 스킬 자체의 용어로 SKILL.md에서 작성했습니다.

첫 번째 결과 확인

SKILL.md 자체가 올바른 결과의 모습으로 제시하는 내용:

UI를 배포하기 전에 로컬에서 DESIGN.md에 대해 design.md 린터를 실행하세요.
DESIGN.md에 정의된 컴포넌트 쌍에 대해 대비가 WCAG 2.2 AA를 충족해야 하며, 린터 통과로 검증합니다.
키보드 내비게이션이 동작해야 하며, 포커스 순서가 대시보드의 시각적 순서와 일치해야 합니다.
375px와 1280px 너비에서 레이아웃을 테스트합니다.
TypeScript는 strict 모드로 실행되며, 계약 ABI는 any로 타입 지정하면 안 됩니다.

OpenDesign에서 react-vite-dashboard를 SKILL.md 링크에서 가져옵니다: Plugins → Add → Skill → Import from link, 그런 다음 상단 바에서 선택합니다.

OpenDesign 다운로드 빠른 시작 가이드 읽기

05 오픈 소스, 추적 가능

출처, 라이선스 및 검증

이 페이지의 사실이 어디에서 왔으며 언제 마지막으로 확인되었는지 안내합니다.

Author: Google Labs
Repository: github.com/google-labs-code/stitch-skills 브랜치 main
스킬 파일: plugins/stitch-build/skills/react-vite-dashboard/SKILL.md 검증 시 콘텐츠 체크섬 기록됨; 커밋 0337446
License: Apache-2.0 LICENSE에서 확인.
리포지토리 스타: 8,304 GitHub 스냅샷은 2026-09-14에 google-labs-code/stitch-skills 리포지토리 전체를 대상으로 촬영되었으며, 이 카탈로그에는 12개 스킬이 포함되어 있습니다. react-vite-dashboard의 평가나 사용 횟수가 아닙니다.
OpenDesign에서 검증됨: 2026-09-14 소스 파일, 경로, 라이선스 텍스트 및 스타 수가 확인되었습니다. OpenDesign 메인에 번들로 포함되지 않음(2026-08-28 확인); 이 페이지에 실제 실행 기록이 없습니다.

SKILL.md 내부

전제 조건Stitch MCP, DESIGN.md, Vite React TypeScript 스캐폴드
워크플로MCP 접두사 발견부터 컴포넌트 생성 및 데이터 연결까지 6단계
HTML → React 매핑레이아웃, 카드, 테이블, 버튼, 폼, 로딩, 지갑 연결을 마크업으로 변환하는 표
DESIGN.md 통합DESIGN.md 토큰에서 파생된 CSS 변수 브리지와 design.md 린트 명령
Web3 대시보드 관례읽기 전용 계약 호출, formatUnits 금액, 평이한 언어의 트랜잭션 오류, 배치 읽기
파일 구조컴포넌트, 페이지, 훅, lib, 스타일을 위한 다섯 개 소스 폴더
품질 체크리스트WCAG 2.2 AA, 키보드 순서, 브레이크포인트, 비밀 정보, strict 타입을 다루는 다섯 가지 점검
Stitch 문서 관련 참고상대 문서 링크가 잘못 리디렉션될 경우 stitch.withgoogle.com 절대 URL을 사용합니다

스킬 자체 설명

"Stitch 디자인을 TanStack Query, DESIGN.md의 접근 가능한 토큰, Web3 지원 패턴(ethers/viem)을 갖춘 프로덕션 React + Vite 대시보드로 변환합니다."

SKILL.md의 front-matter 설명입니다. 전체 파일은 약 3,656자입니다. GitHub에서 전체 파일 읽기.

06 설치하기 전에

react-vite-dashboard 스킬에 관한 질문

이 답변은 2026-09-14 기준으로 확인한 SKILL.md 내용을 근거로 하며, 실행 기록을 바탕으로 한 것이 아닙니다.

레이아웃에 반드시 Tailwind를 사용해야 하나요?

아닙니다. 매핑 표는 간격이 DESIGN.md의 토큰을 따르는 한 Tailwind 유틸리티나 CSS 모듈 중 어느 쪽이든 허용합니다.

이 스킬은 계약에 쓰기(write) 작업도 처리하나요?

이 스킬이 규정하는 관례는 읽기와 결과 표시에 관한 것입니다: 트랜잭션 오류는 평이한 언어로 설명해야 하며, txHash가 있으면 블록 탐색기로 연결해야 합니다. 서명이나 쓰기 흐름은 다루지 않습니다.

Stitch 문서 링크에 특이한 점이 있나요?

stitch.withgoogle.com/docs의 링크를 따라갈 때는 상대 경로 탐색이 잘못 리디렉션될 수 있으므로 전체 https://stitch.withgoogle.com/docs/... URL을 사용하세요.

React Vite Dashboard

실제 UI 디자인 작업에 react-vite-dashboard를 실행합니다.

OpenDesign를 다운로드하고, SKILL.md 링크에서 react-vite-dashboard를 가져온 다음, 위 프롬프트를 붙여넣고 결과 전에 계획을 읽습니다.

OpenDesign 다운로드 모든 스킬 보기

터미널

npx skills add https://github.com/google-labs-code/stitch-skills --skill react-vite-dashboard