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

name, description, nextStepFile

name	description	nextStepFile
4c-implement-section	Implement the section following the story file precisely	./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.