DDAD for UI Development

Overview

This example demonstrates using DDAD to build a UI component. DDAD controls component hierarchy, props and state, interaction flows, accessibility requirements, and error and empty states.

Scenario

Build a User Profile editing component.

Step 1: Create LLD Markdown

# LLD.md

## Component: User Profile Editor

### Component Hierarchy
- UserProfileEditor (parent)
  - UserProfileForm (form component)
    - TextInput (name)
    - TextInput (email)
    - TextArea (bio)
  - SaveButton
  - CancelButton

### Props and State
- **Props**: 
  - user: User object
  - onSave: callback function
  - onCancel: callback function
- **State**:
  - formData: { name, email, bio }
  - errors: { name?, email?, bio? }
  - isSubmitting: boolean

### Interaction Flows
1. User clicks Edit → form becomes editable
2. User modifies fields → validation runs on blur
3. User clicks Save → validation runs → API call → success/error
4. User clicks Cancel → form resets to original values

### Validation Rules
- **Name**: Required, 2-50 characters
- **Email**: Required, valid email format
- **Bio**: Optional, max 500 characters

### Error States
- Validation errors shown below each field
- API errors shown at top of form
- Network errors show retry option

### Empty States
- Loading: Show spinner
- No user: Show "No profile found" message

### Accessibility Requirements
- All inputs have labels
- Error messages associated with inputs (aria-describedby)
- Keyboard navigation supported
- Focus management on save/cancel

Step 2: Create TODO Item

# TODO.md

## TODO

### Create User Profile Editor Component
- **LLD Reference**: LLD.md - "User Profile Editor"
- **Dependencies**: None
- **Status**: TODO

Step 3: AI Execution

AI reads:

  1. AGENTS.md: Understands it’s a Frontend Component Agent
  2. TODO.md: Finds authorized work item
  3. LLD.md: Reads “User Profile Editor” section

AI generates:

AI commits:

Implement user profile editor component (TODO: Create User Profile Editor Component)

AI updates TODO.md:

## DONE

### Create User Profile Editor Component
- **LLD Reference**: LLD.md - "User Profile Editor"
- **Status**: DONE

Step 4: Human Review and Verification

Human reviews design and verifies code:

Note: In DDAD, design is reviewed and code is verified. No AI code review tools are used. Code correctness is determined by conformance to design.

What DDAD Controlled

Key Takeaway

Design artifacts (LLD) defined UI behavior.
AI executed design exactly as specified.