# System Architect

> System Architect

- Skill: `rashid2801/system-architect` (Agent Skill)
- Install (CLI): `npx skillmds@latest add rashid2801/system-architect`
- Raw SKILL.md: https://api.skillmd.com/api/skills/rashid2801/system-architect/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: RashiD2801 (https://skillmd.com/u/rashid2801)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/rashid2801/system-architect

---


# System Architect

Interview the user about their idea, then generate a self-contained architecture HTML file.

## Phase 1 — Interview

Ask clarifying questions conversationally — not all at once. Adapt to what the user has already shared. Stop when you have enough signal (usually 3–5 exchanges). Cover:

1. **Who uses it?** End users, internal team, automated systems, API consumers?
2. **What goes in?** What data, content, or actions trigger the system?
3. **What comes out?** What does a successful output look like?
4. **What are the key steps in between?** Processing, transformation, or decision logic?
5. **Where does data live?** Databases, files, external APIs, in-memory?
6. **What triggers things?** User action, schedule, webhook, event?
7. **Any constraints?** Scale, budget, existing stack, team skills?

Keep questions short and direct. If the user's answer already covers a point, skip it and move on.

## Phase 2 — Generate Files and Push to GitHub

Once you have enough information, create a folder for the project inside the local Ideas-and-systems repo and write two files into it.

**Local repo path:** `D:\AI\Ideas-and-systems`
**GitHub repo:** `https://github.com/RashiD2801/Ideas-and-systems`
**Folder name:** kebab-case of the project name, e.g. `receipt-scanner`

Write both files using their full absolute Windows paths:

1. `D:\AI\Ideas-and-systems\[project-name]\architecture-[project-name].html` — the full architecture diagram (see spec below)
2. `D:\AI\Ideas-and-systems\[project-name]\README.md` — a very short description of the idea (5–8 lines max):
   - One-line summary of what it is
   - Who it's for
   - What goes in / what comes out
   - The recommended tech stack (bullet list)
   - No headers, no fluff — just the essentials

After writing both files, run these git commands via Bash:

```
cd D:\AI\Ideas-and-systems
git add [project-name]/
git commit -m "Add: [project-name] architecture"
git push
```

Report the push result to the user.

---

The HTML file is named `architecture-[project-name].html` (kebab-case the project name).

### Colour palette — use exactly these, no deviations

| Role | Hex | Text |
|---|---|---|
| Inputs | `#1B3A2D` | white |
| Processes | `#4A7C6F` | white |
| Outputs | `#E8724A` | white |
| Storage / External | `#F9F6F1` with `#1B3A2D` border | `#1B3A2D` |
| Connectors / arrows | `#B0C4C1` | — |
| Background | `#F9F6F1` | — |
| Body text | `#1B3A2D` | — |

### SVG Flow Diagram

- Write raw inline SVG — no charting libraries (no D3, Mermaid, Chart.js, etc.)
- Nodes: 1–3 words max per label
- Layout: left-to-right horizontal flow, or top-to-bottom for pipeline shapes
- Node shapes:
  - Inputs → rounded rectangles (`rx="8"`)
  - Processes → rectangles
  - Outputs → rounded rectangles (`rx="8"`)
  - Storage → cylinder (ellipse + rect stacked)
  - External APIs → dashed-border rectangle
- Arrows: use SVG `<line>` or `<path>` with `marker-end` arrowhead in `#B0C4C1`
- No grid lines, no legends, no clutter
- Space nodes so nothing overlaps — calculate coordinates explicitly

### Tech Stack Panel

Below the diagram, a clean grid of 3–4 cards covering: Frontend / Backend / Data / Infrastructure (only include what's relevant). Each card: category name + 1-line rationale. No tables — use CSS grid cards.

- Category header colour: `#4A7C6F`
- Card background: white
- Card border: `1px solid #B0C4C1`
- Body text: `#1B3A2D`

### Page Structure

```
[Project name — top left, large, #1B3A2D]
[One-line description — subtitle, muted #4A7C6F]
[Divider — #B0C4C1]
[SVG Flow Diagram — centred, full width, padding 48px]
[Divider — #B0C4C1]
[Tech Stack Panel — CSS grid, 3–4 cards]
[Footer — "Generated by System Architect" in muted text]
```

### HTML file rules

- Fully self-contained — no external CDN links, no remote fonts
- Font: `font-family: 'Segoe UI', system-ui, sans-serif`
- All CSS in `<style>` in `<head>`
- All JS in `<script>` at end of `<body>`
- SVG inline (not `<img src>`)
- Must render correctly when opened offline in any browser

## After pushing

Tell the user: the folder name created in the repo, what nodes appear in the diagram, and the recommended stack — in 2–3 sentences. Nothing more.