# Story [Page].[Section]: [Page Name] - [Section Name]

**Page**: [Page Number] [Page Name]  
**Section**: [N] of [Total]  
**Complexity**: Simple | Medium | Complex  
**Estimated Time**: [X] minutes

---

## 🎯 Goal

[Brief description of what this section accomplishes]

---

## 📋 What to Build

### HTML Elements

```html
<!-- [Description of HTML to add] -->
<div class="[tailwind-classes]">
    <!-- Specific HTML structure here -->
</div>
```

### JavaScript (if needed)

```javascript
// [Description of JavaScript functionality]
function [functionName]() {
    // Implementation
}
```

### Tailwind Classes to Use

**Key classes for this section**:
- `[class-category]`: `[specific-classes]`
- `[class-category]`: `[specific-classes]`

**Example combinations**:
```html
<!-- Input field -->
<input class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[project]-500">

<!-- Button -->
<button class="w-full py-3 bg-[project]-600 text-white rounded-lg font-semibold hover:bg-[project]-700 transition-colors">
```

---

## 🔗 Dependencies

**Shared code**:
- ✅ `shared/prototype-api.js` (already loaded)
- ✅ `shared/init.js` (already loaded)

**Components** (load if not already included):
- [ ] `components/image-crop.js` (if using image upload)
- [ ] `components/toast.js` (if showing notifications)
- [ ] `components/modal.js` (if using modals)
- [ ] `components/form-validation.js` (if validating forms)

---

## 📝 Implementation Steps

### Step 1: [First Step]
[What to do first]

### Step 2: [Second Step]
[What to do second]

### Step 3: [Third Step]
[What to do third]

---

## ✅ Acceptance Criteria

**After implementing this section, verify**:

1. [ ] [Criterion 1 - specific test]
2. [ ] [Criterion 2 - specific test]
3. [ ] [Criterion 3 - specific test]
4. [ ] [Criterion 4 - visual check]
5. [ ] [Criterion 5 - interaction check]

---

## 🧪 How to Test

**Test in browser**:

1. Open `[Page-Number]-[Page-Name].html`
2. [Specific action to take]
3. [What should happen]
4. [Another action]
5. [Expected result]

**Console checks**:
- Look for: `[Expected console log message]`
- No errors should appear

**Mobile viewport**:
- Resize browser to 375px width
- Verify [specific mobile behavior]

---

## 🐛 Common Issues & Fixes

### Issue: [Problem Description]
**Symptom**: [What user sees]  
**Cause**: [Why it happens]  
**Fix**: [How to fix it]

### Issue: [Problem Description]
**Symptom**: [What user sees]  
**Cause**: [Why it happens]  
**Fix**: [How to fix it]

---

## 🎨 Design Notes

**Visual requirements**:
- [Design consideration 1]
- [Design consideration 2]

**UX considerations**:
- [UX note 1]
- [UX note 2]

---

## 💡 Tips

- [Helpful tip 1]
- [Helpful tip 2]

---

## ➡️ Next Section

After this section is approved: `[Page].[NextSection]-[page-name]-[next-section-name].md`

---

## 📊 Status Tracking

**Status**: ⏸️ Not Started | 🚧 In Progress | ✅ Complete  
**Started**: [Date/Time]  
**Completed**: [Date/Time]  
**Approved By**: [Name]  
**Notes**: [Any special notes or changes made]

---

## 🔄 Changes from Original Plan

*Document any deviations from the work file plan here:*

- [Change 1 and reason]
- [Change 2 and reason]

