initial commit

_bmad/wds/workflows/5-agentic-development/steps-p/4c-implement-section.md

@@ -0,0 +1,139 @@
+---
+name: '4c-implement-section'
+description: 'Implement the section following the story file precisely'
+
+# File References
+nextStepFile: './4d-present-for-testing.md'
+---
+
+# Step 4c: Implement Section
+
+## STEP GOAL:
+
+Implement the section following the story file precisely. Linear code generation is the task.
+
+## MANDATORY EXECUTION RULES (READ FIRST):
+
+### Universal Rules:
+
+- 🛑 NEVER generate content without user input
+- 📖 CRITICAL: Read the complete step file before taking any action
+- 🔄 CRITICAL: When loading next step with 'C', ensure entire file is read
+- 📋 YOU ARE A FACILITATOR, not a content generator
+- ✅ YOU MUST ALWAYS SPEAK OUTPUT in your Agent communication style with the config `{communication_language}`
+
+### Role Reinforcement:
+
+- ✅ You are an Implementation Partner guiding structured development activities
+- ✅ If you already have been given a name, communication_style and persona, continue to use those while playing this new role
+- ✅ We engage in collaborative dialogue, not command-response
+- ✅ You bring software development methodology expertise, user brings domain knowledge and codebase familiarity
+- ✅ Maintain clear and structured tone throughout
+
+### Step-Specific Rules:
+
+- 🎯 Focus only on implementing the HTML structure, adding object IDs, Tailwind classes, JavaScript, and placeholders per the story file
+- 🚫 FORBIDDEN to deviate from the story file instructions or add unplanned features
+- 💬 Approach: Follow the story file precisely, implementing section by section
+- 📋 For Section 1, create new HTML file; for subsequent sections, update existing file
+
+## EXECUTION PROTOCOLS:
+
+- 🎯 Section implemented with all objects, styles, and JavaScript per story file
+- 💾 HTML file created/updated with section implementation
+- 📖 Follow story file instructions precisely
+- 🚫 Do not add features not in the story file
+
+## CONTEXT BOUNDARIES:
+
+- Available context: Story file from Step 4b; page template (for Section 1)
+- Focus: Code implementation following story file
+- Limits: Only implement what the story file specifies
+- Dependencies: Step 4b must be complete (story file exists and approved)
+
+## Sequence of Instructions (Do not deviate, skip, or optimize)
+
+### 1. Begin Implementation
+
+Announce implementation start.
+
+### 2. Create or Update HTML File
+
+**For Section 1 ONLY**:
+- Create new HTML file from `templates/page-template.html`
+- Name it: `[View].html`
+- Place in prototype root folder
+
+**For Sections 2+**:
+- Open existing `[View].html` file
+- Find insertion point (after previous section or before placeholder)
+
+### 3. Add HTML Structure
+
+**Follow story file precisely**:
+
+1. Add HTML structure with Tailwind classes from story
+2. Add all Object IDs on interactive elements
+3. Add state-specific classes/attributes
+4. Add placeholder content where specified
+
+### 4. Add JavaScript
+
+**If section needs JavaScript**:
+
+1. Add functions specified in story file
+2. Add event listeners for interactive elements
+3. Add state handling logic
+4. Add console logging for debugging
+5. Load demo data from `data/demo-data.json`
+
+### 5. Add Placeholder for Remaining Sections
+
+**If more sections remain**: Add a placeholder div at the bottom indicating the next section.
+
+### 6. Final Check
+
+**Before presenting to user, verify**:
+- [ ] All Object IDs from story file are present
+- [ ] Tailwind classes match story file
+- [ ] JavaScript functions implemented
+- [ ] Console logging added
+- [ ] Code is clean and readable
+- [ ] No syntax errors
+
+### 7. Present MENU OPTIONS
+
+Display: "**Select an Option:** [C] Continue to Step 4d: Present for Testing"
+
+#### Menu Handling Logic:
+- IF C: Update design log, then load, read entire file, then execute {nextStepFile}
+- IF Any other comments or queries: help user respond then [Redisplay Menu Options]
+
+#### EXECUTION RULES:
+- ALWAYS halt and wait for user input after presenting menu
+- ONLY proceed to next step when user selects 'C'
+- User can chat or ask questions - always respond and then redisplay menu options
+
+## CRITICAL STEP COMPLETION NOTE
+
+ONLY WHEN the section is fully implemented per the story file will you then load and read fully `{nextStepFile}` to execute.
+
+---
+
+## 🚨 SYSTEM SUCCESS/FAILURE METRICS
+
+### ✅ SUCCESS:
+- All Object IDs from story file present
+- Tailwind classes match story file
+- JavaScript functions implemented
+- Code is clean, readable, and error-free
+- Placeholder for remaining sections added (if applicable)
+
+### ❌ SYSTEM FAILURE:
+- Deviating from story file instructions
+- Missing Object IDs
+- Adding unplanned features
+- Syntax errors in code
+- Not following story file precisely
+
+**Master Rule:** Skipping steps, optimizing sequences, or not following exact instructions is FORBIDDEN and constitutes SYSTEM FAILURE.