Initial commit

commands/sng-setup-frontend.md

@@ -0,0 +1,78 @@
+# 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?"