skills.rest
bergside
bergsideOFFICIAL
Explore all skills by this author →
WebsiteGitHub

pacman

Generate Pac-Man themed UI component rules with tokenized typography, color, spacing, and WCAG 2.2 AA acceptance criteria.

2.3k|211|Updated Mar 9, 2026
Search Tags:#accessibility#design-system#ui-components#focus-visible#pixel-typography#token-themes#retro-arcade
One-click install
npx skills add https://github.com/bergside/awesome-design-skills --skill pacman-bergside
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pacman
Source: https://github.com/bergside/awesome-design-skills/tree/main/skills/pacman
Command: npx skills add https://github.com/bergside/awesome-design-skills --skill pacman-bergside

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It standardizes how to create retro arcade (Pac‑Man) design system components so teams can build consistent, accessible UI with pixel-font styling and game-inspired visual rules.

Core Features & Use Cases

  • Tokenized foundations: Defines typography, color palette, spacing rhythm, and corner rounding so components stay cohesive.
  • Implementation-ready guidance: Provides opinionated do/don’t rules, required interaction states, and quality gates tied to accessibility expectations (WCAG 2.2 AA, focus-visible, touch target sizing).
  • Component consistency workflow: Instructs authors to start from intent and tokens, then add component anatomy, states/variants, and a QA checklist that can be executed in code review.

Quick Start

Use the pacman skill to generate implementation-ready Pac‑Man themed UI rules for typography, colors, spacing, focus states, and component behavior.

Frequently Asked Questions about pacman

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

FAQPage Schema
How do I build an accessible retro arcade design system with pixel typography?▼

Build a retro arcade design system by applying tokenized typography, color, spacing, and rounded-corner foundations to standardize UI components, ensuring pixel-font styling remains cohesive and accessible across teams.

What states should UI components include for WCAG 2.2 AA keyboard-first interaction?▼

UI components must define hover, focus-visible, active, disabled, loading, and error states to meet WCAG 2.2 AA keyboard-first interaction guidance, high-contrast constraints, and touch target sizing thresholds.

Can I use token themes to standardize component behavior in a design system?▼

Yes, token themes standardize component behavior by defining typography, color palette, spacing rhythm, and corner rounding, ensuring retro arcade UI components remain cohesive and consistent across implementation patterns.

How do I create a QA checklist for design system component states?▼

Create a QA checklist by anchoring acceptance criteria to specific design tokens and accessibility thresholds, verifying component anatomy, interaction states, and variants pass code review against defined do/don't rules.

What are the limitations of using a retro arcade design system for UI components?▼

Using a retro arcade design system requires strict adherence to tokenized foundations and opinionated do/don't rules, limiting visual flexibility while demanding careful management of high-contrast constraints and focus-visible states to maintain accessibility.

Related Skills

Explore More Design & Creative Skills→
wildbitcawildbitca
1

common-ui-design

Define UI aesthetic and design system tokens before frontend implementation.

Official
Advanced
bergsidebergside
2.3k

sega

Generate Sega-inspired UI design guidance with VT323 typography and WCAG 2.2 AA accessibility.

Official
Intermediate
superpollo02superpollo02

pacman

Standardize retro arcade UI components with WCAG 2.2 AA accessibility rules.

Community
Intermediate
AshesOfTheUndeadAshesOfTheUndead

pacman

Standardize retro arcade UI design systems within Roblox frameworks.

Community
Intermediate