skills.rest
jbreel77888
jbreel77888COMMUNITY
Explore all skills by this author →
GitHub

mono

Generates implementation-ready design-system guidelines using monospace tokens and matrix-inspired visual foundations.

Updated Jun 20, 2026
Search Tags:#typography#accessibility#WCAG#design system#design tokens#UI guidelines#monospace
One-click install
npx skills add https://github.com/jbreel77888/Ai-Agnet --skill mono-jbreel77888
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mono
Source: https://github.com/jbreel77888/Ai-Agnet/tree/main/skills/design/design-systems/style-skills/mono
Command: npx skills add https://github.com/jbreel77888/Ai-Agnet --skill mono-jbreel77888

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams building interfaces with a monospace, matrix-inspired aesthetic often lack consistent, implementation-ready design rules, leading to inconsistent spacing, low-contrast text, and inaccessible components. ## Core Features & Use Cases - Design Token Foundations: Provides concrete color tokens (primary #37F712, secondary #00A6F4), typography scales (Space Mono, JetBrains Mono), and compact spacing values. - Component-Level Rules: Defines anatomy, variants, states (hover, focus-visible, disabled, loading, error), and responsive behavior for UI components. - Accessibility & QA Gates: Enforces WCAG 2.2 AA requirements with testable acceptance criteria and a code-review-ready QA checklist. - Use Case: A designer-engineer pair building a developer dashboard uses this Skill to generate opinionated component guidelines with explicit tokens, anti-patterns, and migration notes for inconsistent legacy UI. ## Quick Start Ask the AI to generate design-system guidelines for a button component following the mono design system.

Frequently Asked Questions about mono

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

FAQPage Schema
How do I create design system guidelines for a monospace UI theme?▼

Define foundational tokens first: colors like primary #37F712, fonts such as Space Mono and JetBrains Mono, and compact spacing values. Then specify component anatomy, states, and accessibility criteria before writing component-level rules.

What color tokens does the mono design system use?▼

The palette includes primary #37F712, secondary #00A6F4, success #00A63D, warning #FE9900, danger #FF2157, surface #E7E5E4, and text #78716B. Rules prefer semantic tokens over raw values in component specifications.

Does this design system meet WCAG accessibility standards?▼

Yes, it targets WCAG 2.2 AA with keyboard-first interactions, visible focus states, and semantic HTML before ARIA. Every accessibility statement must be testable in implementation, and accessibility takes priority over aesthetics when conflicts arise.

What component states should design guidelines define?▼

Guidelines must define default, hover, focus-visible, active, disabled, loading, and error states as relevant. They also describe keyboard, pointer, and touch interaction behavior plus responsive edge cases like long labels and overflow.

When should I avoid a compact density spacing scale?▼

Compact density suits data-dense desktop interfaces but can harm touch targets and readability on mobile. The system uses 4px and 8px spacing steps, so verify hit areas remain accessible before applying compact spacing to touch-first products.

Related Skills

Explore More Design & Creative Skills→
docaohieu2808docaohieu2808

design

Orchestrate design tasks across brand identity, design tokens, and UI styling.

Community
Advanced
WP-CoachingWP-Coaching

tailwind-design-system

Builds Tailwind CSS design systems with tokens, CVA variants, and accessible components.

Official
Intermediate
SanketAdlakSanketAdlak

wcag-audit-patterns

Audit web content against WCAG 2.2 guidelines with automated testing and remediation patterns.

Community
Intermediate
ai-enhanced-engineerai-enhanced-engineer
3

frontend-design-systems

Integrate design systems while preserving brand identity and design tokens.

Official
Intermediate