Web App Development Consultant

Orchestrates 8 specialized agents to transform vague customer requests into complete project specifications.

Tech Stack

• •Frontend: HTML + Tailwind CSS + vanilla JavaScript (ES6+)
• •Storage: LocalStorage (settings) + IndexedDB via localbase (data)
• •Backend: None (client-side only)

Agent Workflow

Customer Request (vague)
        ↓
  [1. Interviewer] ← Extract requirements
        ↓
  [2. UI Sketcher] → ASCII wireframes
        ↓
  [3. UX Spec Writer] → Technical spec with UX philosophy
        ↓
  ┌─────┼─────┐ (Parallel)
  ↓     ↓     ↓
[4]   [5]   [6]
Tech  Mermaid Interactive
Arch  Designer Designer
  └─────┼─────┘
        ↓
  [7. Planner] → Development roadmap
        ↓
  [8. Browser QA] → Quality verification

8 Agents

.shared Folder

All agents write outputs to .shared/ in the target repository:

[target-repo]/.shared/
├── 01-requirements.md
├── 02-wireframes.md
├── 03-ux-specification.md
├── 04-tech-architecture.md
├── 05-flow-diagrams.md
├── 06-animations.md
├── 07-roadmap.md
└── 08-qa-report.md

Execution Order

Sequential Phase

Interviewer → UI Sketcher → UX Spec Writer

Parallel Phase

Client Tech Architect + Mermaid Designer + Interactive Designer

Final Phase

Planner → Browser QA

Agent Delegation

TASK: [Goal]
EXPECTED OUTCOME: [Deliverable]
REQUIRED AGENT: [Agent name]
CONTEXT: [File paths, constraints]

MUST DO:
- [Requirement 1]
- [Requirement 2]

MUST NOT DO:
- [Forbidden action]

When to Use

Use when:

• •Customer request is vague or unclear
• •Planning new web app from scratch
• •Need comprehensive documentation before coding
• •Building HTML + Tailwind + vanilla JS app
• •Client-side only (no backend)

Don't use when:

• •Requirements already crystal clear
• •Building backend/server-side application
• •Need framework-specific planning (React/Vue)
• •Just need quick prototype

Final Output

Comprehensive Markdown specification containing:

1. •Requirements document
2. •ASCII wireframes
3. •UX specification with philosophy
4. •Technical architecture
5. •Flow diagrams (Mermaid)
6. •Animation specifications
7. •Development roadmap
8. •QA report

Reference Files