skills.rest
Joaoha
JoaohaCOMMUNITY
Explore all skills by this author →
GitHub

design-guide

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
One-click install
npx skills add https://github.com/Joaoha/xenon-maas --skill design-guide-joaoha
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
eleva-labseleva-labs

setup-env

Configure environment variables and .env files for frontend environments.

Official
Basic
chifambachifamba

design-guide

Define centralized UI design tokens, typography, and component patterns.

Community
Intermediate
navyapdh11navyapdh11

design-guide

Codify design tokens, typography, and component patterns into a single frontend reference.

Community
Basic
a7gardena7garden

design-guide

Document and enforce CoHalo's frontend design language across components, tokens, typography, and patterns.

Community
Advanced