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.
npx skills add bergside/awesome-design-skills --skill sega -a claude-codeWhat 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-code2Manually: put the files in place
~/.claude/skills/sega/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/sega/
1Skills CLI (Vercel)
npx skills add bergside/awesome-design-skills --skill sega -a codex2Manually: put the files in place
.agents/skills/sega/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add bergside/awesome-design-skills --skill sega -a cursor2Manually: put the files in place
.cursor/skills/sega/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install bergside/awesome-design-skills sega2Manually: put the files in place
.github/skills/sega/SKILL.md1Skills CLI (Vercel)
npx skills add bergside/awesome-design-skills --skill sega -a gemini-cli2Platform CLI
gemini skills install https://github.com/bergside/awesome-design-skills --path skills/segaManually: put the files in place
.devin/skills/sega/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add bergside/awesome-design-skills --skill sega -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
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