skills.rest
eyelevelai
eyelevelaiCOMMUNITY
Explore all skills by this author →
GitHub

groundx-web-ui

Provide GroundX-branded React/MUI/TypeScript UI primitives and token-driven theme values.

Updated Aug 27, 2026
Search Tags:#ui#react#components#tokens#mui#design-system#groundx
One-click install
npx skills add https://github.com/eyelevelai/groundx-skills --skill groundx-web-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: groundx-web-ui
Source: https://github.com/eyelevelai/groundx-skills/tree/main/skills/groundx-web-ui
Command: npx skills add https://github.com/eyelevelai/groundx-skills --skill groundx-web-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Front-end teams often drift from GroundX's brand when building dashboards, forms, and UI components in React/MUI/TypeScript. This skill provides canonical, brand-aligned primitives and patterns to keep interfaces consistent with GroundX's standards.

Core Features & Use Cases

  • Translates brand invariants into reusable tokens and wrappers (GxCard, GxPill, GxSectionHeader, GxButtonGroup, GxUsageCard) and integrates with CommonSubmitButton / CommonCancelButton for consistent interactions.
  • Enables building page layouts, components, and forms that match the GroundX dashboard across React apps and design system boundaries.
  • Supplies a token-driven foundation via constants.ts / constants.generated.ts and groundx-design-standards to ensure a single source of truth for color, typography, and spacing.

Quick Start

Install and start building GroundX UI pages using the Gx* components and CommonSubmitButton to mirror the dashboard.

Frequently Asked Questions about groundx-web-ui

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

FAQPage Schema
How do I align my React dashboard with GroundX branding using Material UI?▼

To align your React dashboard with GroundX branding, you can use ready-to-use UI primitives and patterns built for Material UI. These components translate brand invariants into token-driven theme values to keep interfaces consistent.

What's the best way to maintain GroundX design standards across TypeScript front-end apps?▼

Maintaining GroundX design standards across TypeScript front-end apps is done by wiring token-driven theme values from a central constants file. This provides a single source of truth for color, typography, and spacing across all components.

How do I build GroundX forms and page layouts that match the official design system?▼

Building GroundX forms and page layouts involves using pre-built wrapper components like GxCard, GxSectionHeader, and CommonSubmitButton. These wrappers integrate with design tokens to ensure your forms match the dashboard automatically.

Can I use GroundX UI components with my existing React and MUI design system?▼

Yes, you can use GroundX UI components with your existing React and MUI design system. The skill provides wrapper components and token-driven foundations that integrate directly into existing Material UI setups.

Why do my front-end components keep drifting from the GroundX brand?▼

Front-end components drift from the GroundX brand without canonical primitives. Using a token-driven foundation with pre-built wrappers enforces brand invariants for color, typography, and spacing across your applications.

Do I need a specific token setup to use GroundX UI primitives in my TypeScript project?▼

Yes, you need the token-driven foundation provided by constants files to use GroundX UI primitives. This setup ensures a single source of truth for your design standards and wires the theme values into the wrapper components.

Related Skills

Explore More Software Engineering Skills→
Eng0AIEng0AI
15

gsap-awwwards-website

Build a React 19 landing page with GSAP scroll animations and Tailwind CSS 4.

Official
Advanced
cristianbc2004cristianbc2004

Expo UI Jetpack Compose

Integrates Jetpack Compose views into Expo apps using @expo/ui/jetpack-compose.

Community
Intermediate
fray-cloudfray-cloud

design-consultation

Generate a complete design system and output DESIGN.md as the source of truth.

Community
Advanced
ggombeeggombee
13

mui

Guide Material UI component usage with import patterns, sx styling, styled(), and theme management.

Community
Intermediate