FILE-INDEX.md 6.7 KB

Agentic Development - File Index

Location: src/workflows/wds-5-agentic-development/


๐Ÿ“ Complete File Structure

agentic-development/
โ”‚
โ”œโ”€โ”€ AGENTIC-DEVELOPMENT-GUIDE.md             โ† START HERE (overview & quick reference)
โ”œโ”€โ”€ workflow.md                               โ† Workflow overview with phase links
โ”œโ”€โ”€ PROTOTYPE-INITIATION-DIALOG.md            โ† Conversation scripts for initiation
โ”œโ”€โ”€ CREATION-GUIDE.md                         โ† Original detailed guide (reference)
โ”œโ”€โ”€ PROTOTYPE-ANALYSIS.md                     โ† Dog Week analysis (examples)
โ”‚
โ”œโ”€โ”€ steps-p/                                  โ† Micro-step workflow files
โ”‚   โ”œโ”€โ”€ 1-prototype-setup.md                  โ† Phase 1: Environment setup
โ”‚   โ”œโ”€โ”€ 2-scenario-analysis.md                โ† Phase 2: Analyze spec & create views
โ”‚   โ”œโ”€โ”€ 3-logical-view-breakdown.md           โ† Phase 3: Break view into sections
โ”‚   โ”œโ”€โ”€ 4a-announce-and-gather.md             โ† Phase 4a: Announce section
โ”‚   โ”œโ”€โ”€ 4b-create-story-file.md               โ† Phase 4b: Create story file
โ”‚   โ”œโ”€โ”€ 4c-implement-section.md               โ† Phase 4c: Implement code
โ”‚   โ”œโ”€โ”€ 4d-present-for-testing.md             โ† Phase 4d: Present for testing
โ”‚   โ”œโ”€โ”€ 4e-handle-issue.md                    โ† Phase 4e: Fix issues (loop)
โ”‚   โ”œโ”€โ”€ 4f-handle-improvement.md              โ† Phase 4f: Handle improvements (loop)
โ”‚   โ”œโ”€โ”€ 4g-section-approved.md                โ† Phase 4g: Section approved
โ”‚   โ””โ”€โ”€ 5-finalization.md                     โ† Phase 5: Integration test & approval
โ”‚
โ”œโ”€โ”€ templates/
โ”‚   โ”œโ”€โ”€ work-file-template.yaml               โ† Planning document template
โ”‚   โ”œโ”€โ”€ story-file-template.md                โ† Section implementation template
โ”‚   โ”œโ”€โ”€ page-template.html                    โ† Complete HTML page template
โ”‚   โ”œโ”€โ”€ PROTOTYPE-ROADMAP-template.md         โ† Scenario roadmap template
โ”‚   โ”œโ”€โ”€ demo-data-template.json               โ† Demo data structure template
โ”‚   โ””โ”€โ”€ components/
โ”‚       โ”œโ”€โ”€ dev-mode.html                     โ† Dev mode toggle button
โ”‚       โ”œโ”€โ”€ dev-mode.js                       โ† Dev mode logic (Shift+Click to copy IDs)
โ”‚       โ”œโ”€โ”€ dev-mode.css                      โ† Dev mode styles
โ”‚       โ””โ”€โ”€ DEV-MODE-GUIDE.md                 โ† Dev mode usage guide
โ”‚
โ””โ”€โ”€ examples/
    โ””โ”€โ”€ (Dog Week prototypes as reference)

๐Ÿ“š What Each File Does

Core Documentation

AGENTIC-DEVELOPMENT-GUIDE.md

Purpose: Complete system overview For: All agents (Freya, Saga) Contains:

  • System overview
  • Folder structure
  • Complete workflow summary
  • Key principles
  • Quick reference
  • Success metrics

Read this: To understand the complete system


workflow.md

Purpose: Workflow overview with phase navigation For: Freya (primary), other agents (reference) Contains:

  • Overview of all phases
  • Clear links to step files
  • When to use each phase
  • What each phase creates

Read this: To understand the workflow structure


Step Files

steps-p/1-prototype-setup.md

Purpose: Environment setup instructions Contains: Device compatibility, design fidelity, languages, demo data creation Next: Phase 2


steps-p/2-scenario-analysis.md

Purpose: Scenario analysis and view identification Contains: Spec analysis, logical view mapping Next: Phase 3


steps-p/3-logical-view-breakdown.md

Purpose: Break view into implementable sections Contains: Section breakdown, work file creation Next: Phase 4


steps-p/4a-4g-*.md (Phase 4 Loop)

Purpose: Section-by-section implementation Contains: Announce, create story, implement, test, handle feedback, approve Flow: 4a โ†’ 4b โ†’ 4c โ†’ 4d โ†’ [4e/4f loop] โ†’ 4g โ†’ [next section]


steps-p/5-finalization.md

Purpose: Integration test and completion Contains: Final test, quality checklist, next steps Next: New page (Phase 3) or new scenario (Phase 1)


Templates

templates/work-file-template.yaml

Purpose: Planning document When to use: Start of EVERY implementation Created: Once per page at beginning Contains:

  • Metadata (page info, device compatibility)
  • Design tokens (Tailwind config)
  • Page requirements (from spec)
  • Demo data needs
  • Object ID map
  • Section breakdown (4-8 sections)
  • Testing checklist

Use this: To create work file (plan BEFORE coding)


templates/story-file-template.md

Purpose: Section implementation guide When to use: Just-in-time (right before implementing each section) Created: Once per section (4-8 per page) Contains:

  • Section goal
  • What to build (HTML/JS)
  • Tailwind classes to use
  • Dependencies
  • Acceptance criteria
  • Test instructions
  • Common issues

Use this: To create story file before each section


templates/page-template.html

Purpose: Complete HTML page structure When to use: Creating new HTML page Created: Once per page (at start of Section 1) Contains:

  • Complete HTML structure
  • Tailwind CDN setup
  • Tailwind config inline
  • Component examples
  • Shared script includes

Use this: As starting point for new page HTML


๐ŸŽฏ Which File When?

Starting New Scenario

  1. Read: workflow.md (understand phases)
  2. Follow: steps-p/1-prototype-setup.md (setup)
  3. Use: PROTOTYPE-ROADMAP-template.md โ†’ Create roadmap
  4. Use: demo-data-template.json โ†’ Create demo data

Starting New Page

  1. Follow: steps-p/2-scenario-analysis.md (analyze)
  2. Follow: steps-p/3-logical-view-breakdown.md (break down)
  3. Use: work-file-template.yaml โ†’ Create work file
  4. Get approval

Implementing Each Section

  1. Follow: steps-p/4a-4g-*.md (loop)
  2. Use: story-file-template.md โ†’ Create story file (just-in-time)
  3. Implement in HTML (incrementally)
  4. Test
  5. Get approval
  6. Repeat for next section

Finishing Page

  1. Follow: steps-p/5-finalization.md (integration test)
  2. Get final approval
  3. Choose: New page, new scenario, or done

๐Ÿ“ Template Usage Summary

Template When Created How Many Purpose
work-file Start of page 1 per page Complete plan
story-file Before each section 4-8 per page Section implementation
page Start of Section 1 1 per page HTML structure
roadmap Start of scenario 1 per scenario Scenario overview
demo-data Setup scenario 1 per scenario Auto-loading data

All templates and micro-step instructions are ready!

Next step: Activate Freya and follow workflow.md โ†’ steps-p/1-prototype-setup.md