skills.rest
CYBERSTALKER07
CYBERSTALKER07COMMUNITY
Explore all skills by this author →
GitHub

design-system

Define and apply centralized design tokens, typography, spacing, and components for Leviathan Retailer Desktop.

Updated Apr 22, 2026
Search Tags:#accessibility#front-end#design-system#design-consistency#component-patterns#ui-tokens#retailer-desktop
One-click install
npx skills add https://github.com/CYBERSTALKER07/ATOMOS --skill design-system-cyberstalker07
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/CYBERSTALKER07/ATOMOS/tree/main/.gemini/skills/design-system
Command: npx skills add https://github.com/CYBERSTALKER07/ATOMOS --skill design-system-cyberstalker07

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Leviathan design system provides a centralized language of tokens, typography, spacing, and components to ensure consistent, scalable UI across retailer-app-desktop.

Core Features & Use Cases

  • Central token architecture and named color/system tokens for consistent visuals across pages.
  • Pattern catalog and translation rules to align components and layouts, speeding prototyping and design reviews.
  • Governance-ready guidelines for accessibility, migrations, and cross-page consistency, enabling rapid audits and onboarding of new pages.

Quick Start

Apply the Leviathan design system to align tokens and patterns across retailer-app-desktop.

Frequently Asked Questions about design-system

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

FAQPage Schema
What are UI tokens and how do they work in a design system?▼

UI tokens are named variables like --accent, --muted, and --surface that standardize color and system values. They provide a central architecture for consistent visuals across pages and enable rapid prototyping and design reviews.

Can I use a design system to audit accessibility and cross-page consistency?▼

Apply the centralized design system during page creation by using its pattern catalog and translation rules to align components and layouts. This standardizes tokens and typography while ensuring real-time alignment with brand identity.

How do I apply a centralized design system during page creation?▼

Yes, governance-ready guidelines within the design system enable rapid audits of accessibility, migrations, and cross-page consistency. These rules propagate changes across the UI to maintain standardized components and compliance.

What is the best way to manage design tokens for front-end scalability?▼

The best way to manage design tokens for front-end scalability is defining an active token system with named variables like --accent and --surface. This propagates changes across the UI and maintains consistent visual standards.

Does a centralized design system require dependencies to standardize components?▼

No, standardizing components with a centralized design system requires no external dependencies. The system uses built-in governance rules and a pattern library to propagate changes and maintain consistent layouts.

Related Skills

Explore More Design & Creative Skills→
aymenhamoudiiaymenhamoudii

teach-impeccable

Extract design tokens and brand assets into .impeccable.md.

Community
Intermediate
HerbertJulioHerbertJulio
20

design-review

Audit frontend code for design consistency, accessibility, and UX patterns.

Community
Intermediate
PeterHddPeterHdd
27

cleanui

Improve AI-generated user interfaces with design best practices and layout intelligence.

Community
Advanced
tanaka-mambingetanaka-mambinge

react-component-creation

Scaffold React components with TypeScript props, Tailwind styling, and Radix primitives.

Community
Intermediate