skills.rest
PiercingXX
PiercingXXCOMMUNITY
Explore all skills by this author →
GitHub

mono

Generate implementation-ready design system guidance for the mono design language.

1|Updated Jul 9, 2026
Search Tags:#typography#accessibility#design system#design tokens#ui guidelines#component states
One-click install
npx skills add https://github.com/PiercingXX/xx-stack --skill mono-piercingxx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mono
Source: https://github.com/PiercingXX/xx-stack/tree/main/packs/design/design-skills/mono
Command: npx skills add https://github.com/PiercingXX/xx-stack --skill mono-piercingxx

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It provides consistent, implementation-ready guidance for the "mono" design system so teams don’t improvise UI decisions and accidentally ship inaccessible or inconsistent interfaces.

Core Features & Use Cases

  • Design foundations: Defines typography, color tokens, and spacing rhythm for mono’s high-contrast, compact density look.
  • Component-level rules: Specifies anatomy, states, variants, responsive behavior, and edge cases so engineering can translate rules into UI reliably.
  • Accessibility and QA gates: Enforces WCAG-focused, testable acceptance criteria plus a code-review QA checklist to prevent regressions.

Quick Start

Ask the AI to write mono design-system documentation for a button component, including states, interaction behavior, accessibility acceptance criteria, and anti-patterns.

Frequently Asked Questions about mono

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

FAQPage Schema
How do I generate design system rules for component states and UI guidelines?▼

Generate design system rules by specifying component anatomy, states, variants, and responsive behavior. This ensures engineering teams translate UI guidelines into consistent interfaces reliably without improvising design decisions.

How do I create accessible design tokens with testable acceptance criteria?▼

Create accessible design tokens by defining WCAG-focused acceptance criteria, anti-patterns, and a QA checklist. This enforces testable accessibility gates and prevents regressions during component specification authoring.

What is the best way to document typography and color tokens for a compact density UI?▼

Document typography and color tokens by establishing design foundations for high-contrast, compact density interfaces. This provides implementation-ready guidance for spacing rhythm and consistent UI decisions across product workflows.

Can I use this design token approach for responsive defaults and edge cases?▼

Apply design token rules to specify responsive behavior and edge cases for UI components. This generates implementation-ready guidance ensuring consistent interaction states and prevents shipping inaccessible interface variations.

Why do my UI components ship with inconsistent interaction states across product interfaces?▼

Inconsistent interaction states occur when teams improvise UI decisions without token-anchored rules. Establishing component-level specifications for anatomy, variants, and interaction behavior ensures consistent implementation across product interfaces.

Related Skills

Explore More Design & Creative Skills→
bergsidebergside
2.3k

colorful

Define WCAG 2.2 AA-aligned design tokens and UI guidance for product interfaces.

Official
Basic
bykoleksii-hardobykoleksii-hardo

ckm:design-system

Generate CSS variables from design tokens JSON configurations.

Community
Advanced
PiercingXXPiercingXX
1

lingo

Generate implementation-ready design-system guidelines with WCAG 2.2 AA acceptance criteria.

Community
Intermediate
sahaja9707sahaja9707

tailwind-design-system

Develop design systems with Tailwind CSS v4 using CSS-first configuration and design tokens.

Community
Intermediate