How do I install the Gpus Theme skill?

Run npx skillmds@latest add majiayu000/gpus-theme in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Gpus Theme safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: reads secrets. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Gpus Theme?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Gpus Theme free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Gpus Theme?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Gpus Theme by majiayu000 — Agent Skill

Name: Gpus Theme
Rating: 4.2 (5 reviews)
Author: majiayu000

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.

majiayu000 Updated Sep 9, 2026 567 repo stars

File contents

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.

---name: gpus-themedescription: 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.--- # 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. ```css @import "tailwindcss"; @import "./theme-tokens.css"; /* Copy from assets/ */ ``` ### Option 2: Use shadcn Configuration Copy `assets/components.json` to your project root: ```bash cp .agent/skills/gpus-theme/assets/components.json ./components.json ``` ### Option 3: Tailwind v3 Config Import theme tokens into `tailwind.config.ts`: ```typescript 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: ```typescript document.documentElement.classList.toggle('dark'); ``` ### Smooth Transitions Theme includes CSS for smooth color transitions: ```css 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`.

Frequently asked questions