multiAI Summary Pending

ui-design-system

The Design System, Theme, and UX rules for the Physical AI Hub.

231 stars

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/ui-design-system/SKILL.md --create-dirs "https://raw.githubusercontent.com/aiskillstore/marketplace/main/skills/abdulsamad94/ui-design-system/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/ui-design-system/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How ui-design-system Compares

Feature / Agent	ui-design-system	Standard Approach
Platform Support	multi	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

The Design System, Theme, and UX rules for the Physical AI Hub.

Which AI agents support this skill?

This skill is compatible with multi.

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# UI Design System & Theme

## Core Philosophy
- **Aesthetic**: Premium, Modern, "Physical AI" (Dark, Sleek, Futuristic).
- **Feel**: Smooth, Responsive, High-End.

## Typography
- **Font**: **Poppins** (Geometric Sans-Serif).
- **Weights**: 400 (Regular), 500 (Medium), 600 (Semi-Bold), 700 (Bold).
- **Usage**: Clean, legible, widely spaced.

## Color Palette (Dark Mode - Primary)
- **Background**: `linear-gradient(135deg, #1a1f28 0%, #161b23 50%, #0f1419 100%)`
- **Primary Accent**: `#2d7d6c` (Teal/Greenish) used in buttons and highlights.
- **Text**: `#ededed` (Off-white for readability).
- **Borders**: Subtle, often `rgba(255, 255, 255, 0.1)`.

## Components
- **Buttons**: Rounded corners, smooth hover transitions, subtle shadows.
- **Cards**: Glassmorphism effect (blur + transparency), rounded corners (`12px` or `16px`).
- **Inputs**: Rounded (`24px`), borderless or subtle border, focus rings.
- **Dropdowns**: Floating, animated slide-in, shadow depth.

## Animations
- **Transitions**: `all 0.2s ease` or `cubic-bezier` for premium feel.
- **Keyframes**: `fadeIn`, `slideIn`, `dropdownSlideIn`.

## CSS Structure
- **Global**: `app/globals.css` (Tailwind + Variables).
- **Docusaurus**: `textbook/src/css/custom.css` (Overrides).
- **Modules**: `styles.module.css` for complex components (like Chatbot, Dropdown).