| name | webapp-consultant |
| description | Transform vague requirements into detailed specifications for HTML + Tailwind + vanilla JS web apps. Use when customers describe features vaguely, need project documentation, or want technical specifications without backend. |
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
| # | Agent | Output | Purpose |
|---|
| 1 | Interviewer | 01-requirements.md | Extract clear requirements |
| 2 | UI Sketcher | 02-wireframes.md | ASCII wireframes |
| 3 | UX Spec Writer | 03-ux-specification.md | UX spec with Norman/Nielsen |
| 4 | Client Tech Architect | 04-tech-architecture.md | Data architecture |
| 5 | Mermaid Designer | 05-flow-diagrams.md | User flow diagrams |
| 6 | Interactive Designer | 06-animations.md | Tailwind animations |
| 7 | Planner | 07-roadmap.md | MoSCoW priorities, phases |
| 8 | Browser QA | 08-qa-report.md | QA test report |
.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:
- Requirements document
- ASCII wireframes
- UX specification with philosophy
- Technical architecture
- Flow diagrams (Mermaid)
- Animation specifications
- Development roadmap
- QA report
Reference Files
| Task | Reference |
|---|
| Overall workflow | references/workflow.md |
| Agent coordination | references/shared-folder-spec.md |
| Common tools | references/common-agent-tools.md |
| Detailed guide | references/skill-detailed-guide.md |
| Usage examples | references/skill-usage-examples.md |
