79 lines
2.3 KiB
Markdown
79 lines
2.3 KiB
Markdown
# Frontend Project Setup Command
|
|
|
|
You are helping the user initialize or configure a frontend project with Sngular's best practices and standards.
|
|
|
|
## Instructions
|
|
|
|
1. **Detect existing setup**: Check if this is a new project or an existing one that needs configuration
|
|
2. **Ask for framework choice**: If starting fresh, ask which framework to use:
|
|
- React with Vite
|
|
- Next.js (App Router or Pages Router)
|
|
- Vue.js 3 with Vite
|
|
- Other framework
|
|
3. **Determine configuration needs**:
|
|
- TypeScript (strongly recommended)
|
|
- Linting (ESLint with Sngular config)
|
|
- Code formatting (Prettier)
|
|
- CSS approach (Tailwind, CSS Modules, Styled Components, SCSS)
|
|
- State management (Redux Toolkit, Zustand, Pinia for Vue)
|
|
- Testing setup (Vitest, Jest, React Testing Library)
|
|
- Git hooks (Husky with lint-staged)
|
|
|
|
## Setup Tasks
|
|
|
|
1. **Initialize the project** (if new):
|
|
- Run appropriate create command (create-next-app, create-vite, etc.)
|
|
- Set up TypeScript configuration
|
|
|
|
2. **Install and configure tools**:
|
|
- ESLint with recommended rules
|
|
- Prettier with Sngular formatting standards
|
|
- Git hooks for pre-commit linting
|
|
|
|
3. **Create project structure**:
|
|
```
|
|
src/
|
|
├── components/
|
|
│ ├── common/
|
|
│ ├── layout/
|
|
│ └── features/
|
|
├── hooks/
|
|
├── utils/
|
|
├── types/
|
|
├── styles/
|
|
├── services/
|
|
└── constants/
|
|
```
|
|
|
|
4. **Add configuration files**:
|
|
- `.eslintrc.json` - Linting rules
|
|
- `.prettierrc` - Formatting rules
|
|
- `tsconfig.json` - TypeScript config
|
|
- `.gitignore` - Git ignore patterns
|
|
- `.env.example` - Environment variables template
|
|
|
|
5. **Create base files**:
|
|
- Global styles
|
|
- Theme configuration
|
|
- Common types/interfaces
|
|
- Utility functions
|
|
- API client setup
|
|
|
|
6. **Install recommended dependencies**:
|
|
- Utility libraries (clsx, date-fns)
|
|
- Form handling (react-hook-form, vee-validate for Vue)
|
|
- HTTP client (axios)
|
|
- Icons library
|
|
|
|
## Best Practices
|
|
|
|
- Always use TypeScript
|
|
- Enable strict mode in TypeScript
|
|
- Set up path aliases (@/ for src/)
|
|
- Configure absolute imports
|
|
- Add bundle analyzer for production builds
|
|
- Set up environment-specific configurations
|
|
- Include README with setup instructions
|
|
|
|
Ask the user: "Are you setting up a new project or configuring an existing one?"
|