Add Feature

Add Feature

Scaffold a complete feature including types, database layer, API routes, UI components, state management, and tests.

Usage

When user requests to add a new major feature, ask for:

1. Feature name (e.g., "Water Tracking", "Sleep Logging", "Weight Management")
2. Feature description (what data it tracks, why it matters)
3. Data fields needed (with types and validation rules)
4. Dashboard components needed (card, chart, statistics)
5. Forms needed (input forms, edit forms)
6. Daily summary impact (whether it affects health score, true/false)

Implementation Process

This skill orchestrates the following steps:

Step 1: Create TypeScript Types

Create file: src/lib/types/{featureName}.ts

export interface FeatureEntity {
  id: string;
  date: string;
  field1: string;
  field2: number;
  createdAt: string;
}

// Validation schema types (for API)
export type FeatureInput = Omit<FeatureEntity, 'id' | 'createdAt'>;

Step 2: Create Repository

Use /generate-repository skill to create:

• src/lib/database/repositories/featureRepository.ts
• CRUD methods
• Date-based queries

Step 3: Create API Routes

Use /generate-api-route skill to create:

• src/app/api/feature/route.ts
• POST handler (create)
• DELETE handler (delete)
• Daily summary recalculation (if applicable)

Step 4: Create Store Actions

Use /generate-store-action skill to add to src/lib/store/healthStore.ts:

• State property for feature data
• fetchFeature() action
• addFeature() action
• deleteFeature() action

Step 5: Create Dashboard Card

Use /generate-card skill to create:

• src/components/dashboard/{FeatureName}Card.tsx
• Display key metrics
• Show trends or statistics
• Optional: Recharts integration

Step 6: Create Input Form

Use /generate-form skill to create:

• src/components/forms/{FeatureName}Form.tsx
• Form fields for data entry
• Validation logic
• Store action integration

Step 7: Create Tests

Use /generate-test skill to create:

• src/__tests__/lib/database/repositories/{FeatureName}.test.ts
• src/__tests__/components/forms/{FeatureName}Form.test.tsx
• src/__tests__/app/api/feature/route.test.ts

Step 8: Update Dashboard Layout

Edit: src/app/page.tsx or src/components/layout/MainLayout.tsx

• Import new card component
• Add to dashboard grid
• Position appropriately

Step 9: Update Navigation (if needed)

If feature has dedicated page:

• Create src/app/feature/page.tsx
• Create full page component
• Update navigation in Sidebar

Step 10: Database Schema Update

Add to: src/lib/database/schema.sql

• Create new table
• Define columns with types
• Add indexes for common queries

Full Feature Example: Water Tracking

1. Types (src/lib/types/water.ts)

export interface WaterLog {
  id: string;
  date: string;
  amount: number; // in ml
  time: string; // HH:MM format
  source: 'water' | 'beverage' | 'food';
  createdAt: string;
}

export type WaterInput = Omit<WaterLog, 'id' | 'createdAt'>;

2. Repository → /generate-repository

• Entity: WaterLog
• Table: water_logs
• Methods: addWaterLog, getWaterLogsByDate, deleteWaterLog

3. API Routes → /generate-api-route

• POST /api/water → create water log
• DELETE /api/water?id=X → delete water log
• Daily summary recalculation: YES

4. Store Actions → /generate-store-action

interface HealthState {
  waterLogs: WaterLog[];
  fetchDailyWaterLogs: (date: string) => Promise<void>;
  addWaterLog: (log: WaterInput) => Promise<void>;
  deleteWaterLog: (id: string) => Promise<void>;
}

5. Dashboard Card → /generate-card

• Card name: WaterIntakeCard
• Displays: Total ml today, Target vs actual, Timeline of entries
• Icon: Droplets
• Optional chart: Hourly water intake

6. Input Form → /generate-form

• Form name: WaterLogForm
• Fields: Amount (number), Time (time picker), Source (select)
• List: Shows today's water entries with ability to remove

7. Tests → /generate-test

• Repository tests: CRUD operations
• Form tests: Validation, submission
• API tests: POST, DELETE handlers

8. Update Dashboard

Add WaterIntakeCard to dashboard grid

Key Considerations

Database Schema

CREATE TABLE IF NOT EXISTS water_logs (
  id TEXT PRIMARY KEY,
  date TEXT NOT NULL,
  amount INTEGER NOT NULL,
  time TEXT NOT NULL,
  source TEXT NOT NULL,
  created_at TEXT NOT NULL,
  UNIQUE(date, time, source)
);

CREATE INDEX idx_water_logs_date ON water_logs(date);

Health Score Integration

If feature impacts health score:

• Update calculateHealthScore() in src/lib/utils/healthScoring.ts
• Update daily summary calculation in DailySummaryRepository
• Document scoring formula

Migrations

Document any schema changes needed:

• Create migration file or script
• Add instructions to DEVELOPMENT.md

Checklist

Complete feature should have:

• TypeScript types defined
• Database repository with CRUD
• API routes (POST, DELETE, GET)
• Zustand store actions
• Dashboard card component
• Input/edit forms
• Comprehensive tests
• Dashboard integration
• Database schema
• Optional: dedicated page
• Documentation updated (if major feature)

Coordination with Other Skills

This skill uses:

1. /generate-repository - for data access
2. /generate-api-route - for API endpoints
3. /generate-store-action - for state management
4. /generate-card - for dashboard widgets
5. /generate-form - for data entry
6. /generate-test - for test coverage

Each sub-skill handles a specific layer of the feature.

Best Practices

1. Start with types - Define data structure first
2. Database first - Create repository before using in API
3. API routes next - Implement endpoints before UI
4. Store actions - Wire up state management before components
5. UI components - Build forms and cards
6. Tests throughout - Write tests for each layer
7. Integration - Add to dashboard and navigation
8. Documentation - Update relevant docs

Output Structure

After using this skill, project structure should look like:

src/
├── lib/
│   ├── types/
│   │   └── waterTracking.ts
│   └── database/repositories/
│       └── waterTrackingRepository.ts
├── app/
│   └── api/
│       └── water/
│           └── route.ts
├── components/
│   ├── dashboard/
│   │   └── WaterIntakeCard.tsx
│   └── forms/
│       └── WaterLogForm.tsx
└── __tests__/
    ├── lib/
    │   └── database/repositories/
    │       └── WaterTracking.test.ts
    ├── components/
    │   └── forms/
    │       └── WaterLogForm.test.tsx
    └── app/
        └── api/water/
            └── route.test.ts

Implementation Checklist

• Request feature details from user
• Create TypeScript types
• Generate repository
• Generate API routes
• Generate store actions
• Generate dashboard card
• Generate form component
• Generate tests
• Update dashboard integration
• Update navigation (if page)
• Verify TypeScript compilation
• Run tests
• Commit changes with proper messages