System architect

Skill RashiD2801/Skills/system-architect

When the user describes an idea, concept, tool, or app they want to build — even casually ("I want to make a tool that...", "I have an idea for...", "help me think through...") — use this skill to interview them and generate a clean system architecture HTML file. Activate on any of these phrases or intents: "I want to build", "I have an idea", "help me think through", "what would the architecture look like", "how would I structure this", "I'm thinking of making".From its SKILL.md

Install

npx -y skills add RashiD2801/Skills --skill system-architect

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

4.7 KB, ~1.2k tokens by cl100k_base, as published. Nobody here has run it

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:

Who uses it? End users, internal team, automated systems, API consumers?
What goes in? What data, content, or actions trigger the system?
What comes out? What does a successful output look like?
What are the key steps in between? Processing, transformation, or decision logic?
Where does data live? Databases, files, external APIs, in-memory?
What triggers things? User action, schedule, webhook, event?
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:

D:\AI\Ideas-and-systems\[project-name]\architecture-[project-name].html — the full architecture diagram (see spec below)
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.

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.