Ui design system
Skill aiskillstore/marketplace/skills/abdulsamad94/ui-design-system
Security-audited skills for Claude, Codex & Claude Code. One-click install, quality verified.
npx -y skills add aiskillstore/marketplace --skill ui-design-systemAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
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).