How do I install the Webapp Consultant skill?

Run npx skillmds@latest add tomevault-io/webapp-consultant in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Webapp Consultant safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Webapp Consultant?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Webapp Consultant free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Webapp Consultant?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Webapp Consultant by tomevault-io — Agent Skill

Name: Webapp Consultant
Author: tomevault-io

Webapp Consultant

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. Use when this capability is needed.

tomevault-io 6d841c9 2 files · 4.4 KB Updated Sep 17, 2026

File contents

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`

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: webapp-consultantdescription: 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. Use when this capability is needed.---# Web App Development ConsultantOrchestrates 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 InteractiveArch 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 FolderAll 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```markdownTASK: [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 OutputComprehensive Markdown specification containing:1. Requirements document2. ASCII wireframes3. UX specification with philosophy4. Technical architecture5. Flow diagrams (Mermaid)6. Animation specifications7. Development roadmap8. 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` |---> Converted and distributed by [TomeVault](https://tomevault.io/claim/mineru98) — claim your Tome and manage your conversions.

Frequently asked questions