Pacman design skill for AI agents

Overview

Pac-Man is a retro arcade-inspired design system skill for AI-powered development. It channels the legendary maze game's visual DNA — pixel-perfect typography, high-contrast colors on dark surfaces, dotted borders, and a playful energy that feels like stepping up to a cabinet in a neon-lit arcade. This skill turns any interface into a celebration of 8-bit nostalgia built with modern engineering.

When you add this skill file to your AI coding tool, every component it generates — from buttons that feel like they'd make a satisfying blip when pressed to dashboards laid out like high-score screens — follows the same retro-arcade visual language while meeting modern accessibility standards.

Design tokens

Color palette

Pac-Man uses a bold, arcade-cabinet palette where a deep electric blue and a soft peach secondary create an unexpected retro pairing against a black surface:

The electric blue + peach pairing is deliberately unconventional. It avoids the obvious Pac-Man yellow in favor of a palette that references the broader arcade era — CRT phosphor warmth, cabinet artwork blues, and the high-contrast readability that 1980s games demanded on low-resolution screens. The black surface token grounds everything in the feeling of a powered-on arcade monitor.

Typography

Pac-Man uses Press Start 2P for all body and display text — a pixel font that recreates the exact bitmap letterforms of 1980s arcade and console games. This is the most visually distinctive typeface choice of any typeui.sh design skill.

Press Start 2P is a single-concept font: every character maps to an 8x8 pixel grid. While the skill lists the full weight range (100-900), the font itself renders at a single visual weight — its bitmap nature means bold and light variants don't apply in the traditional sense. The AI agent builds typographic hierarchy entirely through:

• Size — the desktop-first expressive scale uses dramatic jumps between heading and body sizes, since pixel fonts need larger sizes to remain legible
• Color — electric blue for emphasis, peach for warmth, muted tones for secondary content
• Spacing — generous letter-spacing and line-height compensate for the dense pixel grid of each character

Space Mono handles monospaced content — code blocks, data tables, and technical contexts where Press Start 2P's pixel grid would be impractical for dense information. Space Mono's retro-modern aesthetic bridges the gap between the arcade theme and functional readability.

Spacing

Pac-Man uses an 8pt baseline grid — every margin, padding, and gap aligns to multiples of 8px. The 8pt grid is a natural fit for the pixel aesthetic: it echoes the 8x8 character cells of classic arcade typography and keeps layouts snapping to a grid that feels authentically retro. The skill also specifies dotted borders as a signature decorative element — referencing the dot trails of the original game's maze paths.

Component coverage

The skill file covers 40+ component families grouped by function:

• Inputs and forms — buttons, text inputs, selects, comboboxes, checkboxes, radios, switches, textareas, date/time pickers, file uploaders
• Data display — cards, tables, data lists, data grids, charts, stats/metrics, badges, chips, avatars
• Navigation — breadcrumbs, pagination, steppers, sidebars, top bars, command palette, tabs
• Overlays — modals, drawers, sheets, tooltips, popovers, menus
• Feedback — alerts, toasts, notifications center, progress indicators, skeletons, empty states
• Page-level — authentication screens, settings pages, documentation layouts, onboarding flows, pricing blocks, search

For each component, the skill defines required interaction states (default, hover, focus-visible, active, disabled, loading, error), keyboard and touch behavior, spacing and typography token usage, and responsive edge cases.

Design philosophy

Pac-Man is built on the principle that retro nostalgia and professional-grade UI can coexist. The skill encodes the arcade aesthetic as a disciplined system, not a novelty gimmick:

• Pixel-native typography — Press Start 2P isn't a decorative choice bolted onto a standard layout. The entire type system is designed around bitmap letterforms, with sizing, spacing, and hierarchy calibrated for how pixel fonts actually render
• Dotted borders as signature — the dotted border style is a first-class design element, referencing the dot-trails of arcade mazes. The AI agent uses them consistently for card edges, dividers, and decorative boundaries
• Dark canvas, bright accents — the black surface creates the arcade-screen foundation. Electric blue and peach glow against it like phosphor on a CRT, giving every interactive element a sense of being "lit up"
• Single visual metaphor — the skill explicitly prohibits mixing the arcade aesthetic with other styles. No glassmorphism cards next to pixel-font headings. Consistency is what makes the theme feel intentional rather than costume-like
• Purposeful motion only — the skill blocks decorative animation without function. Every transition and micro-interaction must serve a UX purpose, preventing the retro theme from becoming an excuse for gratuitous blinking and bouncing

This makes Pac-Man a strong fit for:

• Gaming platforms and leaderboard dashboards
• Retro-themed product launches and event sites
• Developer tools and hackathon platforms
• Entertainment and media applications
• Gamified learning and education products
• Nostalgia-driven brand experiences
• Any product where playfulness and personality are core to the brand

Accessibility

Pac-Man has an expanded accessibility spec that ensures the retro-arcade aesthetic remains fully usable, enforcing WCAG 2.2 AA plus additional requirements:

• Keyboard-first interactions for all interactive elements
• Visible focus states on every focusable component — designed to be clearly visible against the dark surface and alongside dotted borders
• Reduced-motion support — all animations and transitions respect prefers-reduced-motion, critical for a theme where playful motion could otherwise be overused
• 44px+ touch targets — all interactive elements meet minimum tap size, especially important when pixel typography can make tap boundaries visually ambiguous
• High-contrast support — the dark surface with bright accents naturally provides strong contrast, but the skill also ensures OS-level high-contrast modes are respected

Pixel fonts present a unique accessibility challenge: at small sizes, bitmap letterforms can become difficult to read. The skill addresses this by enforcing minimum size thresholds for Press Start 2P and falling back to Space Mono for dense data contexts where the pixel font would hurt comprehension.

Every accessibility rule is written to be testable in code review.

How to use with Claude AI

In Cursor IDE

1. Pull the skill file into your project:

npx typeui.sh pull pacman

2. The file is saved to .cursor/skills/pacman/SKILL.md by default. Cursor automatically picks up skill files from this directory and makes them available to Claude.

3. Start prompting — Claude will generate arcade-themed interfaces with Press Start 2P typography, dotted borders, the electric blue + peach palette, and dark surface layouts.

In Claude Desktop or API

1. Copy the skill file content from the typeui.sh page (use the Copy button in the sidebar).

2. Paste it into your system prompt or as a reference document at the start of your conversation.

3. Ask Claude to build components or pages. It will follow the Pac-Man guidelines — using pixel typography, the 8pt grid aligned to 8x8 character cells, dotted borders, and arcade-era color relationships throughout.

In other AI tools

The skill file is standard markdown and works with any AI tool that accepts system-level instructions:

• Windsurf — place the file in your project's .windsurf/rules/ directory
• GitHub Copilot — add it to .github/copilot-instructions.md or reference it in your prompt
• OpenAI GPTs — upload it as a knowledge file in the GPT configuration
• Any LLM API — include the file content in the system message

What sets Pac-Man apart

Pac-Man is the most thematically specific design skill on typeui.sh. It doesn't just reference a visual style — it recreates an era:

• Pixel-native type system — Press Start 2P maps to an 8x8 grid, and the entire typographic hierarchy is designed around bitmap rendering. No other skill builds its type system from pixel constraints upward
• Dotted borders as design language — where other skills use solid or no borders, Pac-Man makes the dotted border a signature element that references the original game's maze paths
• Unconventional color pairing — electric blue + peach avoids the obvious game-yellow cliché, instead capturing the broader CRT-era arcade aesthetic
• 8pt grid meets 8x8 pixels — the baseline grid naturally aligns with the character grid of the pixel font, creating a unified spatial system that feels authentically retro
• Motion discipline — the skill blocks decorative animation, ensuring the playful theme never becomes an excuse for purposeless visual noise
• Pixel-font accessibility safeguards — minimum size thresholds and monospace fallbacks for dense content address the unique readability challenges of bitmap typography
• Quality gates — every rule is anchored to a token or measurable threshold, keeping the arcade aesthetic consistent whether the AI generates a single badge or an entire high-score dashboard