design-guide

Name: design-guide
Availability: InStock
Author: joaoha

Document XenonMAAS UI components, tokens, typography, and patterns for frontend development.

Updated Aug 23, 2026

Search Tags:#typography #accessibility #tokens #frontend-design #design-guide #ui-system

Ready to run

npx skills add https://github.com/Joaoha/xenon-maas --skill design-guide-joaoha

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-guide
Source: https://github.com/Joaoha/xenon-maas/tree/main/.claude/skills/design-guide
Command: npx skills add https://github.com/Joaoha/xenon-maas --skill design-guide-joaoha

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide solves the problem of inconsistent UI across the XenonMAAS frontend by codifying design language, tokens, and component conventions.

Core Features & Use Cases

Component creation standards and reusable patterns for frontend development.
Design tokens and typography guidelines to ensure visual consistency.
Design governance and a showcase page for design validation.
Accessibility and web design best practices.

Quick Start

Review the design-guide principles and apply the documented tokens, typography, and component patterns to your next frontend feature.

Frequently Asked Questions about design-guide

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

FAQPage Schema

How do I standardize UI components and design tokens for frontend consistency?▼

To standardize UI components and design tokens for frontend consistency, apply a centralized design guide documenting reusable patterns, typography, and tokens across all pages to ensure visual uniformity.

What are design tokens and how do they enforce visual consistency in web applications?▼

Design tokens are centralized variables for UI attributes like typography and color that enforce visual consistency by providing a single source of truth for frontend styling and component creation.

How do I validate frontend accessibility and design patterns during development?▼

You validate frontend accessibility and design patterns by integrating a showcase page for design governance, applying documented web design best practices to check UI consistency and compliance.

Do I need YAML frontmatter to set up a design guide for my UI system?▼

Yes, setting up this design guide requires YAML frontmatter with name and description fields in the SKILL.md file to properly integrate the UI system documentation into your frontend workflow.

What is the best way to unify UI design across multiple frontend pages?▼

The best way to unify UI design across multiple frontend pages is to codify design language and component conventions into a centralized guide, ensuring all features use the same documented standards.