skills.rest
Design-System-ET
Design-System-ETOFFICIAL
Explore all skills by this author →
GitHub

mercury-design-system

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

Updated Jun 16, 2026
Search Tags:#css#design-system#web-components#mercury#ui-styling#chameleon
One-click install
npx skills add https://github.com/Design-System-ET/genexus-dev-opencode --skill mercury-design-system-design-system-et
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mercury-design-system
Source: https://github.com/Design-System-ET/genexus-dev-opencode/tree/main/skills/mercury-design-system
Command: npx skills add https://github.com/Design-System-ET/genexus-dev-opencode --skill mercury-design-system-design-system-et

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill solves the challenge of maintaining visual consistency and design system compliance when building web interfaces with Chameleon components, ensuring that styling, tokens, and design patterns are applied correctly without manual CSS errors.

Core Features & Use Cases

  • Automated Styling: Maps design tokens and CSS bundles to Chameleon components, ensuring correct typography, spacing, and color application.
  • Theme Management: Handles theme variants like Mercury and Globant, including automatic dark/light mode switching.
  • Use Case: When building a new settings page, use this skill to automatically apply the correct Mercury typography classes, spacing tokens, and button variants to your Chameleon form components.

Quick Start

Invoke the mercury design system skill to apply the appropriate CSS bundles and design tokens to your current Chameleon component tree.

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 design system styling to Chameleon web components?▼

Theme variant detection automatically handles Mercury and Globant theme switching, including dark and light modes, by applying the correct semantic design tokens to your Chameleon web components during interface development.

How do I manage dark and light theme variants for Chameleon UIs?▼

Theme variant detection automatically handles Mercury and Globant theme switching, including dark and light modes, by applying the correct semantic design tokens to your Chameleon web components during interface development.

Can I use semantic design tokens for form layout patterns in web components?▼

Yes, semantic design tokens can be applied to form layout patterns. The system supports responsive grid alignment and semantic token usage to satisfy technical requirements for building complex Chameleon interfaces.

What is the best way to ensure design system compliance when building web interfaces?▼

The best way to ensure design system compliance is automating the mapping of design tokens and CSS bundles to your components, maintaining visual consistency and preventing manual styling errors across your web interfaces.

Does this styling approach handle icon resolution for complex interfaces?▼

Yes, the styling approach handles icon resolution alongside typography and spacing. It maps design tokens and CSS bundles to ensure correct visual application for complex Chameleon interface development.

Related Skills

Explore More Software Engineering Skills→
pohlai88pohlai88

web-design-guidelines

Analyze HTML, CSS, and JavaScript UI files against current Web Interface Guidelines.

Community
Intermediate
iButtersiButters
3

css-tokens

Generate CSS design tokens for colors, spacing, typography, and theming.

Community
Intermediate
sero-labssero-labs
19

sero-dashboard-ui

Builds Sero dashboard widgets with shared React components and semantic design tokens.

Official
Intermediate
Design-System-ETDesign-System-ET

design-system-builder

Generate CSS design systems with Chameleon components and 3-tier token architecture.

Official
Advanced