feat: add cursor rules

.cursorrules/README.md

@@ -0,0 +1,50 @@
+---
+description: Main overview of Compass development rules and project structure
+alwaysApply: true
+---
+
+# Compass Calendar Development Rules
+
+You are an expert full-stack developer working on Compass, a calendar application built with React, TypeScript, Node.js, and MongoDB.
+
+## Project Overview
+
+This is a monorepo using Yarn workspaces with the following packages:
+
+- `@compass/web` - React/TypeScript frontend with Redux, styled-components, webpack
+- `@compass/backend` - Express.js REST API with MongoDB, Google Calendar sync, WebSocket support
+- `@compass/core` - Shared utilities, types, and business logic
+- `@compass/scripts` - CLI tools for building, database operations, user management
+
+## Rules Organization
+
+This directory contains focused rules for different aspects of development:
+
+- `naming-conventions.md` - File and variable naming standards
+- `testing.md` - Testing requirements and best practices
+- `styling.md` - Frontend styling and component standards
+- `validation.md` - Data validation patterns with Zod
+- `development.md` - Development workflow and commands
+- `accessibility.md` - Accessibility standards and requirements
+- `git-conventions.md` - Branch naming and commit message standards
+
+## Key Principles
+
+1. Prefer minimal modifications over extensive refactoring
+2. Always run relevant tests before completing a task
+3. Use TypeScript strictly - avoid `any` types
+4. Follow existing patterns in the codebase
+5. Write self-documenting code with clear variable names
+6. Ensure proper error handling for async operations
+
+## File Structure
+
+```
+packages/
+├── backend/src/     # Express.js API, MongoDB, Google Calendar sync
+├── web/src/         # React frontend, Redux state, styled-components
+├── core/src/        # Shared utilities, types, business logic
+└── scripts/src/     # CLI tools for builds and operations
+```
+
+Always reference these rules before making code changes. Write clean, maintainable, well-tested code following these established patterns.

.cursorrules/accessibility.md

@@ -0,0 +1,160 @@
+---
+description: Accessibility standards - semantic HTML, keyboard navigation, ARIA labels, refer to skills/a11y-audit/SKILL.md for comprehensive checklist
+globs:
+  - "packages/web/**/*.{ts,tsx}"
+---
+
+# Accessibility Standards
+
+This rule defines accessibility requirements for the Compass codebase, especially for `packages/web`.
+
+## Overview
+
+Follow accessibility best practices to ensure the application is usable by everyone, including users with disabilities.
+
+## Key Principles
+
+1. Use semantic HTML elements
+2. Provide keyboard navigation support
+3. Include proper ARIA labels and attributes
+4. Ensure sufficient color contrast
+5. Test with screen readers when possible
+
+## Detailed Guidelines
+
+Refer to the comprehensive accessibility audit checklist in:
+**`skills/a11y-audit/SKILL.md`**
+
+This skill provides:
+
+- Diff-first accessibility checklist
+- Semantic and structure requirements
+- Keyboard and focus management
+- ARIA correctness guidelines
+- Visual and motion considerations
+- Testing reliability patterns
+
+## Core Requirements
+
+### Semantic HTML
+
+Use appropriate HTML elements for their intended purpose.
+
+**DO:**
+
+- ✅ Use `<button>` for clickable actions
+- ✅ Use `<a>` for navigation links
+- ✅ Use `<h1>` through `<h6>` for headings
+- ✅ Use `<nav>`, `<main>`, `<header>`, `<footer>` for landmarks
+
+**DON'T:**
+
+- ❌ Use `<div>` with click handlers instead of `<button>`
+- ❌ Use `<span>` for interactive elements
+- ❌ Skip heading levels
+
+### Labels and Names
+
+All interactive elements must have accessible names.
+
+**Examples:**
+
+```tsx
+// Good - Input with label
+<label htmlFor="email">Email</label>
+<input id="email" type="email" />
+
+// Good - Icon button with aria-label
+<button aria-label="Add event">
+  <PlusIcon />
+</button>
+
+// Bad - Input without label
+<input type="email" />
+
+// Bad - Icon button without accessible name
+<button>
+  <PlusIcon />
+</button>
+```
+
+### Keyboard Navigation
+
+All interactive elements must be keyboard accessible.
+
+**Requirements:**
+
+- All buttons and links are reachable via Tab
+- Custom interactive elements have `tabIndex={0}`
+- Dialogs trap focus and return focus on close
+- Avoid `tabIndex > 0` (breaks natural tab order)
+
+### ARIA Attributes
+
+Use ARIA attributes when native semantics are insufficient.
+
+**Common patterns:**
+
+```tsx
+// Disclosure/Accordion
+<button aria-expanded={isOpen} aria-controls="panel-id">
+  Toggle
+</button>
+<div id="panel-id" hidden={!isOpen}>Content</div>
+
+// Dialog
+<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
+  <h2 id="dialog-title">Dialog Title</h2>
+  {/* content */}
+</div>
+```
+
+## Testing for Accessibility
+
+### Use Semantic Queries in Tests
+
+When writing tests in `packages/web`, use accessible queries:
+
+```typescript
+// Good - finds elements the way assistive tech does
+const button = getByRole('button', { name: /add event/i });
+const heading = getByRole('heading', { level: 2 });
+const textbox = getByLabelText('Email');
+
+// Bad - relies on implementation details
+const button = getByTestId('add-button');
+const heading = container.querySelector('.heading');
+```
+
+This aligns with the testing standards in `testing.md`.
+
+## Audit Checklist Reference
+
+For comprehensive review of UI changes, refer to:
+**`skills/a11y-audit/SKILL.md`**
+
+Key sections:
+
+- Semantics and structure
+- Labels and names
+- Keyboard and focus
+- ARIA correctness
+- Visual and motion
+- Testing reliability
+
+## Real Examples from Codebase
+
+Review these for accessibility patterns:
+
+- `packages/web/src/components/Button/`
+- `packages/web/src/components/Input/`
+- `packages/web/src/components/Modal/`
+
+## Summary
+
+- Use semantic HTML (`<button>`, `<a>`, headings, landmarks)
+- Provide accessible names (labels, `aria-label`)
+- Support keyboard navigation (Tab, Enter, Space)
+- Use ARIA when needed (`aria-expanded`, `aria-label`, `role`)
+- Test with semantic queries (`getByRole`, `getByLabelText`)
+- Refer to `skills/a11y-audit/SKILL.md` for detailed guidance

.cursorrules/development.md

@@ -0,0 +1,146 @@
+---
+description: Development workflow - setup commands, dev servers, testing, formatting, and environment requirements
+alwaysApply: false
+---
+
+# Development Workflow
+
+This rule defines development commands, setup, and workflow for the Compass codebase.
+
+## Initial Setup
+
+### Install Dependencies
+
+```bash
+yarn install --frozen-lockfile --network-timeout 300000
+```
+
+- Takes ~3.5 minutes
+- NEVER CANCEL the installation
+- Set timeout to 10+ minutes
+
+### Environment Configuration
+
+```bash
+cp packages/backend/.env.example packages/backend/.env
+```
+
+Edit `packages/backend/.env` with your credentials.
+
+## Development Servers
+
+### Web (Recommended for Frontend Work)
+
+```bash
+yarn dev:web
+```
+
+- Starts on http://localhost:9080/
+- Takes ~10 seconds to start
+- Frontend works standalone without backend services
+
+### Backend (Requires Full Setup)
+
+```bash
+yarn dev:backend
+```
+
+- Requires Google OAuth credentials
+- Requires Supertokens account
+- Requires MongoDB connection
+- See environment requirements below
+
+## Common Commands
+
+### Testing
+
+```bash
+yarn test:core      # Run core tests (~2 seconds)
+yarn test:web       # Run web tests (~15 seconds)
+yarn test:backend   # Run backend tests (~15 seconds)
+```
+
+### Code Formatting
+
+```bash
+yarn prettier . --write  # Format all code (~15 seconds)
+```
+
+### CLI Tools
+
+```bash
+yarn cli --help     # Shows all available CLI commands
+```
+
+## Environment Requirements
+
+### Required Environment Variables (backend/.env)
+
+```bash
+BASEURL=http://localhost:3000/api
+GOOGLE_CLIENT_ID=your_google_oauth_client_id_here
+GOOGLE_CLIENT_SECRET=your_google_oauth_secret_here
+SUPERTOKENS_URI=your_supertokens_instance_url_here
+SUPERTOKENS_KEY=your_supertokens_api_key_here
+MONGO_URI=your_mongodb_connection_string_here
+PORT=3000
+NODE_ENV=development
+TZ=Etc/UTC
+```
+
+### External Services
+
+The backend requires:
+
+- Google Cloud Project with OAuth 2.0 credentials
+- Supertokens account for user session management
+- MongoDB database (cloud or local)
+
+## Pre-commit Hooks
+
+The repository includes Husky hooks that automatically:
+
+- Run `yarn lint-staged` on pre-commit (formats code with Prettier)
+- Run `yarn prettier . --write` on pre-push (ensures consistent formatting)
+
+Your commits will pass these checks automatically.
+
+## Important Notes
+
+- The backend requires external service credentials to run
+- Frontend works standalone without backend services
+- Always use UTC timezone for consistency (`TZ=Etc/UTC`)
+- ESLint and Prettier configurations are already set up
+- The project uses React 18+ with the new JSX transform
+
+## File Structure
+
+```
+packages/
+├── backend/src/
+│   ├── auth/           # Google OAuth integration
+│   ├── calendar/       # Google Calendar API
+│   ├── event/          # Event CRUD operations
+│   ├── sync/           # Calendar synchronization
+│   ├── user/           # User management
+│   └── common/         # Shared backend utilities
+├── web/src/
+│   ├── views/          # React components and pages
+│   ├── store/          # Redux state management
+│   ├── common/         # Frontend utilities
+│   └── assets/         # Images and static files
+├── core/src/
+│   ├── types/          # TypeScript type definitions
+│   ├── constants/      # Shared constants
+│   ├── util/           # Utility functions
+│   └── mappers/        # Data transformation logic
+└── scripts/src/        # CLI tools
+```
+
+## Summary
+
+- Install with `yarn install --frozen-lockfile --network-timeout 300000`
+- Start frontend: `yarn dev:web` (recommended)
+- Run tests: `yarn test:web`, `yarn test:backend`, `yarn test:core`
+- Format code: `yarn prettier . --write`
+- Pre-commit hooks run automatically