heropy-react-scaffold

React Project Scaffold

A skill that scaffolds a React project or automatically supplements missing configuration in 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	No files in the current directory or package.jsonis absent
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 (supplement mode):

1. Automatically determine the framework and installation status using the detection criteria above
2. Identify only the missing settings and create 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 framework, automatically create 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. Install packages ({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>
   

Precautions

• Do not overwrite configuration files that already exist
• Ask the user for the project type only in scaffolding mode
• In existing project supplement mode, proceed automatically without asking
• The package manager is determined by the lock file of the existing project:
  • 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), npmis used