Initialize a frontend app in one directory: React/Vite, Vitest (threads pool, single thread), ESLint/Prettier, Tailwind, Zustand, React Query, RHF+Zod, React Router, Playwright, husky/lint-staged, README and docs/guides·docs/rules. Use when the user asks to set up or initialize a frontend in a given path (e.g. 'initialize frontend here', 'set up React/Vite in this directory').
Set up a frontend project in the given directory. All paths are relative to that directory.
package.json name → APP_NAME (monorepo 시 caller가 scoped name 제공, e.g. @myapp/web)index.html <title> → APP_NAMEtoHaveTitle(...) → index.html <title>과 일치| File | Load when |
|---|---|
| references/tech-stack.md |
| Steps 2-4 — scaffolding, installing, configuring |
| references/structure.md | Step 6 — creating src layout |
| references/scripts.md | Step 7 — adding package.json scripts |
| scripts/verify.sh | Step 10 — dev server verification |
| references/troubleshooting.md | Step 10 — 검증 실패 시 원인·해결 참고 |
| references/readme.md | Step 9 — writing README (section template + must-include) |
| assets/README.template.md | Step 9 — default section content; replace placeholders from project |
| assets/guides/, assets/rules/ | Step 11 — copying docs |
| assets/theme/design-system-theme.css | Step 5 — design system theme (Tailwind에 토큰 등록) |
이 스킬은 대상 디렉터리에서 git init을 실행하지 않는다. scaffolding 도구가 .git을 생성한 경우 즉시 rm -rf .git으로 삭제한다. Git 저장소 설정은 caller(monorepo 스킬 또는 사용자)의 책임이다.
pnpm create vite . --template react-ts). After scaffolding, set package.json name to APP_NAME. Update index.html <title> to APP_NAME.dist/**, node_modules/**, coverage/** per references/tech-stack.md), Prettier, TypeScript. Vite: vite.config.ts에 loadEnv + server: { host: true, port, allowedHosts } 패턴 반드시 적용(see "Vite dev server" in references/tech-stack.md). If config exists, confirm with user then add or adjust. Create test placeholders per "Test Placeholders" in references/tech-stack.md: src/App.test.tsx (unit), src/services/placeholder.int.test.ts (integration), e2e/placeholder.spec.ts (E2E). E2E placeholder의 title 등 기대값은 index.html·실제 앱과 일치시킨다. These prevent test scripts from failing when no tests exist.
|| defaultValue 인라인 폴백을 사용하지 않는다. 설정 파일(vite.config.ts 등): env.X ? transform(env.X) : undefined로 조건 전달 — 미설정 시 도구 자체 기본값 사용. 앱 코드(src/): 미설정 시 명시적 에러 throw 또는 빈 값으로 인한 즉각적 실패. .env.example과 .env.development에 모든 필수 변수 명시.src/theme/design-system-theme.css로 복사하고, src/index.css에 Tailwind 지시문 다음 한 줄 추가: @import './theme/design-system-theme.css'; 등록 결과·사용 가능한 클래스 목록은 references/tech-stack.md "디자인 시스템 테마" 참고.src/lib/utils.ts (cn) per references/structure.md..git exists: install husky and lint-staged, run husky init, set .husky/pre-commit and package.json prepare, update .gitignore. Skip if no .git.{{PROJECT_NAME}} with APP_NAME, {{PROJECT_DESCRIPTION}} with user-provided or inferred description. List only scripts that exist in package.json. 환경변수: vite.config.ts, .env*, src/configs/env.ts를 스캔하여 전부 포함 (상세: references/readme.md 섹션 6).
.env.example 생성 (필수): README 환경변수 섹션에 나열된 모든 변수를 .env.example에도 작성한다. 각 변수 위에 주석으로 설명·필수 여부를 기재. .env.example은 "이 앱에 어떤 환경변수가 필요한지"를 보여주는 레퍼런스 문서다. 연동 스킬이 변수를 추가하면 .env.example도 함께 갱신해야 한다..env.development 생성 (필수): .env.example의 모든 변수를 .env.development에 로컬 개발용 실제값으로 채워 생성한다. Vite는 mode === 'development'일 때 이 파일을 자동 로드한다. 예: PORT=5173. Secret 변수는 초기화 시점에는 빈 값으로 두되, 해당 연동 스킬(auth 등) 실행 시 실제값을 채운다. .env.development는 .gitignore에 포함. 이미 존재하면 누락 변수만 추가..env.example과 .env.development는 항상 같은 변수 집합을 가져야 한다. .env.example에는 설명+placeholder, .env.development에는 실제값. 이후 연동 스킬이 변수를 추가할 때 반드시 양쪽 모두 갱신한다.> 배포 환경(dev/prd) 전체 명세는 프로젝트 루트 [docs/env.md](../../docs/env.md)를 참고하세요. 안내를 추가한다..env.example에 나열된 모든 변수가 .env.development에 값이 채워져 있는지 확인. 누락된 변수가 있으면 .env.example을 참고하여 .env.development에 추가한다. 이 확인 없이 검증을 시작하지 않는다.pnpm test:e2e:install — E2E용 Chromium 한 번 설치 (이미 있으면 스킵 가능).pnpm build — 빌드 성공.pnpm test:all — 전체 테스트 (unit + int + e2e). pnpm test:int는 백엔드 연동 전이면 스킵 가능하나, placeholder가 통과하도록 되어 있으면 포함하여 검증한다.VERIFY_PORT=37656)로 dev 서버를 띄워 200 및 HTML 응답 확인 후 종료. (실패 시 Vite server.host: true·E2E 기대값과 index.html 일치 여부 확인.)pnpm type-check — 타입 검사 (순수 정적 분석, 파일 변경 없음).pnpm lint — 린트 검사 (순수 정적 분석, 파일 변경 없음).docs/guides/ and docs/rules/ in the target directory. For each file in assets/guides/ and assets/rules/, read the file and copy its full content to the corresponding path under docs/. (예: assets/guides/design-system.md → docs/guides/design-system.md, assets/rules/coding.md → docs/rules/coding.md). Do not abbreviate, summarize, or create stubs — copy the entire content. If a target file already exists, merge by heading (append new headings, skip duplicates).