사용 방법
- 설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
- 필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
- 입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.
npx skills add https://github.com/mattiavalerio/mvskills --skill react-vite시작 전 확인
- 설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
- 별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.
원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.
Read docs/agents/stack.md and load strict-typescript. Default: Vite, React, TypeScript, TanStack Router, TanStack Query, Tailwind CSS v4, shadcn/ui, Biome, Vitest, React Testing Library and MSW. Use pnpm and versions compatible with installed dependencies. Existing frontend choices are preserved; SSR/SEO requirements may require another selected profile. This skill owns the scaffold. Feature code follows react-architecture (structure, routes, data) and design-system (theme, typography, components); feature work uses react-feature. Before scaffolding, invoke react-architecture and design-system through the host's skill mechanism, or read their installed entrypoints if it has no skill tool.
When scaffolding, use the official Vite React TypeScript template and current installation docs. Align its scripts/tsconfigs with the workspace; retain useful checks instead of merely deleting generated tooling. Use vite.config.ts and typed env declarations. Add the TanStack Router Vite plugin (file-based routing, automatic code splitting) before the React plugin, plus @tanstack/router-cli with a routes:generate script (tsr generate) so agents can regenerate the route tree without a dev server. Configure app-local @/src-root imports in tsconfig and Vite/Vitest resolve.alias; use extensionless imports. Read strict-typescript's alias reference.
Lay down the skeleton defined by react-architecture: router.tsx with the QueryClient in router context, routes/__root.tsx, lib/api-client.ts and lib/api-error.ts, lib/query-client.ts, components/feedback route states, and its .dependency-cruiser.cjs, proving its rules fail on a planted violation as react-architecture describes. Then initialize the design system per design-system: shadcn init, theme.css from its template, typography components, check-design-tokens script. Package scripts: dev, build, typecheck, lint, test, routes:generate, check:tokens, check:arch.
For backend interaction load api-contracts. Configure /api proxy in Vite with no path stripping when Nest owns that prefix. Use relative browser URLs; localhost is never baked into production bundles.
Build the initial status page through the generated client with the same patterns as features. Test its loading, ready and unavailable states with Vitest/Testing Library and MSW, plus a real web→API smoke check when both apps exist. An entirely mocked frontend test does not prove the proxy works. When TDD is selected, invoke tdd first and agree the seams using react-architecture's testing reference. Reuse existing seam decisions; distinguish the mocked screen evidence from the real connection smoke check in the report. If tdd is unavailable when selected, report that dependency and either agree an explicit manual test-first procedure or mark that phase pending.
Public .env.example/.env values are documented and validated; browser env contains no backend secrets. Production static hosting must support SPA route fallback and /api proxying; load docker-coolify for that branch.
Finish with passing typecheck/lint/check:tokens/check:arch/tests/build, observed runtime connection status, and unresolved checks.
Primary docs: Vite proxy, TanStack Router, TanStack Query, Tailwind with Vite, shadcn/ui, Testing Library.
