🧠 UI-Brain

An Obsidian-Powered UI Knowledge Base & Local Reference Dataset for Human & AI Engineers

---

📌 Overview • ✨ Key Features • 💻 Cloning • 📂 Structure • 🔮 Obsidian Setup • 🤖 AI Agents • 🚀 New Projects • 📚 Reference Sources

---

📌 Overview

UI-Brain turns a massive collection of UI libraries, design systems, primitives, animations, templates, and frontend documentation into a navigable, hyper-linked second brain powered by Obsidian.

It is designed to help software engineers and AI coding agents (Claude Code, Cursor, Codex, Google Antigravity) make deliberate, architectural frontend decisions before writing code.

Note

The repository combines deep architectural notes in data/ with local reference source code from industry-standard UI libraries.

---

✨ Key Features

• 🧠 Obsidian Knowledge Base: Connected notes, Maps of Content (MOCs), technology decision matrixes, and accessibility checklists inside data/.
• 📦 8+ Bundled Reference Datasets: Source material from Astryx, Carbon, Fluent UI, Material Web, Radix Primitives, React Bits, TDesign, and shadcn/ui.
• 🤖 Native AI Agent Support: Built-in instructions and configurations for Claude Code, Cursor, Codex, and Google Antigravity.
• 📐 Strict Architecture Scope: Clean boundary between read-only reference datasets and user-generated applications (projects/<site-name>/).
• 🗺️ Visual Knowledge Graph: Deep node-graph visualization of component dependencies, design tokens, and UI patterns.

---

💻 Cloning the Repository

Select your operating system below for platform-tailored clone commands and configuration instructions.

Tip

Make sure you have Git installed on your system before running these commands.

🌐 Quick Cloning Methods

# Option 1: HTTPS Clone
git clone https://github.com/alisattorov06/UI-Brain.git

# Option 2: SSH Clone
git clone git@github.com:alisattorov06/UI-Brain.git

# Option 3: GitHub CLI
gh repo clone alisattorov06/UI-Brain

---

🪟 Windows Setup (PowerShell / Command Prompt / Git Bash)

1. Open Terminal (PowerShell or Git Bash).
2. Clone the repository:

   git clone https://github.com/alisattorov06/UI-Brain.git
   cd UI-Brain

3. (Recommended for Windows) Enable long paths support to avoid path length limits with deep UI component trees:

   git config --system core.longpaths true

4. (Optional) Configure line endings for Windows environment:

   git config core.autocrlf true

---

🍎 macOS Setup (Terminal / Zsh)

1. Open Terminal (Cmd + Space → Terminal).
2. Check Git installation (install via Homebrew if needed: brew install git).
3. Clone the repository:

   git clone https://github.com/alisattorov06/UI-Brain.git
   cd UI-Brain

4. (Optional) Preserve UNIX line endings:

   git config core.autocrlf input

---

🐧 Linux Setup (Ubuntu / Debian / Fedora / Arch)

1. Open Terminal (Ctrl + Alt + T).
2. Install Git (if not already installed):

   # Ubuntu / Debian
   sudo apt update && sudo apt install -y git
   
   # Fedora / RHEL
   sudo dnf install -y git
   
   # Arch Linux
   sudo pacman -S git

3. Clone the repository:

   git clone https://github.com/alisattorov06/UI-Brain.git
   cd UI-Brain

---

📂 Knowledge-Base Structure

UI-Brain/
├── 📄 AGENTS.md                  # Shared agent instructions & boundary rules
├── 📄 CLAUDE.md                  # Claude Code agent workspace instructions
├── 📁 .cursor/rules/             # Cursor rules (ui-knowledge-base.mdc)
├── 📁 .agents/rules/             # Google Antigravity custom rules
├── 📁 assets/                    # Screenshots & documentation graphics
├── 📁 data/                      # 🧠 Obsidian Knowledge Base Vault
│   ├── 00-Start/                 # Home note & Relationship Map MOC
│   ├── 01-Design-Systems/        # Astryx, Carbon, Fluent UI, Material Web, TDesign
│   ├── 02-Component-Primitives/  # Radix Primitives documentation
│   ├── 03-UI-Components/         # shadcn/ui components & registry notes
│   ├── 04-Animations/            # React Bits animation guides
│   ├── 05-Templates-and-Tooling/ # Framework starters & tooling
│   ├── 06-Design-Tokens/         # Themes, colors, typography & spacing
│   ├── 07-Accessibility/         # A11y standards & WCAG checklists
│   ├── 08-Patterns/              # Forms, state management, layouts, navigation
│   ├── 09-Examples/              # Links to local UI implementations
│   ├── 10-Decision-Guides/       # Technology selection matrix & trade-offs
│   └── 99-Source-Map/            # Note-to-source mapping references
└── 📁 projects/                  # 🚀 Directory for generated web projects

---

🔮 Knowledge Graph & Obsidian Setup

🛠️ Obsidian Quick Start

1. Download and install Obsidian.
2. Select Open folder as vault.
3. Choose the data/ directory inside this repository for a clean second-brain view.
4. Start with data/00-Start/Home.md or data/00-Start/Relationship-Map.md.
5. Open Graph View (Ctrl + G / Cmd + G) to visually explore relationships.

Tip

If you open the root folder as an Obsidian vault, apply the graph filter path:data to hide raw source code nodes and focus purely on knowledge notes.

📊 Graph Previews

Full Workspace Knowledge Graph	Connected Source & Component Graph

---

🤖 Using UI-Brain with AI Coding Agents

UI-Brain is optimized for AI pair programming. Every supported agent is pre-configured to read data/ guides before writing frontend code.

Important

Boundary Rule: The reference folders (astryx/, carbon/, fluentui/, material-web/, primitives/, react-bits/, tdesign/, ui/) are read-only. Agents and developers must create new web applications strictly inside projects/<site-name>/.

⚙️ Agent Integrations Matrix

Agent	Configuration File	How to Activate
Claude Code	CLAUDE.md	Automatically loaded when starting claude in repository root
Cursor	.cursor/rules/ui-knowledge-base.mdc	Active by default (alwaysApply: true)
Google Antigravity	.agents/rules/ui-knowledge-base.md	Set ui-knowledge-base rule to Always On in Agent Panel
Codex / Custom Agents	AGENTS.md	Shared guidelines loaded at root level

---

💬 Agent Execution Examples

Click to expand Claude Code setup & prompt example

cd UI-Brain
claude

Prompt:

Use the UI-Brain knowledge base to build a responsive SaaS landing page.
First explain the chosen design system, UI patterns, design-token approach,
and accessibility considerations. Then implement it in projects/saas-landing/.
Do not modify the reference dataset folders.

Run /memory inside Claude Code to verify that CLAUDE.md is active.

Click to expand Universal Prompt for Any AI Agent

Read the UI-Brain knowledge base first. I want to create [website type] for [target audience].
Choose a suitable design system or component strategy from the dataset, explain the accessibility
and responsive-design decisions, and build the implementation in projects/[website-name]/.

---

🚀 Creating a New Website

Keep all custom applications decoupled from the knowledge base reference source material:

projects/
└── my-website/
    ├── README.md
    ├── package.json
    ├── vite.config.js
    └── src/
        ├── components/
        └── App.jsx

---

📚 Included Reference Sources

UI-Brain contains local source snapshots of major UI frameworks:

Source Library	Badge	Primary Purpose
Astryx		Customizable React design system and theme tools
Carbon		Enterprise IBM design system and components
Fluent UI		Microsoft Fluent design framework for Web & React
Material Web		Google Material Design 3 web components
Radix Primitives		Accessible, unstyled UI primitives for React
React Bits		Micro-interactions, background, text & cursor animations
TDesign		Tencent design system with extensive UI tokens
shadcn/ui		Reusable component registry & starter templates

---

🤝 Contributing to the Brain

Contributions to enhance the knowledge base are welcome:

1. ✍️ Create Notes: Add focused Markdown notes under the relevant data/ category.
2. 🔗 Add Connections: Link new notes to MOCs or Relationship-Map.md using [[WikiLinks]].
3. ♿ Include A11y Guidelines: Document WCAG compliance, keyboard interaction, and design trade-offs.
4. 🧹 Clean Commits: Keep build artifacts, untracked dependencies, and temporary files out of git.

---

📜 Repository Policy

• 🔒 Source Integrity: Library directories (astryx/, carbon/, etc.) are reference sources; do not modify or format them.
• 🙈 Ignored Folders: The blog/ folder is explicitly git-ignored.
• ⚙️ Agent Persistence: Configuration files (AGENTS.md, CLAUDE.md, .cursor/rules/, .agents/rules/) are core assets and must remain versioned.

---

Made with ❤️ for Developers & AI Engineers • Powered by Obsidian