agentsclimarketplace
Sign in

Ui design system

Skill ComeOnOliver/skillshub/skills/aiskillstore/marketplace/abdulsamad94/ui-design-system

The Design System, Theme, and UX rules for the Physical AI Hub.From its SKILL.md

Install
npx -y skills add ComeOnOliver/skillshub --skill ui-design-system

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

SKILL.md

1.4 KB, 392 tokens by cl100k_base, 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 (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).

What ships with it

10.0 KB alongside SKILL.md

GitHub clipped this repository’s file list, so this is at least 1 file and may be more.

Keep looking

Skills are one crate of 325,949. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.