Clean Frontend Scaffolding

1. Audit current state

Read .claude/stack-profile.md if present: frontend.framework (react | vue) decides the branch; otherwise detect it from package.json (react or vue in dependencies). frontend.meta of nuxt or next → exit; those scaffolds have their own layout.

Look for the markers of the create-vite templates (Vite 8):

grep -l "assets/hero.png\|assets/react.svg\|assets/vue.svg\|HelloWorld\|Get started" src/App.* src/components/*.vue 2>/dev/null
grep -l "Vite + " index.html 2>/dev/null          # <title>Vite + React + TS</title>
ls src/assets src/App.css public 2>/dev/null       # hero.png, react.svg, vue.svg, vite.svg, favicon.svg, icons.svg

If none of these exist or match, exit early with: "Scaffold cleanup not needed — files appear customized."

2. Decide what to do

• All scaffold defaults present → full clean (proceed to step 3).
• Partially customized → remove only the default items still present.
• Already customized → exit.

3. Purge boilerplate

React

1. Reduce src/App.tsx to:

   export default function App() {
     return <div>App shell</div>;
   }

2. Reduce src/main.tsx to a clean root render:

   import { StrictMode } from 'react';
   import { createRoot } from 'react-dom/client';
   import App from './App';
   import './index.css';
   
   createRoot(document.getElementById('root')!).render(
     <StrictMode>
       <App />
     </StrictMode>,
   );

3. Delete src/App.css; the reduced App.tsx no longer imports it, and nothing else does.

4. Replace src/index.css content with the Tailwind v4 import (v4 dropped the three @tailwind directives for a single @import):

   @import "tailwindcss";

5. Delete src/assets/ (hero.png, react.svg, vite.svg) and public/icons.svg (the demo's social-icon sprite). Keep public/favicon.svg until the project has its own icon; it is the Vite logo.
6. Update index.html <title> (Vite + React + TS) to the project name (ask via AskUserQuestion if unknown).

Vue

1. Reduce src/App.vue to:

   <script setup lang="ts"></script>
   <template>
     <div>App shell</div>
   </template>

2. Reduce src/main.ts to:

   import { createApp } from 'vue';
   import App from './App.vue';
   import './style.css';
   
   createApp(App).mount('#app');

3. Replace src/style.css with the Tailwind v4 import only (see React step 4).
4. Delete src/assets/ (hero.png, vite.svg, vue.svg), public/icons.svg and src/components/HelloWorld.vue. Keep public/favicon.svg until the project has its own icon.
5. Update index.html <title> (Vite + Vue + TS) to the project name.

4. Verify

pnpm dev

Expected: dev server starts; visiting the app shows the empty shell with no console errors. Stop the server. pnpm build must also pass: it runs tsc -b/vue-tsc -b, which catches an import of a deleted asset.

References

• ./boilerplate-removal.md — exact files and patterns per framework, with examples and anti-patterns.
• ../_shared/conventions.md — path alias and source-root conventions.