AI Chief of Staff
You are an AI assistant helping to develop and maintain the AI Chief of Staff application—a productivity automation system that processes meeting transcripts and emails to generate actionable daily briefs, track commitments, and manage calendar blocks.
Application Overview
**Purpose:** Automate personal productivity workflows by:
Ingesting meeting transcripts and emailsUsing Claude AI to generate actionable daily briefsTracking commitments and priorities across a rolling 2-week context windowCreating and managing calendar blocks in iCloud calendar**Tech Stack:**
**Frontend:** React with modern hooks**Backend:** Node.js with Express**Database:** SQLite for context storage**AI:** Anthropic Claude API**Calendar:** iCloud calendar integration**Deployment:** Docker container**Project Structure:**
`/backend` — Express API server`/frontend` — React dashboard application`/docker` — Docker configuration filesDevelopment Guidelines
When working on this codebase, follow these principles:
1. **Component Design**
- Keep React components focused and reusable
- Use modern React hooks (useState, useEffect, useContext, etc.)
- Maintain clean separation between presentational and container components
2. **API Design**
- Follow REST API conventions for all endpoints
- Use proper HTTP methods (GET, POST, PUT, DELETE)
- Return consistent JSON response structures
3. **Security & Configuration**
- Store all sensitive data (API keys, credentials) in environment variables
- Never hardcode secrets in source code
- Use `.env` files for local development (excluded from version control)
4. **Architecture**
- Maintain strict separation between frontend and backend
- Frontend communicates with backend only through REST APIs
- Backend handles all data persistence, external API calls, and business logic
Styling Convention
**CRITICAL:** This project uses a strict CSS-first styling approach.
CSS Architecture
**USE CSS CLASSES ONLY** — No inline styles in JSX components**Exceptions:** Only use inline styles for truly dynamic runtime values: - Transform calculations: `style={{ transform: 'translateY(...)' }}`
- Animation delays: `style={{ animationDelay: '0.5s' }}`
- Progress percentages: `style={{ width: '${progress}%' }}`
- Conditional colors from API data: `style={{ backgroundColor: statusColor }}`
**DO NOT** use inline styles for static layouts, spacing, typography, or anything that can be a CSS classAll static styling belongs in `frontend/src/index.css`Build reusable utility classes for common patternsCheck existing CSS classes before creating new ones (100+ utility classes available)CSS Class Naming Conventions
**Semantic names:** `.task-card`, `.brief-content`, `.insights-widget`**Component-specific:** `.transcript-table-row`, `.deliverables-table`**Utility classes:** `.flex`, `.gap-md`, `.mt-lg`, `.text-center`**State variants:** `.btn-primary`, `.btn-secondary`, `.message-error`, `.message-success`**Markdown elements:** `.md-h1`, `.md-h2`, `.md-p`, `.md-strong`, `.md-table`Mobile-First Responsive Design
Base styles target mobile viewports (minimum 320px width)Desktop styles use `@media (min-width: 769px)` queriesTouch targets must be minimum 44px for iOS (Apple Human Interface Guidelines)Font-size minimum 16px on form inputs to prevent iOS auto-zoomAlways test on both mobile and desktop viewportsCSS Quality Rules
**NEVER** use `!important` — fix specificity issues properly**NEVER** use attribute selectors like `input[type="text"]` — use CSS classes insteadPrefer flexbox and CSS grid for layoutsUse CSS custom properties for theme colors (when implemented)Keep specificity low — avoid deep selector nestingGroup related styles together in `index.css` with section commentsBefore Writing New Styles
1. Check if a utility class already exists (`.flex`, `.gap-*`, `.mt-*`, `.mb-*`, `.text-*`)
2. Check if a component class exists (`.task-card`, `.form-box`, `.stat-box`)
3. If creating new classes, make them reusable across components
4. Add clear section comments in `index.css` for discoverability
Task Execution
When the user asks you to:
**Add features:** Follow the component and API design patterns established in the codebase**Fix bugs:** Check both frontend and backend; verify API responses and data flow**Style components:** Use CSS classes from `frontend/src/index.css` only; create new reusable classes if needed**Refactor code:** Maintain separation of concerns; improve reusability without breaking existing functionality**Add dependencies:** Update both `package.json` files (frontend and backend) as appropriate**Configure deployment:** Update Docker configuration files in `/docker`**Integrate APIs:** Store credentials in environment variables; document required env varsKey Integration Points
**Claude AI:** Backend calls Anthropic Claude API for brief generation**iCloud Calendar:** Backend manages calendar block creation and updates**SQLite Database:** Backend stores transcripts, emails, commitments, and context**Frontend-Backend Communication:** React app fetches data from Express REST APICode Quality
Write clean, readable, well-commented codeUse meaningful variable and function namesHandle errors gracefully with user-friendly messagesAdd logging for debugging and monitoringWrite modular code that's easy to test and extend