wordle/.claude/skills/wds-5-agentic-development/templates/work-file-template.yaml

# ============================================================================
# PROTOTYPE WORK FILE: [Page Number] [Page Name]
# ============================================================================
# Purpose: Complete planning document for section-by-section implementation
# Created: [Date]
# Page Spec: ../[Scenario]/[Page-Number]-[Page-Name]/[Page-Number]-[Page-Name].md
# ============================================================================

metadata:
  page_number: "[Page-Number]"
  page_name: "[Page Name]"
  scenario: "[Scenario-Number]-[Scenario-Name]"
  complexity: "simple | medium | complex"
  estimated_sections: [Number]
  estimated_time: "[X] minutes"

  # Device Compatibility
  device_compatibility:
    type: "mobile-only | mobile-tablet | responsive | desktop-only"
    primary_viewport: "[Width]px"
    test_viewports:
      - width: 375
        height: 667
        device: "iPhone SE"
      - width: 393
        height: 852
        device: "iPhone 14 Pro"
      - width: 428
        height: 926
        device: "iPhone 14 Pro Max"
    breakpoints: [] # For mobile-only, leave empty
    touch_optimized: true
    hover_interactions: false

  dependencies:
    - "shared/prototype-api.js"
    - "shared/init.js"
    # Add component dependencies as needed

# ============================================================================
# DESIGN TOKENS (Tailwind Config)
# ============================================================================

design_tokens:
  colors:
    primary: "#2563eb"
    primary_hover: "#1d4ed8"
    success: "#10b981"
    error: "#ef4444"

  tailwind_config:
    theme_extend:
      colors:
        "[project-name]":
          50: "#eff6ff"
          500: "#2563eb"
          600: "#1d4ed8"
          700: "#1e40af"
      fontFamily:
        sans: "['Inter', 'system-ui', 'sans-serif']"

  components_available:
    - "image-crop (components/image-crop.js)"
    - "toast (components/toast.js)"
    - "modal (components/modal.js)"
    - "form-validation (components/form-validation.js)"

# ============================================================================
# PAGE REQUIREMENTS (from specification)
# ============================================================================

page_purpose: |
  [Brief description of what this page does and why user is here]

user_context:
  - [Context point 1: What user has done before arriving]
  - [Context point 2: What data is available]
  - [Context point 3: User's current state]

success_criteria:
  - [Criterion 1: What must be accomplished]
  - [Criterion 2: Required validations]
  - [Criterion 3: Data that must be saved]
  - [Criterion 4: Where user navigates on success]

# ============================================================================
# DEMO DATA REQUIREMENTS
# ============================================================================

demo_data_needed:
  current_user:
    firstName: "[Example]"
    lastName: "[Example]"
    email: "[example@email.com]"

  # Add other demo data needs (family, dogs, etc.)

  example_submission:
    # Example of completed form data
    field1: "[value]"
    field2: "[value]"

# ============================================================================
# OBJECT ID MAP (all interactive elements)
# ============================================================================

object_ids:
  header:
    - "[page]-header-back"
    - "[page]-header-title"

  form_inputs:
    - "[page]-input-[field1]"
    - "[page]-input-[field2]"
    # Add all form fields

  actions:
    - "[page]-button-submit"
    # Add all action buttons

# ============================================================================
# SECTION BREAKDOWN (implementation order)
# ============================================================================

sections:
  - id: "section-1"
    name: "Page Structure & Header"
    scope: "HTML skeleton, header with back button, title, main container"
    files_affected: ["[Page-Number]-[Page-Name].html"]
    dependencies: []
    object_ids:
      - "[page]-header-back"
      - "[page]-header-title"
    tailwind_classes:
      - "Layout: min-h-screen, bg-gray-50"
      - "Header: bg-white, border-b, px-4, py-3"
      - "Button: text-gray-600, hover:text-gray-900"
    acceptance_criteria:
      - "Header displays with back button and title"
      - "Back button navigates to previous page"
      - "Mobile viewport (375px) looks correct"
      - "Tailwind styles applied correctly"
    placeholder_message: "🚧 Building the form... Check back in a few minutes!"

  - id: "section-2"
    name: "[Section Name]"
    scope: "[What this section adds]"
    files_affected: ["[Page-Number]-[Page-Name].html"]
    dependencies: ["[component files if needed]"]
    object_ids:
      - "[object-id-1]"
      - "[object-id-2]"
    tailwind_classes:
      - "[List key Tailwind classes to use]"
    acceptance_criteria:
      - "[Test 1]"
      - "[Test 2]"
    placeholder_message: "[What's coming next]"

  # Add sections 3-6+ as needed

# ============================================================================
# JAVASCRIPT REQUIREMENTS
# ============================================================================

javascript_functions:
  initialization:
    - "initPage() - Page-specific initialization"
    - "[Other init functions]"

  form_handling:
    - "handleSubmit(event) - Form submission"
    - "validateForm() - Validate all fields"
    - "[Other form functions]"

  ui_interactions:
    - "[Interaction function 1]"
    - "[Interaction function 2]"

  api_calls:
    - "DogWeekAPI.[method]([params])"

  feedback:
    - "showToast(message, type)"
    - "setLoadingState(isLoading)"
    - "[Other feedback functions]"

# ============================================================================
# NAVIGATION
# ============================================================================

navigation:
  previous_page: "[Previous-Page].html"
  next_page_success: "[Next-Page].html"
  next_page_cancel: "[Cancel-Page].html"

# ============================================================================
# TESTING CHECKLIST (after all sections complete)
# ============================================================================

testing_checklist:
  functionality:
    - "[ ] All form fields work"
    - "[ ] Validation shows errors correctly"
    - "[ ] Submit button works"
    - "[ ] Loading states display"
    - "[ ] Success feedback shows"
    - "[ ] Error handling works"
    - "[ ] Navigation works (back, next)"
    - "[ ] Data persists (reload page test)"

  mobile_testing:
    - "[ ] Viewport is correct width"
    - "[ ] All tap targets min 44x44px"
    - "[ ] Text is readable (min 16px)"
    - "[ ] No horizontal scroll"
    - "[ ] Touch gestures work (if applicable)"

  code_quality:
    - "[ ] All Object IDs present"
    - "[ ] Console logs helpful"
    - "[ ] No console errors"
    - "[ ] Tailwind classes properly used"
    - "[ ] Functions documented"

  accessibility:
    - "[ ] Keyboard navigation works"
    - "[ ] Form labels present"
    - "[ ] Error messages clear"
    - "[ ] Focus states visible"

# ============================================================================
# MIGRATION NOTES (for production)
# ============================================================================

migration_todos:
  - "Replace DogWeekAPI.[method]() with Supabase calls"
  - "[Other production migration tasks]"

# ============================================================================
# KNOWN ISSUES / EDGE CASES
# ============================================================================

edge_cases:
  - "[Edge case 1 to handle]"
  - "[Edge case 2 to handle]"

# ============================================================================
# COMPLETION CRITERIA
# ============================================================================

definition_of_done:
  - "All sections implemented and tested"
  - "All object IDs present and correct"
  - "All acceptance criteria met"
  - "Console logs helpful and clear"
  - "Mobile viewport works perfectly"
  - "Demo data loads automatically"
  - "Form validation complete"
  - "Success/error feedback working"
  - "Navigation works"
  - "No console errors"
  - "Code is clean"
  - "Story files document all sections"