Cursor + Product Teams

Create an interactive dashboard prototype:

Layout:
- Header with logo and user menu
- 4 metric cards (Revenue, Users, Conversion, Churn)
- 2 charts (Revenue trend line, User growth bars)

Data:
- Mock data (last 30 days)
- Update every 5 seconds (simulate real-time)
- Animate transitions

Tech: React + Recharts, Tailwind CSS, responsive
Style: Modern, purple/blue theme, dark mode support

export function AnalyticsDashboard() {
  const [metrics, setMetrics] = useState({
    revenue: '$142,500',
    users: '8,234',
    conversion: '3.2%',
    churn: '1.8%'
  });
  
  const [chartData] = useState(generateMockData());
  const [darkMode, setDarkMode] = useState(false);
  
  // Simulate real-time updates
  useEffect(() => {
    const interval = setInterval(() => {
      setMetrics(prev => ({
        ...prev,
        revenue: formatCurrency(
          parseCurrency(prev.revenue) + Math.random() * 1000
        ),
        users: (
          parseInt(prev.users.replace(/,/g, '')) + 
          Math.floor(Math.random() * 10)
        ).toLocaleString()
      }));
    }, 5000);
    
    return () => clearInterval(interval);
  }, []);
  
  return (
    <div className={darkMode ? 'dark' : ''}>
      <header className="bg-white dark:bg-gray-800 px-6 py-4 
                         flex justify-between items-center">
        <h1 className="text-2xl font-bold">Analytics Pro</h1>
        <button 
          onClick={() => setDarkMode(!darkMode)}
          className="text-2xl"
        >
          {darkMode ? '🌞' : '🌙'}
        </button>
      </header>
      
      <div className="grid grid-cols-4 gap-6 p-6">
        <MetricCard 
          title="Revenue" 
          value={metrics.revenue} 
          change={12.5} 
        />
        <MetricCard 
          title="Active Users" 
          value={metrics.users} 
          change={8.3} 
        />
        <MetricCard 
          title="Conversion" 
          value={metrics.conversion} 
          change={-2.1} 
        />
        <MetricCard 
          title="Churn Rate" 
          value={metrics.churn} 
          change={-5.4} 
        />
      </div>
      
      <div className="grid grid-cols-2 gap-6 p-6">
        <RevenueLineChart data={chartData} darkMode={darkMode} />
        <UserGrowthBarChart data={chartData} darkMode={darkMode} />
      </div>
    </div>
  );
}

# Email Notifications System

## Notification Types

### Security (Always Sent)
- Password changed
- New login from unknown device
- Two-factor auth enabled/disabled

### Activity (User Configurable)
- New follower
- Comment on post
- Weekly digest

### Marketing (Opt-in Only)
- Product updates
- Promotional offers

## Business Rules

1. Security notifications are mandatory (cannot disable)
2. Activity notifications: max 10 emails/day (rate limiting)
3. Marketing requires explicit consent
4. All emails include unsubscribe link
5. Failed sends retry 3 times (exponential backoff)

## API Endpoints

### GET /api/notifications/preferences
Returns user's current notification preferences

### PUT /api/notifications/preferences
Updates preferences

Validation:
- Cannot disable security notifications (return 400)
- Marketing opt-in requires explicit consent field

## Implementation Requirements
- Use existing EmailService (@services/email.js)
- Store preferences in users.notification_settings (JSONB)
- Log all preference changes for audit
- Rate limiting tracked in Redis

specs/templates/
├── api-endpoint.md        # RESTful API specification
├── user-workflow.md       # Multi-step user journey
├── data-model.md          # Database schema and rules
├── integration.md         # Third-party integration
└── background-job.md      # Async processing task

# API Endpoint Specification Template

## Endpoint
[METHOD] /api/[resource]/[action]

## Purpose
[One sentence describing what this endpoint does]

## Authentication
- [ ] Public (no auth required)
- [ ] Authenticated users only
- [ ] Specific roles: [list roles]

## Request

### Headers
- Content-Type: application/json
- Authorization: Bearer {token}

### Body Schema
```json
{
  "field1": "string (required, max 100 chars)",
  "field2": "number (optional, min 0)"
}
```

### Validation Rules
1. [Field-specific validation]
2. [Cross-field validation]
3. [Business rule validation]

## Response

### Success (200)
```json
{
  "data": { ... },
  "meta": { ... }
}
```

### Error Cases
* 400: Validation error
* 401: Unauthorized
* 403: Forbidden
* 404: Resource not found
* 429: Rate limit exceeded

## Business Rules
1. [Rule with enforcement point]
2. [Rule with edge case handling]

## Testing Requirements
* [ ] Happy path test
* [ ] All error cases covered
* [ ] Rate limiting verified
* [ ] Authorization checked

## Performance Requirements
* Response time: < [X]ms p95
* Throughput: > [Y] req/sec

// tests/spec-validation/email-notifications.test.js
describe('Email Notifications Spec Compliance', () => {
  test('security notifications cannot be disabled per spec', async () => {
    // Reference: specs/email-notifications.md, Rule #1
    const response = await updatePreferences({ 
      security: { enabled: false } 
    });
    
    expect(response.status).toBe(400);
    expect(response.body.error).toMatch(/cannot be disabled/i);
  });
  
  test('activity emails rate limited to 10/day per spec', async () => {
    // Reference: specs/email-notifications.md, Rule #2
    const emailsSent = await sendActivityEmails(11);
    
    expect(emailsSent).toBe(10);
    expect(lastEmailResult.reason).toBe('rate_limit');
  });
  
  test('marketing requires explicit consent per spec', async () => {
    // Reference: specs/email-notifications.md, Rule #3
    const response = await updatePreferences({
      marketing: { enabled: true }
      // No marketingConsent field
    });
    
    expect(response.status).toBe(400);
    expect(response.body.error).toMatch(/explicit consent/i);
  });
});