gh-igpastor-sng-claude-marketplace-plugins-sngular-frontend/commands/sng-setup-frontend.md

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