skills.rest
MANR255926
MANR255926COMMUNITY
Explore all skills by this author →
𝕏@Allyan255926GitHub

pacman

Generates implementation-ready design-system guidelines using retro arcade tokens and accessibility rules.

Updated Aug 31, 2026
Search Tags:#accessibility#design system#design tokens#wcag#component guidelines#retro arcade#pixel fonts
One-click install
npx skills add https://github.com/MANR255926/GARAGE --skill pacman-manr255926
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pacman
Source: https://github.com/MANR255926/GARAGE/tree/main/.agents/skills/pacman
Command: npx skills add https://github.com/MANR255926/GARAGE --skill pacman-manr255926

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams building retro arcade-styled interfaces often lack consistent, implementation-ready design rules, leading to inconsistent spacing, low-contrast text, and ad-hoc component behavior. This Skill turns the Pacman visual identity into concrete tokens, component rules, and testable accessibility criteria. ## Core Features & Use Cases - Design Token Foundations: Defines color tokens (primary #2A3FE5, secondary #F4B9B0, semantic states), pixel typography (Press Start 2P, Space Mono), and an 8pt spacing grid. - Component-Level Guidance: Produces rules for anatomy, variants, states (hover, focus-visible, disabled, loading, error), and responsive behavior anchored to tokens. - Accessibility & QA Gates: Enforces WCAG 2.2 AA, keyboard-first interactions, visible focus states, and a code-review-ready QA checklist. - Use Case: Ask for a button or form guideline and receive opinionated rules with do/don't examples, anti-patterns, and migration notes for inconsistent existing UI. ## Quick Start Use the pacman skill to generate design-system guidelines for a retro arcade-styled button component with full state and accessibility rules.

Frequently Asked Questions about pacman

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

FAQPage Schema
How do I create design-system guidelines for a retro arcade UI?▼

Define tokens first: colors like primary #2A3FE5, pixel fonts such as Press Start 2P, and an 8pt spacing grid. Then specify component anatomy, states, and interaction behavior, and finish with accessibility criteria and a QA checklist.

What fonts and colors does the Pacman design system use?▼

It uses Press Start 2P for headings and body text with Space Mono for labels, across weights 100-900. Colors include primary #2A3FE5, secondary #F4B9B0, success #16A34A, warning #D97706, and danger #DC2626.

Does this design guidance meet WCAG accessibility standards?▼

Yes, the guidelines target WCAG 2.2 AA with keyboard-first interactions, visible focus states, reduced-motion support, and 44px minimum touch targets. Every accessibility statement must be testable in implementation.

How do I handle low contrast with pixel fonts on dark surfaces?▼

The rules explicitly prohibit low-contrast text and require pairing every do-rule with a concrete don't-example. When aesthetics conflict with accessibility, the guidance prioritizes accessibility and flags the conflict.

When should I not use a retro arcade design style?▼

Avoid it when the product requires dense data display, formal enterprise tone, or long-form reading, since pixel fonts reduce legibility at small sizes. The style fits playful, high-contrast interfaces with short labels.

Related Skills

Explore More Design & Creative Skills→
Chai-UnChai-Un

brand-guidelines

Codify Anthropic color, typography, and layout rules for design assets.

Community
Basic
kleon6436kleon6436

css-coding-standards

Enforce CSS and Tailwind coding standards during code reviews.

Community
Intermediate
luanrodriguesluanrodrigues
2

bee:dev-frontend-visual-react-native

Generate Jest snapshot tests for React Native components across iOS and Android.

Community
Advanced
hiyeshuhiyeshu
4

ui-design-styling

Creates theme-aware CSS classes and variables for OS-inspired web UI components.

Community
Intermediate