guesung · guesung · Apr 9, 2025 · Apr 9, 2025 · Apr 9, 2025
@@ -0,0 +1,48 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+## Coding Preferences - Code Style & Quality Standards
+
+### Core Principles
+- **Simplicity**: Always prioritize the simplest solution over complexity
+- **DRY (Don't Repeat Yourself)**: Avoid code duplication, reuse functionality
+- **Organization**: Keep files under 300 lines, refactor when needed
+- **Documentation**: Create `/docs/[component].md` after major component development
+
+### Code Structure
+- Use functional, declarative programming (avoid classes)
+- Favor composition over inheritance
+- Structure files: exports → subcomponents → helpers → types
+- Follow naming conventions:
+  - Use descriptive names with auxiliary verbs (isLoading, handleClick)
+  - Use lowercase with dashes for directories (components/auth-wizard)
+  - Prefer named exports for components
+- Apply RORO pattern (Receive Object, Return Object)
+
+### JavaScript/TypeScript
+- Use "function" keyword for pure functions, omit semicolons
+- Prefer interfaces over types, use maps instead of enums
+- Minimize conditional syntax:
+  - Avoid unnecessary curly braces
+  - Omit braces for single-line statements
+- Always start with proper TypeScript interfaces/types
+
+### Error Handling
+- Handle errors and edge cases first (early returns)
+- Place happy path last for better readability
+- Avoid nested if statements and unnecessary else blocks
+- Use guard clauses for preconditions
+- Return errors as values in Server Actions rather than try/catch
+- Create error boundaries in error.tsx and global-error.tsx files
+- Services should throw user-friendly errors (for tanStackQuery)
+
+### React Components
+- Write as functions (not arrow functions stored in constants)
+- Use declarative JSX
+- Extract static content to variables outside render functions
+- Place interfaces and types at file end
+- Prioritize Server Components where possible
+- Minimize 'use client' usage (only for Web API access)
+- Wrap client components in Suspense with fallback 
@@ -0,0 +1,43 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+## Communication Preferences - AI-Human Interaction
+
+### Response Style
+- You are an expert in TypeScript, Node.js, Next.js, React, and modern web development
+- Write concise, technical responses with accurate TypeScript examples
+- Focus on practical solutions rather than theoretical explanations
+- Provide direct answers without unnecessary explanations when possible
+- Use markdown formatting for code examples and important points
+- Begin all responses with a random emoji(e.g: 🐙) to verify context maintenance
+
+### Problem-Solving Approach
+- When addressing coding problems:
+  1. First understand the context and requirements
+  2. Analyze existing code patterns and styles
+  3. Propose solutions that match the established project standards
+  4. Consider performance, maintainability, and best practices
+  5. Provide concrete code examples when helpful
+
+### Planning Complex Tasks
+- For complex features, outline a step-by-step plan before implementation
+- Break down large tasks into smaller, manageable components
+- Prioritize critical functionality first
+- Consider edge cases and error scenarios early
+
+### Documentation Guidelines
+- Provide concise comments for complex code sections
+- Focus on "why" rather than "what" in comments
+- For API documentation, include:
+  - Purpose
+  - Parameters
+  - Return values
+  - Example usage
+  - Error handling
+
+### Learning Resources
+- When suggesting resources, prioritize official documentation
+- Prefer up-to-date resources specific to the technologies in use
+- Reference Next.js documentation for patterns and best practices 
@@ -0,0 +1,78 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+## Tech Stack - Tools & Technologies
+
+### Core Technologies
+- TypeScript, Node.js, Next.js 14 App Router
+- React 18 with React Server Components (RSC)
+- Supabase for backend, database, and authentication
+- React Hook Form for form management
+- Shadcn UI with Tailwind CSS
+<!-- - Zod for schema validation and type safety -->
+
+### Architecture - Monorepo Structure
+- Turborepo for monorepo management
+- Packages structure:
+  - app/ - Chrome extension application
+  - web/ - Web application
+  - shared/ - Shared utilities and types
+  - ui/ - UI components library
+  - server/ - Backend services
+  - storage/ - Storage management
+  - vite-config/ - Vite configuration
+  - tailwind-config/ - Tailwind CSS configuration
+  - tsconfig/ - TypeScript configuration
+  - dev-utils/ - Development utilities
+  - hmr/ - Hot Module Replacement
+  - zipper/ - Extension packaging
+
+### Backend & Database
+- Supabase
+  - Authentication
+  - Database
+  - Real-time subscriptions
+  - Type generation
+
+### State Management & Data Fetching
+- TanStack Query (React Query) v5
+- React Hook Form for form management
+
+### UI & Styling
+- Tailwind CSS
+- Framer Motion for animations
+- Lucide React for icons
+- Next Themes for theme management
+
+### Testing
+- Vitest for unit testing
+- Playwright for E2E testing
+- Jest for testing utilities
+
+### Development Tools
+- ESLint for code linting
+- Prettier for code formatting
+- Husky for git hooks
+- TypeScript for type safety
+- Sentry for error tracking
+
+### Build & Development
+- Vite for development server
+- Turbo for build system
+- Cross-env for environment variables
+- Rimraf for file system operations
+
+### Chrome Extension Specific
+- Chrome Extension Manifest V3
+- Cross-browser compatibility (Chrome/Firefox)
+
+### Development Workflow
+- Git-based version control
+- GitHub Actions for CI/CD
+- Automated version updates
+- Code quality checks
+- Automated testing
+- Cross-browser testing
+- Error tracking and monitoring