GPUS Theme
gpus-theme
Portable GPUS design system theme (Portal Grupo US). This skill should be used when applying GPUS branding to other projects, setting up shadcn/ui with Navy/Gold palette, or copying the complete light/dark theme configuration. Includes CSS variables, Tailwind v4 theme, and shadcn configuration.
SKILL.md
Full skill instructions
GPUS Theme
Portable design system from the Portal Grupo US project featuring a Navy/Gold color palette with complete light and dark theme support.
Identity: Navy backgrounds + Gold accents. Professional, premium, educational.
Quick Start
Option 1: Copy CSS Variables
Copy assets/theme-tokens.css to your project's main CSS file.
@import "tailwindcss";
@import "./theme-tokens.css"; /* Copy from assets/ */
Option 2: Use shadcn Configuration
Copy assets/components.json to your project root:
cp .agent/skills/gpus-theme/assets/components.json ./components.json
Option 3: Tailwind v3 Config
Import theme tokens into tailwind.config.ts:
import { gpusTheme } from './.agent/skills/gpus-theme/assets/tailwind-theme';
export default {
theme: {
extend: {
colors: gpusTheme.colors,
},
},
};
Theme Overview
Color Palette
| Token | Light Mode | Dark Mode | Purpose |
|---|---|---|---|
| background | White 0 0% 100% | Navy 211 49% 10% | Page background |
| foreground | Dark blue 222 47% 11% | Gold 39 44% 65% | Text color |
| primary | Gold 38 60% 45% | Gold 39 44% 65% | Main actions |
| accent | Light gold 38 60% 95% | Muted 26 5% 27% | Highlights |
| destructive | Red 0 84% 60% | Red 0 84% 60% | Errors |
Border Radius
- Base:
0.625rem(10px) - Derived:
--radius-lg,--radius-md,--radius-sm
Custom Utilities
| Class | Effect |
|---|---|
.bg-mesh | Radial gradient mesh background |
.glass-card | Glassmorphism with blur |
.bg-noise | Subtle noise texture overlay |
.animate-ripple | Button ripple animation |
Component Configuration
shadcn/ui Settings
- Style:
new-york - Base color:
zinc - CSS Variables: Enabled
- Icon Library:
lucide
Extended Registries
| Registry | URL | Components |
|---|---|---|
| @kokonutui | kokonutui.com | Premium components |
| @aceternity | ui.aceternity.com | Animated components |
| @magicui | magicui.design | Magic effects |
| @tweakcn | tweakcn.com | Theme generator |
| @shadcnui-blocks | shadcnui-blocks.com | Page blocks |
| @cult-ui | cult-ui.com | Cult components |
| @originui | originui.com | Origin components |
| @tailark | tailark.com | Tailark components |
Files Reference
| File | Purpose |
|---|---|
references/css-variables.md | Complete CSS variable reference |
references/shadcn-config.md | shadcn/ui configuration details |
assets/theme-tokens.css | Portable CSS file |
assets/tailwind-theme.ts | Tailwind v3 config export |
assets/components.json | shadcn configuration |
Usage Tips
Dark Mode Toggle
The theme uses .dark class on <html> element:
document.documentElement.classList.toggle('dark');
Smooth Transitions
Theme includes CSS for smooth color transitions:
body {
transition: background-color 0.3s ease, color 0.3s ease;
}
View Transition API
For animated theme toggle, use the View Transition API selectors in theme-tokens.css.