# ilm-alan/frontend-design architecture

> Architecture diagram of the GitHub repository ilm-alan/frontend-design, 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/ilm-alan/frontend-design
- Repository: https://github.com/ilm-alan/frontend-design

## Overview

This repository is a design-instruction skill for coding assistants, not a runtime application. Its documented workflow guides an assistant from a design brief through choosing one of eight aesthetic anchors, an anchor-specific visual move, and CSS aligned to that anchor’s tokens. The tree and README support this flow; without source excerpts, implementation details beyond the documented instructions are omitted.

Main entry points: [`SKILL.md`](https://github.com/ilm-alan/frontend-design/blob/main/SKILL.md) (Chosen anchor)

## Diagram (Mermaid)

```mermaid
flowchart TD

node_user(("Design requester"))
node_assistant["Coding assistant"]
node_skill["Design skill<br/>[SKILL.md]"]
node_anchor["Chosen anchor<br/>[SKILL.md]"]
node_tokens["Anchor tokens<br/>[SKILL.md]"]
node_visual_move["Memorable move<br/>[SKILL.md]"]
node_css["CSS result"]
node_swiss["Swiss<br/>[SKILL.md]"]
node_industrial["Industrial<br/>[SKILL.md]"]
node_brutalist["Brutalist<br/>[SKILL.md]"]
node_aurora["Aurora Maximalism<br/>[SKILL.md]"]
node_chaotic["Chaotic Maximalism<br/>[SKILL.md]"]
node_retro["Retro-Futuristic<br/>[SKILL.md]"]
node_organic["Organic<br/>[SKILL.md]"]
node_lofi["Lo-Fi<br/>[SKILL.md]"]

node_user -->|"provides brief"| node_assistant
node_assistant -->|"consults"| node_skill
node_skill -->|"requests choices"| node_assistant
node_assistant -->|"chooses"| node_anchor
node_anchor -->|"locks"| node_tokens
node_assistant -->|"defines"| node_visual_move
node_assistant -->|"writes"| node_css
node_swiss -->|"option for"| node_anchor
node_industrial -->|"option for"| node_anchor
node_brutalist -->|"option for"| node_anchor
node_aurora -->|"option for"| node_anchor
node_chaotic -->|"option for"| node_anchor
node_retro -->|"option for"| node_anchor
node_organic -->|"option for"| node_anchor
node_lofi -->|"option for"| node_anchor
node_tokens -->|"constrains"| node_css

click node_skill "https://github.com/ilm-alan/frontend-design/blob/main/SKILL.md"
click node_anchor "https://github.com/ilm-alan/frontend-design/blob/main/SKILL.md"
click node_tokens "https://github.com/ilm-alan/frontend-design/blob/main/SKILL.md"
click node_visual_move "https://github.com/ilm-alan/frontend-design/blob/main/SKILL.md"
click node_swiss "https://github.com/ilm-alan/frontend-design/blob/main/SKILL.md"
click node_industrial "https://github.com/ilm-alan/frontend-design/blob/main/SKILL.md"
click node_brutalist "https://github.com/ilm-alan/frontend-design/blob/main/SKILL.md"
click node_aurora "https://github.com/ilm-alan/frontend-design/blob/main/SKILL.md"
click node_chaotic "https://github.com/ilm-alan/frontend-design/blob/main/SKILL.md"
click node_retro "https://github.com/ilm-alan/frontend-design/blob/main/SKILL.md"
click node_organic "https://github.com/ilm-alan/frontend-design/blob/main/SKILL.md"
click node_lofi "https://github.com/ilm-alan/frontend-design/blob/main/SKILL.md"

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_user toneMint
class node_assistant,node_css toneIndigo
class node_skill,node_anchor,node_tokens,node_visual_move,node_swiss,node_industrial,node_brutalist,node_aurora,node_chaotic,node_retro,node_organic,node_lofi toneTeal
```

## Components

### Other components

- **Design requester**
- **Coding assistant**
- [Design skill](https://github.com/ilm-alan/frontend-design/blob/main/SKILL.md): `SKILL.md`
- [Chosen anchor](https://github.com/ilm-alan/frontend-design/blob/main/SKILL.md): `SKILL.md`
- [Anchor tokens](https://github.com/ilm-alan/frontend-design/blob/main/SKILL.md): `SKILL.md`
- [Memorable move](https://github.com/ilm-alan/frontend-design/blob/main/SKILL.md): `SKILL.md`
- **CSS result**
- [Swiss](https://github.com/ilm-alan/frontend-design/blob/main/SKILL.md): `SKILL.md`
- [Industrial](https://github.com/ilm-alan/frontend-design/blob/main/SKILL.md): `SKILL.md`
- [Brutalist](https://github.com/ilm-alan/frontend-design/blob/main/SKILL.md): `SKILL.md`
- [Aurora Maximalism](https://github.com/ilm-alan/frontend-design/blob/main/SKILL.md): `SKILL.md`
- [Chaotic Maximalism](https://github.com/ilm-alan/frontend-design/blob/main/SKILL.md): `SKILL.md`
- [Retro-Futuristic](https://github.com/ilm-alan/frontend-design/blob/main/SKILL.md): `SKILL.md`
- [Organic](https://github.com/ilm-alan/frontend-design/blob/main/SKILL.md): `SKILL.md`
- [Lo-Fi](https://github.com/ilm-alan/frontend-design/blob/main/SKILL.md): `SKILL.md`

## Connections

- Design requester → Coding assistant: provides brief
- Coding assistant → Design skill: consults
- Design skill → Coding assistant: requests choices
- Coding assistant → Chosen anchor: chooses
- Chosen anchor → Anchor tokens: locks
- Coding assistant → Memorable move: defines
- Coding assistant → CSS result: writes
- Swiss → Chosen anchor: option for
- Industrial → Chosen anchor: option for
- Brutalist → Chosen anchor: option for
- Aurora Maximalism → Chosen anchor: option for
- Chaotic Maximalism → Chosen anchor: option for
- Retro-Futuristic → Chosen anchor: option for
- Organic → Chosen anchor: option for
- Lo-Fi → Chosen anchor: option for
- Anchor tokens → CSS result: constrains