react-scaffold

React Project Scaffold

A skill that scaffolds a React project or automatically fills in missing configurations for an existing project.

Workflow

Step 1: Detect project state

Determine the current project state by checking the following files:

Check target	Detection method
Whether the directory is empty	If there are no files in the current directory or package.jsondoes not exist
Vite project	vite.config.ts or vite.config.js exists
Next.js project	next.config.ts or next.config.js or next.config.mjs exists
TypeScript	tsconfig.json or tsconfig.app.json exists
TanStack Query	package.json의 dependencies에 @tanstack/react-query exists
Tailwind CSS	package.json의 dependencies/devDependencies에 tailwindcss exists
ESLint configuration	eslint.config.js or eslint.config.mjs exists
Prettier configuration	.prettierrc exists
VSCode settings	.vscode/settings.json exists
Package manager	pnpm-lock.yaml → pnpm, yarn.lock → yarn, bun.lockb/bun.lock → bun, package-lock.json or none → npm

Step 2: Branch handling

If the directory is empty (scaffolding mode):

1. Ask the user for the project type: Vite(CSR) vs Next.js(SSR)
2. Read the corresponding reference file and run the project creation command
3. Automatically apply all common settings below

If it is an existing project (completion mode):

1. Automatically determine the framework and installation status based on the detection criteria above
2. Identify only the missing settings and generate them automatically
3. Do not touch configuration files that already exist

Step 3: Apply framework-specific settings

• Vite project: references/vite.md Read the file and follow the instructions
• Next.js project: references/nextjs.md Read the file and follow the instructions

Step 4: Apply common settings

Regardless of the framework, automatically generate the following settings if they are missing.

.prettierrc

.prettierrc If the file does not exist, create it in the project root:

{
  "semi": false,
  "singleQuote": true,
  "singleAttributePerLine": true,
  "bracketSameLine": true,
  "endOfLine": "lf",
  "trailingComma": "none",
  "arrowParens": "avoid",
  "plugins": ["prettier-plugin-tailwindcss"]
}

.vscode/settings.json

.vscode/settings.json If the file does not exist, create it:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

TanStack Query

@tanstack/react-query가 package.jsonIf not in :

1. Package installation ({pm}is replaced with the detected package manager):

   {pm} install @tanstack/react-query
   {pm} install -D @tanstack/eslint-plugin-query
   

2. ESLint Flat Config(eslint.config.js) add the TanStack Query plugin:

   import tanstackQuery from '@tanstack/eslint-plugin-query'
   
   // extends 배열에 추가:
   tanstackQuery.configs.recommended
   

3. Wrap with QueryClientProvider:

   Vite project - src/App.tsxwrap in:

   import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
   
   const queryClient = new QueryClient()
   
   export default function App() {
     return (
       <QueryClientProvider client={queryClient}>
         {/* 기존 컴포넌트 */}
       </QueryClientProvider>
     )
   }
   

   Next.js project - src/app/providers.tsx after creating the client component layout.tsxwrap in:

   // src/app/providers.tsx
   'use client'
   import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
   
   const queryClient = new QueryClient()
   
   export default function Providers({ children }: { children: React.ReactNode }) {
     return (
       <QueryClientProvider client={queryClient}>
         {children}
       </QueryClientProvider>
     )
   }
   

   // src/app/layout.tsx 에서 Providers로 children 래핑
   import Providers from './providers'
   
   // ...
   <Providers>{children}</Providers>
   

Notes

• Do not overwrite configuration files that already exist
• Only in scaffolding mode ask the user for the project type
• In existing project completion mode, proceed automatically without asking
• The package manager is determined by the existing project's lock file:
  • pnpm-lock.yaml → pnpm
  • yarn.lock → yarn
  • bun.lockb or bun.lock → bun
  • package-lock.json or no lock file → npm
• In an empty directory (scaffolding mode), npmuse