# faisalnoman/playwright-skills architecture

> Architecture diagram of the GitHub repository faisalnoman/playwright-skills, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/faisalnoman/playwright-skills
- Repository: https://github.com/faisalnoman/playwright-skills
- Video tour (about a minute): https://gitdiagram.com/faisalnoman/playwright-skills/video

## Overview

playwright-skills packages AI-agent skills for generating Playwright tests, installing a live E2E dashboard, and reporting real-device mobile tests. The main workflow is to invoke a skill, prepare or run tests, then view results in the dashboard; mobile runs can feed that same dashboard. The graph combines README capabilities with sampled server, reporter, and adapter behavior. Skill instructions describe additional features, but their implementations were not sampled, so uncertain internal wiring is omitted.

Main entry points: [`plugins/e2e-dashboard/skills/e2e-dashboard/templates/progress-server.js`](https://github.com/faisalnoman/playwright-skills/blob/master/plugins/e2e-dashboard/skills/e2e-dashboard/templates/progress-server.js) (Progress Server), [`plugins/playwright-setup/skills/playwright-setup/SKILL.md`](https://github.com/faisalnoman/playwright-skills/blob/master/plugins/playwright-setup/skills/playwright-setup/SKILL.md) (Playwright Setup), [`plugins/e2e-dashboard/skills/e2e-dashboard/templates/test-progress-dashboard.html`](https://github.com/faisalnoman/playwright-skills/blob/master/plugins/e2e-dashboard/skills/e2e-dashboard/templates/test-progress-dashboard.html) (Dashboard UI), [`plugins/e2e-dashboard/skills/e2e-dashboard/SKILL.md`](https://github.com/faisalnoman/playwright-skills/blob/master/plugins/e2e-dashboard/skills/e2e-dashboard/SKILL.md) (Dashboard Skill)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_skills["Agent Skills"]
  node_setup["Playwright Setup<br/>[SKILL.md]"]
  node_dashboard_skill["Dashboard Skill<br/>[SKILL.md]"]
  node_mobile_skill["Mobile Skill<br/>[SKILL.md]"]
end

subgraph group_dashboard["E2E Dashboard"]
  node_server["Progress Server<br/>[progress-server.js]"]
  node_reporter["Playwright Reporter"]
  node_ui["Dashboard UI"]
  node_spec_editor["Spec View/Edit"]
  node_run_history["Run History<br/>[progress-server.js]"]
  node_artifacts["Reports &amp; Artifacts<br/>[progress-server.js]"]
end

subgraph group_mobile["Mobile Testing"]
  node_tapflow["Tapflow Device Runs"]
  node_adapter["JUnit Adapter"]
end

node_user(("Developer"))
node_agents(("Coding Agents"))
node_project["Target Project"]
node_generated["Playwright Suite"]
node_device(("iOS / Android"))

node_user -->|"invokes skill"| node_agents
node_agents -->|"uses"| node_setup
node_setup -->|"scans"| node_project
node_setup -->|"generates"| node_generated
node_agents -->|"uses"| node_dashboard_skill
node_dashboard_skill -->|"installs"| node_server
node_server -->|"serves"| node_ui
node_ui -->|"starts runs"| node_server
node_server -->|"configures run"| node_reporter
node_reporter -->|"posts events"| node_server
node_server -->|"records runs"| node_run_history
node_server -->|"serves files"| node_artifacts
node_ui -->|"views edits"| node_spec_editor
node_agents -->|"uses"| node_mobile_skill
node_mobile_skill -->|"records runs"| node_tapflow
node_device -->|"runs on"| node_tapflow
node_tapflow -->|"writes JUnit"| node_adapter
node_adapter -.->|"posts events"| node_server

click node_setup "https://github.com/faisalnoman/playwright-skills/blob/master/plugins/playwright-setup/skills/playwright-setup/SKILL.md"
click node_dashboard_skill "https://github.com/faisalnoman/playwright-skills/blob/master/plugins/e2e-dashboard/skills/e2e-dashboard/SKILL.md"
click node_mobile_skill "https://github.com/faisalnoman/playwright-skills/blob/master/plugins/mobile-app-testing/skills/mobile-app-testing/SKILL.md"
click node_server "https://github.com/faisalnoman/playwright-skills/blob/master/plugins/e2e-dashboard/skills/e2e-dashboard/templates/progress-server.js"
click node_reporter "https://github.com/faisalnoman/playwright-skills/blob/master/plugins/e2e-dashboard/skills/e2e-dashboard/templates/realtime-reporter.js"
click node_ui "https://github.com/faisalnoman/playwright-skills/blob/master/plugins/e2e-dashboard/skills/e2e-dashboard/templates/test-progress-dashboard.html"
click node_spec_editor "https://github.com/faisalnoman/playwright-skills/blob/master/plugins/e2e-dashboard/skills/e2e-dashboard/templates/test-progress-dashboard.html"
click node_run_history "https://github.com/faisalnoman/playwright-skills/blob/master/plugins/e2e-dashboard/skills/e2e-dashboard/templates/progress-server.js"
click node_artifacts "https://github.com/faisalnoman/playwright-skills/blob/master/plugins/e2e-dashboard/skills/e2e-dashboard/templates/progress-server.js"
click node_adapter "https://github.com/faisalnoman/playwright-skills/blob/master/plugins/mobile-app-testing/skills/mobile-app-testing/templates/tapflow-report-adapter.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_setup,node_dashboard_skill,node_mobile_skill toneBlue
class node_server,node_reporter,node_ui,node_spec_editor,node_run_history,node_artifacts toneAmber
class node_tapflow,node_adapter toneMint
class node_user,node_agents,node_project,node_generated,node_device toneIndigo
```

## Components

### Agent Skills

- [Playwright Setup](https://github.com/faisalnoman/playwright-skills/blob/master/plugins/playwright-setup/skills/playwright-setup/SKILL.md): `plugins/playwright-setup/skills/playwright-setup/SKILL.md`
- [Dashboard Skill](https://github.com/faisalnoman/playwright-skills/blob/master/plugins/e2e-dashboard/skills/e2e-dashboard/SKILL.md): `plugins/e2e-dashboard/skills/e2e-dashboard/SKILL.md`
- [Mobile Skill](https://github.com/faisalnoman/playwright-skills/blob/master/plugins/mobile-app-testing/skills/mobile-app-testing/SKILL.md): `plugins/mobile-app-testing/skills/mobile-app-testing/SKILL.md`

### E2E Dashboard

- [Progress Server](https://github.com/faisalnoman/playwright-skills/blob/master/plugins/e2e-dashboard/skills/e2e-dashboard/templates/progress-server.js): `plugins/e2e-dashboard/skills/e2e-dashboard/templates/progress-server.js`
- [Playwright Reporter](https://github.com/faisalnoman/playwright-skills/blob/master/plugins/e2e-dashboard/skills/e2e-dashboard/templates/realtime-reporter.js): `plugins/e2e-dashboard/skills/e2e-dashboard/templates/realtime-reporter.js`
- [Dashboard UI](https://github.com/faisalnoman/playwright-skills/blob/master/plugins/e2e-dashboard/skills/e2e-dashboard/templates/test-progress-dashboard.html): `plugins/e2e-dashboard/skills/e2e-dashboard/templates/test-progress-dashboard.html`
- [Spec View/Edit](https://github.com/faisalnoman/playwright-skills/blob/master/plugins/e2e-dashboard/skills/e2e-dashboard/templates/test-progress-dashboard.html): `plugins/e2e-dashboard/skills/e2e-dashboard/templates/test-progress-dashboard.html`
- [Run History](https://github.com/faisalnoman/playwright-skills/blob/master/plugins/e2e-dashboard/skills/e2e-dashboard/templates/progress-server.js): `plugins/e2e-dashboard/skills/e2e-dashboard/templates/progress-server.js`
- [Reports & Artifacts](https://github.com/faisalnoman/playwright-skills/blob/master/plugins/e2e-dashboard/skills/e2e-dashboard/templates/progress-server.js): `plugins/e2e-dashboard/skills/e2e-dashboard/templates/progress-server.js`

### Mobile Testing

- **Tapflow Device Runs**
- [JUnit Adapter](https://github.com/faisalnoman/playwright-skills/blob/master/plugins/mobile-app-testing/skills/mobile-app-testing/templates/tapflow-report-adapter.js): `plugins/mobile-app-testing/skills/mobile-app-testing/templates/tapflow-report-adapter.js`

### Other components

- **Developer**
- **Coding Agents**
- **Target Project**
- **Playwright Suite**
- **iOS / Android**

## Connections

- Developer → Coding Agents: invokes skill
- Coding Agents → Playwright Setup: uses
- Playwright Setup → Target Project: scans
- Playwright Setup → Playwright Suite: generates
- Coding Agents → Dashboard Skill: uses
- Dashboard Skill → Progress Server: installs
- Progress Server → Dashboard UI: serves
- Dashboard UI → Progress Server: starts runs
- Progress Server → Playwright Reporter: configures run
- Playwright Reporter → Progress Server: posts events
- Progress Server → Run History: records runs
- Progress Server → Reports & Artifacts: serves files
- Dashboard UI → Spec View/Edit: views edits
- Coding Agents → Mobile Skill: uses
- Mobile Skill → Tapflow Device Runs: records runs
- iOS / Android → Tapflow Device Runs: runs on
- Tapflow Device Runs → JUnit Adapter: writes JUnit
- JUnit Adapter → Progress Server: posts events