agentsclimarketplace
Sign in

Ui design system

Skill bg-szy/TOP-SKILLS/skills/marketplace/ui-design-system

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

Install
npx -y skills add bg-szy/TOP-SKILLS --skill ui-design-system

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

2 things 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.
  • 5 stars5 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

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: 2 files

31.2 KB alongside SKILL.md

Keep looking

Skills are one crate of 626,045. 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.