Claude Code Plugins

Community-maintained marketplace

Feedback

UI Design System

@AbdulSamad94/Hackhaton-SpecsKitPlus
2
0

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

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

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

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).