Skip to content

CLAUDE.md

Latest commit

 

History

History
82 lines (67 loc) · 3.32 KB

CLAUDE.md

File metadata and controls

82 lines (67 loc) · 3.32 KB

NGINX UI - Claude Code Guidelines

This project is a web-based NGINX management interface built with Go backend and Vue.js frontend.

Package Manager

  • Use pnpm exclusively for all frontend package management operations
  • Commands: pnpm install, pnpm run dev, pnpm typecheck

Backend (Go) Development

Technologies & Frameworks

  • Go with Gin web framework
  • GORM for database operations
  • Gen for query simplification
  • Cosy framework (https://cosy.uozi.org/)

Code Organization

  • API Controllers: Implement in api/$module_name/ directory
  • Database Models: Define in model/ folder
  • Business Logic: Place complex logic and error handling in internal/$module_name/
  • Routing: Register routes in router/ directory
  • Configuration: Manage settings in settings/ directory

Development Guidelines

  • Write concise, maintainable Go code with clear examples
  • Use Gen to streamline database queries and reduce boilerplate
  • Follow Cosy Error Handler best practices for error management
  • Implement standardized CRUD operations using Cosy framework
  • Apply efficient database pagination for large datasets
  • Keep files modular and well-organized by functionality
  • All comments and documentation must be in English

Frontend (Vue.js) Development

Technology Stack

  • TypeScript for all code
  • Vue 3 with Composition API
  • Vite build tool
  • Vue Router for routing
  • Pinia for state management
  • VueUse for utilities
  • Ant Design Vue for UI components
  • UnoCSS for styling

Code Standards

  • Use functional and declarative programming patterns (avoid classes)
  • Prefer interfaces over types for better extendability
  • Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
  • Always use Vue Composition API with <script setup> syntax
  • Leverage Vue 3.4+ features: defineModel(), useTemplateRef(), v-bind shorthand

File Organization

  • Components: Use CamelCase naming in src/components/ (e.g., ChatGPT/ChatGPT.vue)
  • Views: Use lowercase with underscores for folders, CamelCase for components (e.g., src/views/system/About.vue)
  • API & Types: Define in app/src/api/
  • Exports: Favor named exports for functions

UI & Styling

  • Use Ant Design Vue components and UnoCSS for styling
  • Implement responsive design with mobile-first approach
  • Use Antdv Flex layout for responsive layouts

Performance Optimization

  • Leverage VueUse functions for enhanced reactivity
  • Wrap async components in Suspense with fallback UI
  • Use dynamic loading for non-critical components
  • Optimize images: WebP format, size data, lazy loading
  • Implement code splitting and chunking strategy in Vite build
  • Optimize Web Vitals (LCP, CLS, FID)

Code Quality

  • Always use ESLint MCP after generating frontend code to ensure code quality and consistency

Development Commands

  • Frontend: pnpm run dev, pnpm typecheck, pnpm run build
  • Backend: Standard Go commands (go run, go build, go test)

Language Requirements

  • All code comments, documentation, and communication must be in English
  • Maintain consistency and accessibility across the codebase
  • 优先使用 context7 mcp 搜索文档
  • 生成 find 命令的时候应该排除掉 ./.go/ 这个文件夹，因为那里面是 devcontainer 的依赖