SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsfrontend-project-creator

frontend-project-creator

Frontend & websites

View repository

Updated 10-15 17:33

About this skill

Frontend Project Creator

Overview

Create a new frontend project by guiding the user through tech stack selection. Supports the React framework with MUI, shadcn/ui, or Bootstrap component libraries. All projects use Vite as the build tool and React Router for navigation.

Workflow

Step 1: Ask about component library selection

Ask the user which component library to use:

  • MUI (Material UI)
  • shadcn/ui
  • Bootstrap (Recommended)

Use the question tool for single selection (do not use multiple selection). Mark Bootstrap as the recommended option.

Step 2: Create the project

Based on the user's selection, create the project structure:

React + MUI

npm create vite@latest . -- --template react-ts
npm install @mui/material @emotion/react @emotion/styled
npm install react-router-dom

React + shadcn/ui

npm create vite@latest . -- --template react-ts
npm install tailwindcss @tailwindcss/vite
npm install -D @types/node
npm install react-router-dom

Replace src/index.css with:

@import "tailwindcss";

Update tsconfig.json：

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Update tsconfig.app.json(add to compilerOptions):

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Update vite.config.ts：

import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [react(), tailwindcss()],
  server: {
    allowedHosts: ['.monkeycode-ai.online']
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

Initialize shadcn/ui:

npx shadcn@latest init

React + Bootstrap

npm create vite@latest . -- --template react-ts
npm install react-bootstrap bootstrap
npm install react-router-dom

Step 3: Configure Vite (for MUI and Bootstrap projects)

Add to vite.config.ts :

import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [react()],
  server: {
    allowedHosts: ['.monkeycode-ai.online']
  }
})

Step 4: Create the project structure

Create the following directory structure:

src/
├── pages/
│   ├── Welcome.tsx
│   └── Home.tsx
├── components/
│   └── Navbar.tsx
├── App.tsx
└── main.tsx

Step 5: Create pages

Create src/pages/Welcome.tsx：

import { Container } from "react-bootstrap";

export default function Welcome() {
  return (
    <Container className="text-center mt-5">
      <h1>你好 MonkeyCode</h1>
      <p>欢迎使用 MonkeyCode 前端项目</p>
    </Container>
  );
}

Create src/pages/Home.tsx：

import { Container } from "react-bootstrap";

export default function Home() {
  return (
    <Container className="text-center mt-5">
      <h1>首页</h1>
      <p>这是首页内容</p>
    </Container>
  );
}

For MUI projects: Replace Bootstrap components with MUI equivalent components:

import { Container, Typography } from "@mui/material";

export default function Welcome() {
  return (
    <Container maxWidth="sm" sx={{ mt: 5, textAlign: 'center' }}>
      <Typography variant="h4" component="h1" gutterBottom>
        你好 MonkeyCode
      </Typography>
      <Typography variant="body1">
        欢迎使用 MonkeyCode 前端项目
      </Typography>
    </Container>
  );
}

For shadcn/ui projects:

export default function Welcome() {
  return (
    <div className="text-center mt-5">
      <h1 className="text-4xl font-bold">你好 MonkeyCode</h1>
      <p>欢迎使用 MonkeyCode 前端项目</p>
    </div>
  );
}

Step 6: Create the navigation bar component

Create src/components/Navbar.tsx：

import { Navbar, Container, Nav } from "react-bootstrap";
import { Link } from "react-router-dom";

export default function Navigation() {
  return (
    <Navbar bg="dark" variant="dark" expand="lg">
      <Container>
        <Navbar.Brand as={Link} to="/">
          MonkeyCode
        </Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link as={Link} to="/">
              欢迎
            </Nav.Link>
            <Nav.Link as={Link} to="/home">
              首页
            </Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

For MUI projects:

import { AppBar, Toolbar, Typography, Button, Box } from "@mui/material";
import { Link, useLocation } from "react-router-dom";

export default function Navigation() {
  const location = useLocation();

  return (
    <AppBar position="static">
      <Toolbar>
        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
          <Link to="/" style={{ color: 'white', textDecoration: 'none' }}>
            MonkeyCode
          </Link>
        </Typography>
        <Box sx={{ display: 'flex', gap: 2 }}>
          <Button color="inherit" component={Link} to="/">
            欢迎
          </Button>
          <Button color="inherit" component={Link} to="/home">
            首页
          </Button>
        </Box>
      </Toolbar>
    </AppBar>
  );
}

For shadcn/ui projects:

import { Button } from "@/components/ui/button"
import { Link, useLocation } from "react-router-dom";

export default function Navigation() {
  const location = useLocation();

  return (
    <nav className="border-b bg-white">
      <div className="container mx-auto px-4">
        <div className="flex h-16 items-center justify-between">
          <Link to="/" className="text-xl font-bold">
            MonkeyCode
          </Link>
          <div className="flex gap-4">
            <Button variant={location.pathname === '/' ? 'default' : 'ghost'} asChild>
              <Link to="/">欢迎</Link>
            </Button>
            <Button variant={location.pathname === '/home' ? 'default' : 'ghost'} asChild>
              <Link to="/home">首页</Link>
            </Button>
          </div>
        </div>
      </div>
    </nav>
  );
}

Step 7: Configure App.tsx

Update src/App.tsx：

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Navigation from "./components/Navbar";
import Welcome from "./pages/Welcome";
import Home from "./pages/Home";

function App() {
  return (
    <Router>
      <Navigation />
      <Routes>
        <Route path="/" element={<Welcome />} />
        <Route path="/home" element={<Home />} />
      </Routes>
    </Router>
  );
}

export default App;

Step 8: Configure main.tsx

Update src/main.tsx：

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

Only for React + Bootstrap projects: At the top of main.tsx , add the Bootstrap CSS import:

import 'bootstrap/dist/css/bootstrap.min.css';

Step 9: Install dependencies

npm install

Step 10: Start the development server

npm run dev

Notes

  • All projects use React + TypeScript + Vite
  • React Router is installed by default for navigation
  • Bootstrap is recommended as the default component library
  • All projects include a "Hello MonkeyCode" welcome page
  • Projects include a responsive navigation bar
  • Follow Vite's project structure conventions
  • Make sure all configuration is complete before starting the development server
  • shadcn/ui requires Tailwind CSS and path alias configuration
  • The shadcn/ui init command will prompt for additional configuration
  • MUI uses Emotion as its default styling engine
  • React Bootstrap requires importing the Bootstrap CSS file