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

matrix

Generates implementation-ready design-system guidelines for a dark Matrix-inspired interface.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams building dark, terminal-style interfaces often lack consistent design rules, leading to mismatched spacing, low-contrast text, and inconsistent component states. This Skill turns the Matrix visual language into concrete, testable design-system guidance that engineers and designers can apply directly. ## Core Features & Use Cases - Token-Driven Foundations: Defines color tokens (primary #2DB58A, secondary #0B0C14), Space Mono typography scales, and 4/8/12/16/24/32 spacing rhythm. - Component-Level Rules: Produces anatomy, variants, states (hover, focus-visible, disabled, loading, error), and responsive behavior guidance. - Accessibility Acceptance Criteria: Anchors every rule to WCAG 2.2 AA with testable requirements and a QA checklist for code review. - Use Case: A frontend team building a crypto order-book dashboard uses this Skill to generate button, table, and form guidelines that match the dark mono aesthetic while passing accessibility review. ## Quick Start Use the matrix skill to generate design-system guidelines for a data-dense trading dashboard component.

Frequently Asked Questions about matrix

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

FAQPage Schema
How do I create a design system for a dark terminal-style UI?▼

Start by defining foundational tokens for color, typography, and spacing before writing component rules. This Skill provides the Matrix foundations: Space Mono fonts, a 4/8/12/16/24/32 spacing scale, and a green accent (#2DB58A) on dark surfaces, then guides component anatomy, states, and accessibility criteria.

What color tokens does the Matrix design system use?▼

The Matrix palette uses primary #2DB58A (green accent), secondary #0B0C14 (dark surface), success #16A34A, warning #D97706, danger #DC2626, surface #FFFFFF, and text #111827. Guidance prefers semantic tokens over raw hex values in component rules.

Does this design system meet WCAG accessibility standards?▼

Yes, the Skill targets WCAG 2.2 AA with keyboard-first interactions and visible focus states. Every accessibility statement it generates must be testable in implementation, and conflicts between aesthetics and accessibility are resolved in favor of accessibility.

What component states should design guidelines define?▼

Guidelines should define default, hover, focus-visible, active, disabled, loading, and error states as relevant. The Skill also requires interaction behavior for keyboard, pointer, and touch, plus edge cases like long labels, empty states, and overflow.

When should I not use a dark-only design system?▼

A dark-only system like Matrix does not fit products requiring light-mode support or user-selectable themes. It suits terminal interfaces, trading dashboards, and developer tools where high-contrast dark surfaces and dense mono typography are the intended aesthetic.

Related Skills

Explore More Design & Creative Skills→
Replit-PartnershipsReplit-Partnerships

replit-brand

Apply Replit's official brand tokens, fonts, and UI components to projects.

Official
Advanced
muhammaddadumuhammaddadu
1

tailwind-v4-shadcn

Configure Tailwind CSS v4 with shadcn/ui, Vite, React, and dark mode theming.

Community
Advanced
PMDevSolutionsPMDevSolutions
7

react-accessibility

Implement WCAG 2.2 Level AA accessible patterns in React applications.

Official
Intermediate
sheriaxsheriax

clerk-custom-ui

Create custom Clerk authentication flows and theme components with React hooks.

Official
Intermediate