| name | web-replicate |
| description | Tools for building modern React webapps with TypeScript, Tailwind CSS and shadcn/ui. Best suited for applications with complex UI components and state management. Used by the video2code replication workflow to scaffold the project. |
Web Replicate
Stack: React + TypeScript + Vite + Tailwind CSS v4 + shadcn/ui
Locating the scripts
The init/repair scripts live in this skill's own directory: <plugin_root>/skills/web-replicate/scripts/. The plugin root path is announced at session start and also written to .v2c/plugin_root in the project directory — cat .v2c/plugin_root if you need it. Always call the scripts by absolute path; your shell cwd is the project directory, not the skill directory, so relative paths like bash scripts/init-webapp.sh fail with "No such file or directory".
Workflow
1. Initialize
bash <plugin_root>/skills/web-replicate/scripts/init-webapp.sh <website-title>
cd app
This creates the project at <project-dir>/app (override with env PROJECT_PATH=...), fully configured: React + TypeScript (Vite, Node 20+ compatible), Tailwind CSS v4 with the shadcn/ui theming system (theme lives in src/index.css — CSS variables in :root/.dark + @theme inline mapping; there is no tailwind.config.js), @/ path aliases, 50+ shadcn/ui components with all Radix dependencies pre-installed.
- Common libraries already installed — do NOT
npm install these again (import directly; reinstalling wastes minutes and risks corrupting node_modules): framer-motion, lucide-react, react-router, recharts, date-fns, zod, react-hook-form, embla-carousel-react, sonner, next-themes, clsx, tailwind-merge.
- Common display/body fonts pre-installed:
@fontsource/playfair-display, @fontsource/inter, @fontsource/space-grotesk, @fontsource/dm-sans, @fontsource/manrope, @fontsource/bebas-neue. Self-host by importing in main.tsx (import '@fontsource/playfair-display/700.css') — never link Google Fonts (zero external requests); install a new @fontsource package only when the source uses a font class none of these covers.
⚠️ Do NOT change the Vite/Tailwind toolchain versions. The project ships with
vite@7.x, @vitejs/plugin-react and tailwindcss@4 (wired via @tailwindcss/vite).
Installing vite@4/5, tailwindcss@3, or a different @vitejs/plugin-react breaks
the peer dependency chain → ERESOLVE / build failure. Use what is already installed.
⚠️ node_modules is a symlink to fast local disk — NEVER run npm install inside the
project directory. npm (v7+) replaces the symlinked node_modules with a real
directory and re-installs tens of thousands of small files onto slow network storage —
it exhausts the disk's file-count quota and takes 10+ minutes. Rules:
- Adding a package: edit
package.json to add the dependency, then run
bash <plugin_root>/skills/web-replicate/scripts/relink-node-modules.sh <project-dir>/app
— it installs the updated dependency set on local disk and re-links in seconds.
- If node_modules is broken/missing (build can't resolve installed packages,
ENOTEMPTY errors, dangling symlink): run the same relink script.
- NEVER run
npm install (with or without a package name) or
rm -rf node_modules && npm install inside the project directory.
2. Develop
⚠️ Read the scaffold before overwriting it. src/App.tsx, src/pages/Home.tsx,
src/index.css and src/App.css already exist after init and you will replace them
wholesale — Read all four in one parallel batch right after init, or Write
will fail with "File has not been read yet". Do NOT dodge that failure with a
cat > file heredoc: the file stays un-Read and the next Write/Edit fails the
same way (and the heredoc bypasses the safety the contract provides).
Edit generated files in app/src/: page/section components go in src/pages/, custom React hooks in src/hooks/, shared utilities in src/lib/, and the pre-installed shadcn/ui components live in src/components/ui/.
3. Build
cd app && npm run build 2>&1
Output (app/dist/):
index.html — entry pointassets/index-[hash].js / assets/index-[hash].css — bundles- files from
public/ copied verbatim (e.g. public/assets/... → /assets/...)
If the build fails, read the first error: unresolved package imports usually mean the
dependency was added to package.json without running the relink script (see above).
Reference
