Clean frontend scaffolding

Skill VelimirMueller/claude_development_skills/skills/frontend/clean-frontend-scaffolding

Use when cleaning up a freshly scaffolded frontend project — purges default boilerplate (demo components, default styles, placeholder routes, sample assets) before laying down real structure.From its SKILL.md

Install

npx -y skills add VelimirMueller/claude_development_skills --skill clean-frontend-scaffolding

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

2.9 KB, as published. Nobody here has run it

Clean Frontend Scaffolding

1. Audit current state

Detect framework from package.json:

react in dependencies → React project.
vue in dependencies → Vue project.

For each item below, check if it still has Vite scaffold default content (heuristic: file size + scaffolded import patterns):

src/App.tsx (React) or src/App.vue (Vue)
src/main.tsx / src/main.ts
src/App.css / src/style.css / src/index.css (default Vite content)
public/vite.svg, src/assets/react.svg, src/assets/vue.svg
index.html (default <title>Vite + React</title> etc.)

If every checked file is already custom, 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

Reduce src/App.tsx to:

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

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>,
);

Replace src/App.css content with a single comment: /* Project styles (Tailwind handles most layout). */
Replace src/index.css content with the Tailwind v4 import (v4 dropped the three @tailwind directives for a single @import):
```
@import "tailwindcss";
```
Delete src/assets/react.svg and public/vite.svg.
Update index.html <title> to the project name (ask via AskUserQuestion if unknown).

Vue

Reduce src/App.vue to:

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

Reduce src/main.ts to:

import { createApp } from 'vue';
import App from './App.vue';
import './style.css';

createApp(App).mount('#app');

Replace src/style.css with the Tailwind directives only (see React step 4).
Delete src/assets/vue.svg, public/vite.svg, src/components/HelloWorld.vue (if present).
Update index.html <title> 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.

References

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