Ui design system
Skill ComeOnOliver/skillshub/skills/aiskillstore/marketplace/abdulsamad94/ui-design-system
🧠The right skill, one API call. AI agent skills registry with token-efficient skill resolution. 5,000+ skills from 500+ top repos.
npx -y skills add ComeOnOliver/skillshub --skill ui-design-systemAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
What its author says it does
Copied from the file, not written here
The Design System, Theme, and UX rules for the Physical AI Hub.
SKILL.md
1.4 KB, as published. Nobody here has run it
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 (
12pxor16px). - Inputs: Rounded (
24px), borderless or subtle border, focus rings. - Dropdowns: Floating, animated slide-in, shadow depth.
Animations
- Transitions:
all 0.2s easeorcubic-bezierfor premium feel. - Keyframes:
fadeIn,slideIn,dropdownSlideIn.
CSS Structure
- Global:
app/globals.css(Tailwind + Variables). - Docusaurus:
textbook/src/css/custom.css(Overrides). - Modules:
styles.module.cssfor complex components (like Chatbot, Dropdown).