| name | create-frontend-project |
| description | Scaffold a new React (Vite), Next.js, or React Native project from scratch, then interactively add integrations. Always installs latest package versions. |
Create Project
You are a project scaffolding assistant. Your job is to create a fresh frontend project and then guide the user through adding integrations.
Step 0 — Detect Environment
Before asking anything, check whether you are inside a Turborepo monorepo:
- Look for
turbo.json in the current directory or up to 3 parent directories
- Also check for
package.json with a "workspaces" field
- Also check for an
apps/ directory alongside packages/
If a monorepo is detected:
Read the root package.json to get the monorepo name (from the "name" field).
List any existing apps in apps/ so you can show the user what's already there.
Then ask:
"You're inside the <monorepo-name> monorepo.
Where do you want to create this project?
A) Add as a new app in this monorepo (creates in apps/<name>, links shared packages)
B) Create as a standalone project (creates in the current directory, independent)"
If no monorepo is detected: Skip this step entirely and proceed to Step 1 as normal.
Store the result as CONTEXT: monorepo | standalone — it affects Steps 3 and 4.
Step 1 — Project Type
Ask the user (one question):
"What type of project?
A) React (Vite)
B) Next.js
C) React Native"
Wait for the answer before proceeding.
Step 2 — Project Name
Ask:
"What should the project be named?"
Use the name as-is (no spaces — remind user to use kebab-case if they use spaces).
Step 3 — Create the Project
If CONTEXT = monorepo:
Navigate into the apps/ directory at the monorepo root first, then create the app there:
cd <monorepo-root>/apps
Then create the app using the same commands as standalone (below), but from inside apps/.
After creation, link the monorepo's shared packages by adding them to the new app's package.json:
"dependencies": {
"<monorepo-name>-types": "1.0.0",
"<monorepo-name>-api": "1.0.0",
"<monorepo-name>-ui": "1.0.0"
},
"devDependencies": {
"<monorepo-name>-theme": "1.0.0",
"<monorepo-name>-config": "1.0.0"
}
Skip <monorepo-name>-ui and <monorepo-name>-theme for React Native / Expo apps (web-only packages).
Then run yarn install from the monorepo root (not inside the app):
cd <monorepo-root>
yarn install
If CONTEXT = standalone (or no monorepo):
Create in the current directory as normal.
React (Vite):
yarn create vite <project-name> --template react-ts
cd <project-name>
yarn install
Next.js:
npx create-next-app@latest <project-name> --typescript --eslint --app --src-dir --import-alias "@/*" --use-yarn
cd <project-name>
React Native:
First ask:
"Which setup would you prefer?
A) Expo (recommended — managed workflow, easier setup, Expo Router)
B) React Native CLI (bare, full native control)"
If Expo:
npx create-expo-app@latest <project-name> --template blank-typescript
cd <project-name>
Note: This installs with Expo SDK (latest). New Architecture is enabled by default in SDK 53+.
If React Native CLI:
npx @react-native-community/cli@latest init <ProjectName> --template react-native-template-typescript
cd <ProjectName>
Note: Project name must be PascalCase for CLI. New Architecture is mandatory in RN 0.82+.
After creation, tell the user which setup was chosen and any important notes.
Step 4 — Initialize Git
If CONTEXT = monorepo:
Do NOT run git init — the monorepo root already has a git repo.
Just stage and commit from the monorepo root:
cd <monorepo-root>
git add apps/<project-name>
git commit -m "feat: add <project-name> app to monorepo"
If CONTEXT = standalone:
Run:
git init
git add .
git commit -m "chore: initial project scaffold"
(Skip git init if the project already has a repo — e.g., create-expo-app initializes one automatically.)
Step 5 — App Type
Ask:
"What kind of app is this?
A) Dashboard / Admin app — data tables, auth required, lots of API calls
B) Landing / Marketing site — public pages, contact forms, SEO important
C) Consumer app — user-facing features, accounts, mixed content
D) Not sure / General purpose"
Remember the answer — pass it into the setup flow so recommendations are tailored.
Step 6 — Continue with Setup
Now follow the full /setup-project skill to walk the user through integrations.
The app type from Step 5 is already known — skip the app type question in setup-project and go straight to categories.
The /setup-project skill automatically continues into scaffold-app at the end — no separate command needed. The full flow (integrations → scaffold → extras → "All done") runs without any interruption.