skills.rest
bergside
bergsideOFFICIAL
Explore all skills by this author →
WebsiteGitHub

mono

Generate monospace design-system guidance with WCAG 2.2 AA accessibility criteria.

2.3k|211|Updated Mar 9, 2026
Search Tags:#typography#accessibility#design systems#ui components#color tokens#spacing scale
One-click install
npx skills add https://github.com/bergside/awesome-design-skills --skill mono-bergside
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mono
Source: https://github.com/bergside/awesome-design-skills/tree/main/skills/mono
Command: npx skills add https://github.com/bergside/awesome-design-skills --skill mono-bergside

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you implement a cohesive monospace, matrix-inspired design system while maintaining strong accessibility and clear, testable interaction rules.

Core Features & Use Cases

  • Token-driven visual consistency: Uses defined typography, spacing, color, and radius tokens to keep components visually aligned across an app.
  • Accessibility-first interaction guidance: Specifies WCAG 2.2 AA, keyboard-first behavior, visible focus states, and semantic-first labeling expectations.
  • Implementation-ready component rules: Provides explicit do/don’t patterns, state handling (including loading/error where relevant), and quality-gate guidance for code review.

Quick Start

Use the mono skill to generate UI component guidance (tokens, states, and accessibility acceptance criteria) that matches the Space Mono + JetBrains Mono hacker-chic aesthetic.

Frequently Asked Questions about mono

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

FAQPage Schema
How do I build a monospace UI design system that meets WCAG 2.2 AA accessibility standards?▼

Apply monospace typography tokens, defined spacing scales, and color tokens to your UI components while enforcing WCAG 2.2 AA keyboard-first semantics and visible focus states.

What are the best design tokens for a matrix-inspired hacker-chic user interface?▼

Matrix-inspired UI design tokens include monospace typography rules using Space Mono or JetBrains Mono, defined spacing scales, color tokens, and radius tokens to ensure visual alignment across components.

Can I use monospace typography rules for standard web UI component styling and behavior?▼

Yes, monospace typography rules apply to standard web UI workflows by providing explicit component styling and behavior guidance, including interaction states, loading and error handling, and semantic-first labeling.

How do I write testable accessibility acceptance criteria for UI components?▼

Write testable accessibility acceptance criteria by defining explicit do and don't constraints for UI components, verifying WCAG 2.2 AA keyboard-first behavior, and validating visible focus treatment and token-first implementation.

Does a token-first design system implementation work without external UI component dependencies?▼

Yes, a token-first design system implementation works independently without external dependencies. It defines its own typography, spacing, color, and radius tokens to maintain visual consistency across your application.

Related Skills

Explore More Design & Creative Skills→
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
PiercingXXPiercingXX
1

futuristic

Author component-level futuristic design-system rules with WCAG 2.2 AA accessibility criteria.

Community
Intermediate
bergsidebergside
2.3k

publication

Define print-inspired design system rules for editorial UIs with WCAG 2.2 AA accessibility.

Official
Intermediate
superpollo02superpollo02

shadcn

Generate shadcn/ui-inspired component guidance with token-first rules and WCAG 2.2 AA constraints.

Community
Intermediate