Skills
.Work. You
Rest

sega

Official

Design arcade UI with pixel typography

Design & Creative#accessibility#design system#ui components#interaction states#pixel typography#arcade aesthetics#tokenized styling
Authorbergside
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps teams build consistent, arcade-inspired game interfaces without losing accessibility or implementation clarity.

Core Features & Use Cases

  • Token-driven Sega foundations: Establishes Sega’s VT323 pixel typography, JetBrains Mono labels, and the primary/secondary/success/warning/danger palette with a strict spacing and rounding system.
  • Component-ready behavioral rules: Specifies interaction states (default/hover/focus-visible/active/disabled/error/loading as relevant) and interaction patterns that work for keyboard-first and touch/pointer inputs.
  • Quality gates and anti-pattern prevention: Enforces testable accessibility constraints (WCAG 2.2 AA) plus do/don’t guidance so generated UI remains readable, rhythm-consistent, and label-safe.
  • Use case: Ship a cohesive UI kit for a game settings screen, HUD, or menu system that looks authentically Sega while remaining maintainable and reviewable.

Quick Start

Use the sega skill to generate a Sega-styled, keyboard-accessible component set for a game UI, following the provided tokens, state rules, and QA checklist.

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: sega
Download link: https://github.com/bergside/awesome-design-skills/archive/main.zip#sega

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.