pacman

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

Updated May 13, 2026
One-click install
npx skills add https://github.com/superpollo02/awesome-design-skill --skill pacman-superpollo02
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: pacman
Source: https://github.com/superpollo02/awesome-design-skill/tree/main/skills/pacman
Command: npx skills add https://github.com/superpollo02/awesome-design-skill --skill pacman-superpollo02

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It standardizes retro arcade UI guidance so teams can build consistent, accessible components with pixel-art styling and high-contrast, game-like aesthetics.

Core Features & Use Cases

It defines the pacman design foundations (typography, color tokens, spacing rhythm) and converts them into implementation-ready rules for component design, including accessibility constraints (WCAG 2.2 AA, visible focus, keyboard-first, reduced motion, and touch target sizing). It is intended for engineers and designers building design-system components such as buttons, inputs, cards, and interactive navigation that must look “Pac‑Man” while remaining usable and testable in real products. It is useful when you want a cohesive theme across an agent-generated UI, a design-system implementation, or a UI refactor that needs consistent do/don’t guidance and QA checkpoints.

Quick Start

Use the pacman skill to generate UI components that follow its token-based styling, interaction-state rules, and testable accessibility requirements.

Frequently Asked Questions about pacman

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

FAQPage Schema
How do I build retro arcade UI components that meet WCAG 2.2 AA accessibility standards?

To build retro arcade UI components meeting WCAG 2.2 AA standards, apply token-first rules for colors and typography alongside explicit interaction states like focus-visible and active. This ensures high-contrast, game-like aesthetics remain accessible and keyboard-first.

What is the best way to standardize a design system theme for pixel-art styling across product screens?

Standardizing a design system theme for pixel-art styling involves defining foundational color tokens, typography, and spacing rhythm. You convert these into implementation-ready rules to maintain cohesive interactive component families across responsive scenarios.

How do I define explicit interaction states for design-system buttons and inputs?

Defining explicit interaction states for design-system buttons and inputs requires specifying default, hover, focus-visible, active, disabled, loading, and error states. This approach guarantees consistent component behavior and testable accessibility constraints.

Can I use token-based theming to ensure keyboard-first behavior in a UI refactor?

Yes, you can use token-based theming to enforce keyboard-first behavior during a UI refactor. By applying token-first rules for colors and typography, you ensure visible focus and touch target sizing meet accessibility requirements.

When do I need a QA checklist with testable acceptance criteria for UI components?

You need a QA checklist with testable acceptance criteria for UI components when verifying accessibility constraints like reduced motion and WCAG 2.2 AA compliance. This ensures interactive navigation and pixel-art styling are usable in real products.

Does retro arcade UI styling work with standard design-system authoring workflows?

Retro arcade UI styling integrates with standard design-system authoring workflows by applying token-first rules for colors and typography. It converts game-like aesthetics into implementation-ready guidance for engineers and designers building accessible components.