# saifyxpro/ui-ux-design-pro-skill architecture

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

- Interactive diagram: https://gitdiagram.com/saifyxpro/ui-ux-design-pro-skill
- Repository: https://github.com/saifyxpro/ui-ux-design-pro-skill

## Overview

UI/UX Design Pro combines an AI-oriented design skill and reference material with a Bun CLI. Users invoke search, icon lookup, UI-code auditing, or design-system generation; generation searches design data, derives style and tokens, assembles component guidance, and emits Markdown or other formats. The graph focuses on runtime behavior documented in the README and shown in sampled CLI sources; unsampled skill/reference and data capabilities are represented by their existing directories, without asserting unshown internal wiring.

Main entry points: [`skills/ui-ux-design-pro/cli/index.ts`](https://github.com/saifyxpro/ui-ux-design-pro-skill/blob/main/skills/ui-ux-design-pro/cli/index.ts) (Command router), [`skills/ui-ux-design-pro/cli/commands/generate.ts`](https://github.com/saifyxpro/ui-ux-design-pro-skill/blob/main/skills/ui-ux-design-pro/cli/commands/generate.ts) (System generator), [`skills/ui-ux-design-pro/cli/lib/search.ts`](https://github.com/saifyxpro/ui-ux-design-pro-skill/blob/main/skills/ui-ux-design-pro/cli/lib/search.ts) (Orama search), [`skills/ui-ux-design-pro/cli/commands/audit.ts`](https://github.com/saifyxpro/ui-ux-design-pro-skill/blob/main/skills/ui-ux-design-pro/cli/commands/audit.ts) (UI auditor)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["CLI Entry"]
  node_cli["Command router<br/>[index.ts]"]
  node_search_cmd["Search command<br/>[search.ts]"]
  node_icons_cmd["Icon lookup<br/>[icons.ts]"]
end

subgraph group_design["Design Intelligence"]
  node_generate_cmd["System generator<br/>[generate.ts]"]
  node_search_engine["Orama search<br/>[search.ts]"]
  node_token_engine["Palette and tokens<br/>[generators.ts]"]
end

subgraph group_quality["UI Quality"]
  node_audit_cmd["UI auditor<br/>[audit.ts]"]
end

subgraph group_knowledge["Design Knowledge"]
  node_design_data["Design datasets"]
  node_icon_data["Icon library data<br/>[icon-libraries.csv]"]
  node_skill["Design skill<br/>[SKILL.md]"]
  node_references["Design references"]
end

node_user(("CLI user"))
node_ui_files["UI source files"]
node_report["Audit report"]
node_design_output["Design system output"]

node_user -->|"runs command"| node_cli
node_cli -->|"routes search"| node_search_cmd
node_cli -->|"routes icons"| node_icons_cmd
node_cli -->|"routes audit"| node_audit_cmd
node_cli -->|"routes generate"| node_generate_cmd
node_search_cmd -->|"queries"| node_search_engine
node_search_engine -->|"indexes and searches"| node_design_data
node_icons_cmd -->|"reads"| node_icon_data
node_generate_cmd -->|"searches datasets"| node_search_engine
node_generate_cmd -->|"generates tokens"| node_token_engine
node_generate_cmd -->|"writes output"| node_design_output
node_ui_files -->|"audits"| node_audit_cmd
node_audit_cmd -->|"prints or writes"| node_report
node_skill -.->|"guided by"| node_references
node_user -.->|"uses guidance"| node_skill

click node_cli "https://github.com/saifyxpro/ui-ux-design-pro-skill/blob/main/skills/ui-ux-design-pro/cli/index.ts"
click node_search_cmd "https://github.com/saifyxpro/ui-ux-design-pro-skill/blob/main/skills/ui-ux-design-pro/cli/commands/search.ts"
click node_icons_cmd "https://github.com/saifyxpro/ui-ux-design-pro-skill/blob/main/skills/ui-ux-design-pro/cli/commands/icons.ts"
click node_audit_cmd "https://github.com/saifyxpro/ui-ux-design-pro-skill/blob/main/skills/ui-ux-design-pro/cli/commands/audit.ts"
click node_generate_cmd "https://github.com/saifyxpro/ui-ux-design-pro-skill/blob/main/skills/ui-ux-design-pro/cli/commands/generate.ts"
click node_search_engine "https://github.com/saifyxpro/ui-ux-design-pro-skill/blob/main/skills/ui-ux-design-pro/cli/lib/search.ts"
click node_token_engine "https://github.com/saifyxpro/ui-ux-design-pro-skill/blob/main/skills/ui-ux-design-pro/cli/lib/generators.ts"
click node_design_data "https://github.com/saifyxpro/ui-ux-design-pro-skill/tree/main/skills/ui-ux-design-pro/cli/data"
click node_icon_data "https://github.com/saifyxpro/ui-ux-design-pro-skill/blob/main/skills/ui-ux-design-pro/cli/data/icon-libraries.csv"
click node_skill "https://github.com/saifyxpro/ui-ux-design-pro-skill/blob/main/skills/ui-ux-design-pro/SKILL.md"
click node_references "https://github.com/saifyxpro/ui-ux-design-pro-skill/tree/main/skills/ui-ux-design-pro/references"

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_cli,node_search_cmd,node_icons_cmd,node_user,node_ui_files toneBlue
class node_generate_cmd,node_search_engine,node_token_engine toneAmber
class node_audit_cmd toneMint
class node_design_data,node_icon_data,node_skill,node_references toneRose
class node_report,node_design_output toneIndigo
```

## Components

### CLI Entry

- [Command router](https://github.com/saifyxpro/ui-ux-design-pro-skill/blob/main/skills/ui-ux-design-pro/cli/index.ts): `skills/ui-ux-design-pro/cli/index.ts`
- [Search command](https://github.com/saifyxpro/ui-ux-design-pro-skill/blob/main/skills/ui-ux-design-pro/cli/commands/search.ts): `skills/ui-ux-design-pro/cli/commands/search.ts`
- [Icon lookup](https://github.com/saifyxpro/ui-ux-design-pro-skill/blob/main/skills/ui-ux-design-pro/cli/commands/icons.ts): `skills/ui-ux-design-pro/cli/commands/icons.ts`

### Design Intelligence

- [System generator](https://github.com/saifyxpro/ui-ux-design-pro-skill/blob/main/skills/ui-ux-design-pro/cli/commands/generate.ts): `skills/ui-ux-design-pro/cli/commands/generate.ts`
- [Orama search](https://github.com/saifyxpro/ui-ux-design-pro-skill/blob/main/skills/ui-ux-design-pro/cli/lib/search.ts): `skills/ui-ux-design-pro/cli/lib/search.ts`
- [Palette and tokens](https://github.com/saifyxpro/ui-ux-design-pro-skill/blob/main/skills/ui-ux-design-pro/cli/lib/generators.ts): `skills/ui-ux-design-pro/cli/lib/generators.ts`

### UI Quality

- [UI auditor](https://github.com/saifyxpro/ui-ux-design-pro-skill/blob/main/skills/ui-ux-design-pro/cli/commands/audit.ts): `skills/ui-ux-design-pro/cli/commands/audit.ts`

### Design Knowledge

- [Design datasets](https://github.com/saifyxpro/ui-ux-design-pro-skill/tree/main/skills/ui-ux-design-pro/cli/data): `skills/ui-ux-design-pro/cli/data`
- [Icon library data](https://github.com/saifyxpro/ui-ux-design-pro-skill/blob/main/skills/ui-ux-design-pro/cli/data/icon-libraries.csv): `skills/ui-ux-design-pro/cli/data/icon-libraries.csv`
- [Design skill](https://github.com/saifyxpro/ui-ux-design-pro-skill/blob/main/skills/ui-ux-design-pro/SKILL.md): `skills/ui-ux-design-pro/SKILL.md`
- [Design references](https://github.com/saifyxpro/ui-ux-design-pro-skill/tree/main/skills/ui-ux-design-pro/references): `skills/ui-ux-design-pro/references`

### Other components

- **CLI user**
- **UI source files**
- **Audit report**
- **Design system output**

## Connections

- CLI user → Command router: runs command (evidence: `skills/ui-ux-design-pro/cli/index.ts`)
- Command router → Search command: routes search (evidence: `skills/ui-ux-design-pro/cli/index.ts`)
- Command router → Icon lookup: routes icons (evidence: `skills/ui-ux-design-pro/cli/index.ts`)
- Command router → UI auditor: routes audit (evidence: `skills/ui-ux-design-pro/cli/index.ts`)
- Command router → System generator: routes generate (evidence: `skills/ui-ux-design-pro/cli/index.ts`)
- Search command → Orama search: queries (evidence: `skills/ui-ux-design-pro/cli/commands/search.ts`)
- Orama search → Design datasets: indexes and searches (evidence: `skills/ui-ux-design-pro/cli/lib/search.ts`)
- Icon lookup → Icon library data: reads (evidence: `skills/ui-ux-design-pro/cli/commands/icons.ts`)
- System generator → Orama search: searches datasets (evidence: `skills/ui-ux-design-pro/cli/commands/generate.ts`)
- System generator → Palette and tokens: generates tokens (evidence: `skills/ui-ux-design-pro/cli/commands/generate.ts`)
- System generator → Design system output: writes output (evidence: `skills/ui-ux-design-pro/cli/commands/generate.ts`)
- UI source files → UI auditor: audits (evidence: `skills/ui-ux-design-pro/cli/commands/audit.ts`)
- UI auditor → Audit report: prints or writes (evidence: `skills/ui-ux-design-pro/cli/commands/audit.ts`)
- Design skill → Design references: guided by
- CLI user → Design skill: uses guidance (evidence: `README.md`)