pacman

Generate Pacman design-system guidance for UI components with token rules and accessibility criteria.

1|Updated Jul 9, 2026
One-click install
npx skills add https://github.com/PiercingXX/xx-stack --skill pacman
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: pacman
Source: https://github.com/PiercingXX/xx-stack/tree/main/packs/design/design-skills/pacman
Command: npx skills add https://github.com/PiercingXX/xx-stack --skill pacman

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill turns the Pacman design-system style foundations into clear, implementation-ready rules so teams can build consistent UIs without guesswork or scattered interpretations.

Core Features & Use Cases

  • Token-first foundations: Defines typography, spacing, and color palettes (including exact token values) to keep visuals consistent across components.
  • Component-level rule authoring: Produces guidance for anatomy, states (default/hover/focus-visible/active/disabled/loading/error as relevant), variants, responsive behavior, and edge cases like overflow and empty states.
  • Accessibility and review-ready quality gates: Enforces WCAG 2.2 AA expectations and adds a QA checklist plus anti-patterns to prevent low-quality implementation.

Quick Start

Generate Pacman design-system guidance for a specific UI component while adhering to the token definitions, accessibility requirements, and the required output structure.

Frequently Asked Questions about pacman

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

FAQPage Schema
How do I define consistent component states for a design system?

Define consistent component states by generating design-system guidance that specifies anatomy, variants, and state behaviors like default, hover, focus-visible, active, and disabled using token-first rules.

What is token-based theming for UI guidelines?

Token-based theming for UI guidelines anchors typography, spacing, and color palettes to exact concrete values, ensuring consistent visual implementation across components without guesswork.

How do I add accessibility acceptance criteria to component documentation?

Add accessibility acceptance criteria by enforcing WCAG 2.2 AA expectations within your component guidance and appending a QA checklist with anti-patterns to prevent low-quality implementation.

Can I document responsive behavior and edge cases for UI components?

You can document responsive behavior and edge cases like overflow and empty states by authoring component-level rules that cover variants and state interactions.

What's the best way to document design system variants without scattered interpretations?

The best way to avoid scattered interpretations is applying token-first foundations with exact values to author implementation-ready rules that standardize component variants and content tone.

Do I need exact token values to start authoring UI guidelines?

Yes, this approach requires token-first rules anchored to concrete values, defining exact typography, spacing, and color palettes before generating component-level UI guidance.