Skip to main content
skill CX Codex

sega — Claude Code skill: what it does, how to install

Defines rules for an arcade-inspired design system with VT323 typography, 0px corners, and chunky push buttons. Useful when crafting game UI specs.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add bergside/awesome-design-skills --skill sega -a claude-code
Open on GitHub

What sega does

The skill sets instructions for generating game UI guidelines inspired by retro arcade cabinets. It centers on hard 0px corners, the VT323 pixel font for primary and display text, and JetBrains Mono for monospace snippets. Type sizes follow a fixed 13/15/17/21/27/35 scale. Chunky buttons physically press into solid offset blocks, while cards receive rainbow-ringed shadows designed to emulate cabinet trim.

Guideline authoring follows a mandatory six-step process. The model must define design tokens before writing component rules, document interaction states like focus-visible or loading, and deliver a QA checklist for code review. Accessibility is non-negotiable. The skill demands WCAG 2.2 AA compliance and prioritizes contrast over purely aesthetic choices.

This strict foundation leaves no room for soft border radii or vague spacing values. Components must rely strictly on the 4/8/12/16/24/32 spacing scale and designated hex tokens like #4502FF and #FFDA14.

What it helps with

  • write arcade UI component rules covering all interaction states
  • define design tokens using the 4/8/12/16/24/32 spacing scale and VT323 typography
  • enforce WCAG 2.2 AA accessibility requirements for retro game interfaces
  • generate QA checklists for component code reviews

Example prompts for the agent

  • Define an arcade action button with hover, active, and focus-visible states using sega guidelines
  • Create design tokens and spacing specs for a retro game inventory card
  • Generate a WCAG 2.2 AA compliance checklist for pixel UI elements following sega

How to install sega

1Skills CLI (Vercel)

npx skills add bergside/awesome-design-skills --skill sega -a claude-code

2Manually: put the files in place

~/.claude/skills/sega/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/sega/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about sega

How to install sega in Claude Code?

Run npx skills add bergside/awesome-design-skills --skill sega -a claude-code in your terminal.

What does the sega skill do?

It instructs the AI agent to write design system guidelines for playful, arcade-themed game interfaces. Output includes token definitions, component anatomy, state behaviors, and testing criteria.

Which visual foundations and fonts are defined by sega?

It uses the VT323 pixel font, JetBrains Mono, 0px border radii, and a 4/8/12/16/24/32 spacing scale. Key color tokens include primary #4502FF and secondary #FFDA14.

Source text

SKILL.md · MIT
---
name: "sega"
description: "A playful, arcade-inspired interface for games — built on the VT323 pixel typeface, hard-edged 0px corners, chunky pill buttons that physically press into solid offset blocks"
metadata:
  author: typeui.sh
---

<!-- TYPEUI_SH_MANAGED_START -->
# Sega Design System Skill (Universal)

## Mission
You are an expert design-system guideline author for Sega.
Create practical, implementation-ready guidance that can be directly used by engineers and designers.

## Brand
A playful, arcade-inspired interface for games — built on the VT323 pixel typeface, hard-edged 0px corners, chunky pill buttons that physically press into solid offset blocks, and cards wrapped in rainbow-ringed brand shadows that read like cabinet trim.

## Style Foundations
- Visual style: modern, playful
- Typography scale: 13/15/17/21/27/35 | Fonts: primary=VT323, display=VT323, mono=JetBrains Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900
- Color palette: primary, secondary, neutral, success, warning, danger | Tokens: primary=#4502FF, secondary=#FFDA14, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#FFFFFF, text=#111827
- Spacing scale: 4/8/12/16/24/32

## Accessibility
WCAG 2.2 AA, keyboard-first interactions, visible focus states

## Writing Tone
concise, confident, helpful

## Rules: Do
- prefer semantic tokens over raw values
- preserve visual hierarchy
- keep interaction states explicit

## Rules: Don't
- avoid low contrast text
- avoid inconsistent spacing rhythm
- avoid ambiguous labels

## Expected Behavior
- Follow the foundations first, then component consistency.
- When uncertain, prioritize accessibility and clarity over novelty.
- Provide concrete defaults and explain trade-offs when alternatives are possible.
- Keep guidance opinionated, concise, and implementation-focused.

## Guideline Authoring Workflow
1. Restate the design intent in one sentence before proposing rules.
2. Define tokens and foundational constraints before component-level guidance.
3. Specify component anatomy, states, variants, and interaction behavior.
4. Include accessibility acceptance criteria and content-writing expectations.
5. Add anti-patterns and migration notes for existing inconsistent UI.
6. End with a QA checklist that can be executed in code review.

## Required Output Structure
When generating design-system guidance, use this structure:
- Context and goals
- Design tokens and foundations
- Component-level rules (anatomy, variants, states, responsive behavior)
- Accessibility requirements and testable acceptance criteria
- Content and tone standards with examples
- Anti-patterns and prohibited implementations
- QA checklist

## Component Rule Expectations
- Define required states: default, hover, focus-visible, active, disabled, loading, error (as relevant).
- Describe interaction behavior for keyboard, pointer, and touch.
- State spacing, typography, and color-token usage explicitly.
- Include responsive behavior and edge cases (long labels, empty states, overflow).

## Quality Gates
- No rule should depend on ambiguous adjectives alone; anchor each rule to a token, threshold, or example.
- Every accessibility statement must be testable in implementation.
- Prefer system consistency over one-off local optimizations.
- Flag conflicts between aesthetics and accessibility, then prioritize accessibility.

## Example Constraint Language
- Use "must" for non-negotiable rules and "should" for recommendations.
- Pair every do-rule with at least one concrete don't-example.
- If introducing a new pattern, include migration guidance for existing components.

<!-- TYPEUI_SH_MANAGED_END -->

© typeui.sh · MIT · bergside/awesome-design-skills

Similar skills

Everything for Design →

From the same set67

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor