skills.rest
genexuslabs
genexuslabsOFFICIAL
Explore all skills by this author →
Website𝕏@GeneXusGitHub

mercury-design-system

Apply Mercury design tokens and bundles to Chameleon-based UIs.

Updated Aug 23, 2026
Search Tags:#typography#theming#tokens#design-system#mercury#bundles#chameleon
One-click install
npx skills add https://github.com/genexuslabs/genexus-skills --skill mercury-design-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mercury-design-system
Source: https://github.com/genexuslabs/genexus-skills/tree/main/frontend/mercury-design-system
Command: npx skills add https://github.com/genexuslabs/genexus-skills --skill mercury-design-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Mercury Design System provides a centralized set of design tokens, bundles, and theming to ensure consistent UI styling across Chameleon components.

Core Features & Use Cases

  • Token-driven styling: color, typography, spacing, and iconography applied via bundles.
  • Theming versatility: Mercury and Globant themes with dark/light modes for multi-brand scenarios.
  • Easy adoption: quick start using getBundles and ch-theme to apply design system styling to components.

Quick Start

Use the Mercury design system by loading the base tokens and theme bundles and wrapping your UI with ch-theme to apply the styling.

Frequently Asked Questions about mercury-design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I apply consistent theming to Chameleon UI components?▼

Mercury design tokens provide centralized styling for Chameleon UIs by applying color, typography, spacing, and iconography through component bundles to ensure visual consistency.

Can I use Mercury design tokens for multi-brand scenarios with dark and light modes?▼

Yes, Mercury design tokens support multi-brand scenarios by offering Mercury and Globant themes, including both dark and light modes for versatile UI branding.

What's the best way to start using design tokens for Chameleon component styling?▼

The best way to start is by loading the base tokens from base/base, importing the required component bundles, and using getBundles and ch-theme to apply the design system styling.

Do I need specific CLI or Vite plugin configurations to select Mercury themes?▼

Yes, you need the appropriate CLI or Vite plugin configuration to select and apply Mercury themes, alongside the base tokens and component bundles required for styling.

How does token-driven styling handle typography and spacing for UI components?▼

Token-driven styling handles typography and spacing by applying centralized design tokens via bundles, ensuring consistent visual rules across all Chameleon components.

What limitations exist when applying custom themes to Chameleon UIs?▼

Applying custom themes to Chameleon UIs requires loading base tokens from base/base and specific component bundles, meaning styling consistency depends on proper bundle integration and configuration.

Related Skills

Explore More Design & Creative Skills→
Devinga-com-brDevinga-com-br

tailwind-v4-shadcn

Configure Tailwind v4 with shadcn/ui using CSS variables and automatic dark mode.

Official
Intermediate
Design-System-ETDesign-System-ET

mercury-design-system

Apply Mercury Design System CSS bundles and design tokens to Chameleon web components.

Official
Advanced
cctylcctyl

tailwindcss-styling

Standardize Tailwind CSS styling with color tokens, spacing scales, and dark-theme guidelines.

Community
Advanced
radioactive-labsradioactive-labs
68

plutonium-theming

Apply CSS design tokens to standardize UI theming across web application components.

Official
Advanced