# jasonku09/grill-with-ui architecture

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

- Interactive diagram: https://gitdiagram.com/jasonku09/grill-with-ui
- Repository: https://github.com/jasonku09/grill-with-ui

## Overview

grill-with-ui is an agent skill that moves a design interview into a local browser. The user stages answers and discussion, then sends them as one turn; the agent replies with answers and another question round, and ultimately writes a design document. The main runtime is deliberately small: SKILL.md guides the agent, server.mjs serves the session and mediates files and notifications, and page.html provides the interface. Explore deeper and Visualize are additional agent-led workflows. Details of page/server routes and the prompt are based on README documentation where source excerpts were unavailable.

Main entry points: [`server.mjs`](https://github.com/jasonku09/grill-with-ui/blob/main/server.mjs) (Server and CLI), [`page.html`](https://github.com/jasonku09/grill-with-ui/blob/main/page.html) (Interview page), [`SKILL.md`](https://github.com/jasonku09/grill-with-ui/blob/main/SKILL.md) (Visualize workflow)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interview["Interview workflow"]
  node_skill["Interview prompt<br/>[SKILL.md]"]
  node_page["Interview page<br/>[page.html]"]
  node_explore["Explore deeper<br/>[SKILL.md]"]
end

subgraph group_runtime["Local session runtime"]
  node_server["Server and CLI<br/>[server.mjs]"]
  node_patch["Patch validation<br/>[server.mjs]"]
  node_state[("Session state<br/>[server.mjs]")]
  node_events[("Send event log<br/>[server.mjs]")]
  node_monitor["Monitor / wait<br/>[server.mjs]"]
end

subgraph group_artifacts["Design artifacts"]
  node_visualize["Visualize workflow<br/>[SKILL.md]"]
  node_visual["Prototype or diagram"]
  node_design_doc["Exhaustive design doc"]
end

node_user(("User"))
node_agent(("Coding agent"))
node_subagent(("Visual subagent"))

node_agent -->|"follows"| node_skill
node_agent -->|"starts session"| node_server
node_user -->|"answers and stages"| node_page
node_page -->|"reads state / sends"| node_server
node_server -->|"serves interface"| node_page
node_server -->|"appends Sends"| node_events
node_server -->|"reads session"| node_state
node_agent -->|"submits changes"| node_patch
node_patch -->|"validates and writes"| node_state
node_server -->|"prints Send"| node_monitor
node_monitor -->|"delivers turn"| node_agent
node_agent -->|"requests analysis"| node_explore
node_explore -->|"returns pros and cons"| node_agent
node_agent -->|"requests visual"| node_visualize
node_visualize -->|"briefs drawing"| node_subagent
node_subagent -->|"creates or redraws"| node_visual
node_server -->|"serves artifact"| node_visual
node_user -->|"requests visualization"| node_visualize
node_user -->|"gives feedback"| node_visual
node_agent -->|"writes on finish"| node_design_doc

click node_skill "https://github.com/jasonku09/grill-with-ui/blob/main/SKILL.md"
click node_page "https://github.com/jasonku09/grill-with-ui/blob/main/page.html"
click node_explore "https://github.com/jasonku09/grill-with-ui/blob/main/SKILL.md"
click node_visualize "https://github.com/jasonku09/grill-with-ui/blob/main/SKILL.md"
click node_server "https://github.com/jasonku09/grill-with-ui/blob/main/server.mjs"
click node_patch "https://github.com/jasonku09/grill-with-ui/blob/main/server.mjs"
click node_state "https://github.com/jasonku09/grill-with-ui/blob/main/server.mjs"
click node_events "https://github.com/jasonku09/grill-with-ui/blob/main/server.mjs"
click node_monitor "https://github.com/jasonku09/grill-with-ui/blob/main/server.mjs"

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_skill,node_page,node_explore,node_user toneBlue
class node_server,node_patch,node_state,node_events,node_monitor toneAmber
class node_visualize,node_visual,node_design_doc toneMint
class node_agent,node_subagent toneIndigo
```

## Components

### Interview workflow

- [Interview prompt](https://github.com/jasonku09/grill-with-ui/blob/main/SKILL.md): `SKILL.md`
- [Interview page](https://github.com/jasonku09/grill-with-ui/blob/main/page.html): `page.html`
- [Explore deeper](https://github.com/jasonku09/grill-with-ui/blob/main/SKILL.md): `SKILL.md`

### Local session runtime

- [Server and CLI](https://github.com/jasonku09/grill-with-ui/blob/main/server.mjs): `server.mjs`
- [Patch validation](https://github.com/jasonku09/grill-with-ui/blob/main/server.mjs): `server.mjs`
- [Session state](https://github.com/jasonku09/grill-with-ui/blob/main/server.mjs): `server.mjs`
- [Send event log](https://github.com/jasonku09/grill-with-ui/blob/main/server.mjs): `server.mjs`
- [Monitor / wait](https://github.com/jasonku09/grill-with-ui/blob/main/server.mjs): `server.mjs`

### Design artifacts

- [Visualize workflow](https://github.com/jasonku09/grill-with-ui/blob/main/SKILL.md): `SKILL.md`
- **Prototype or diagram**
- **Exhaustive design doc**

### Other components

- **User**
- **Coding agent**
- **Visual subagent**

## Connections

- Coding agent → Interview prompt: follows
- Coding agent → Server and CLI: starts session
- User → Interview page: answers and stages
- Interview page → Server and CLI: reads state / sends
- Server and CLI → Interview page: serves interface
- Server and CLI → Send event log: appends Sends
- Server and CLI → Session state: reads session
- Coding agent → Patch validation: submits changes
- Patch validation → Session state: validates and writes
- Server and CLI → Monitor / wait: prints Send
- Monitor / wait → Coding agent: delivers turn
- Coding agent → Explore deeper: requests analysis
- Explore deeper → Coding agent: returns pros and cons
- Coding agent → Visualize workflow: requests visual
- Visualize workflow → Visual subagent: briefs drawing
- Visual subagent → Prototype or diagram: creates or redraws
- Server and CLI → Prototype or diagram: serves artifact
- User → Visualize workflow: requests visualization
- User → Prototype or diagram: gives feedback
- Coding agent → Exhaustive design doc: writes on finish