Skills
.Work. You
Rest

onyx-ui-standard

Community

ONYX UI Standard: baseline design consistency.

Design & Creative#glassmorphism#ui-design#design-system#color-palette#frontend-guidelines#onyx#layout-standards
AuthorRaNDoM6913
Version1.0.0
Installs0

System Documentation

What problem does it solve?

ONYX UI Standard provides a unified, glassy UI system to ensure visual consistency and faster delivery for frontend projects, reducing design drift and implementation overhead.

Core Features & Use Cases

  • Canonical color palette tokens and glass style definitions (glass and glass-prominent) to standardize visuals across screens.
  • Layout conventions for headerless screens, safe-area insets, and 100svh-based sizing to improve mobile and desktop consistency.
  • Reusable screen templates, component guidelines, and source references to accelerate onboarding and dashboard creation.
  • Use Case: A new frontend module can adopt ONYX immediately to achieve a cohesive look and predictable behavior with minimal custom styling.

Quick Start

Adopting the ONYX UI Standard involves applying the predefined palette, glass styles, and headerless screen patterns to your React components.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: onyx-ui-standard
Download link: https://github.com/RaNDoM6913/claude-code-superkit/archive/main.zip#onyx-ui-standard

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.