# 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?"