К основному содержанию
скилл CX Codex

pacman — скилл для Claude Code: что делает и как установить

Скилл настраивает ИИ-агента на генерацию дизайн-систем и интерфейсов в ретро-стиле аркадных автоматов с пиксельными шрифтами, точечными рамками и контрастной палитрой.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add bergside/awesome-design-skills --skill pacman -a claude-code
Открыть на GitHub

Что делает pacman

Скилл превращает помощника в составителя спецификаций для дизайн-системы в духе классического Pac-Man. В основе лежат шрифты Press Start 2P и Space Mono, сетка с базовым шагом 8pt, точечные границы блоков и строгие токены цветов: синий primary #2A3FE5, персиковый secondary #F4B9B0 и чёрная подложка #000000.

ИИ описывает компоненты через обязательные состояния: от default и hover до focus-visible, active, disabled, loading и error. В ответ включаются требования к клавиатурной навигации, кликабельным областям от 44px и адаптивности. Для каждого компонента агент формирует критерии приёмки и чеклист для код-ревью.

Если эстетика 8-битной графики конфликтует с удобством использования, скилл требует отдавать приоритет WCAG 2.2 AA. Низкоконтрастный текст и декоративная анимация без практической пользы здесь прямо запрещены.

Какие задачи решает

  • сформировать дизайн-токены и типографику для ретро-интерфейса
  • описать состояния компонентов с учётом клавиатурного фокуса и тач-зон от 44px
  • составить чеклист проверки доступности интерфейса по стандарту WCAG 2.2 AA
  • подготовить правила и антипаттерны для код-ревью фронтенда

Примеры запросов агенту

  • Опиши спецификацию кнопки в стиле pacman со всеми интерактивными состояниями
  • Создай чеклист для код-ревью карточки товара по дизайн-системе pacman
  • Сформируй токены цветов и отступов для аркадного модального окна

Как установить pacman

1Через Skills CLI (Vercel)

npx skills add bergside/awesome-design-skills --skill pacman -a claude-code

2Вручную: положить файлы

~/.claude/skills/pacman/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/pacman/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о pacman

Как установить pacman в Claude Code?

Выполните команду npx skills add bergside/awesome-design-skills --skill pacman -a claude-code. Файл спецификации сохранится по пути ~/.claude/skills/pacman/SKILL.md.

Какие шрифты и цвета задаёт скилл pacman?

Для интерфейса используется гарнитура Press Start 2P, а для моноширинных вставок — Space Mono. Палитра включает синий #2A3FE5, персиковый #F4B9B0, чёрную поверхность #000000 и тёмный текст #111827.

Как скилл решает конфликты между стилем и доступностью?

Правила скилла предписывают предпочитать доступность оригинальности оформления. Все интерактивные элементы обязаны соответствовать WCAG 2.2 AA, поддерживать видимый фокус и сенсорные области размером не меньше 44px.

Исходный текст

SKILL.md · MIT
---
name: pacman
description: Retro arcade-inspired design with pixel fonts, dotted borders, playful high-contrast colors, and 8-bit game aesthetics.
license: MIT
metadata:
  author: typeui.sh
---

<!-- TYPEUI_SH_MANAGED_START -->
# Pacman Design System Skill (Universal)

## Mission
You are an expert design-system guideline author for pacman.
Create practical, implementation-ready guidance that can be directly used by engineers and designers.

## Brand
Dive into the legendary arcade adventure of Pac‑Man, where quick reflexes and smart moves help you clear mazes and escape the ghosts.

## Style Foundations
- Visual style: high-contrast, playful, dotted borders
- Typography scale: desktop-first expressive scale | Fonts: primary=Press Start 2P, display=Press Start 2P, mono=Space Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900
- Color palette: primary, secondary, success, warning, danger, info, surface/subtle layers | Tokens: primary=#2A3FE5, secondary=#F4B9B0, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#000000, text=#111827
- Spacing scale: 8pt baseline grid


## Accessibility
WCAG 2.2 AA, keyboard-first interactions, visible focus states, reduced-motion support, 44px+ touch targets, high-contrast support

## Writing Tone
professional

## Rules: Do
- prefer semantic tokens over raw values
- preserve visual hierarchy

## Rules: Don't
- avoid low contrast text
- avoid inconsistent spacing rhythm
- avoid decorative motion without purpose
- avoid ambiguous labels
- avoid mixing multiple visual metaphors

## Expected Behavior
- Follow the foundations first, then component consistency.
- When uncertain, prioritize accessibility and clarity over novelty.
- Provide concrete defaults and explain trade-offs when alternatives are possible.
- Keep guidance opinionated, concise, and implementation-focused.

## Guideline Authoring Workflow
1. Restate the design intent in one sentence before proposing rules.
2. Define tokens and foundational constraints before component-level guidance.
3. Specify component anatomy, states, variants, and interaction behavior.
4. Include accessibility acceptance criteria and content-writing expectations.
5. Add anti-patterns and migration notes for existing inconsistent UI.
6. End with a QA checklist that can be executed in code review.

## Required Output Structure
When generating design-system guidance, use this structure:
- Context and goals
- Design tokens and foundations
- Component-level rules (anatomy, variants, states, responsive behavior)
- Accessibility requirements and testable acceptance criteria
- Content and tone standards with examples
- Anti-patterns and prohibited implementations
- QA checklist

## Component Rule Expectations
- Define required states: default, hover, focus-visible, active, disabled, loading, error (as relevant).
- Describe interaction behavior for keyboard, pointer, and touch.
- State spacing, typography, and color-token usage explicitly.
- Include responsive behavior and edge cases (long labels, empty states, overflow).

## Quality Gates
- No rule should depend on ambiguous adjectives alone; anchor each rule to a token, threshold, or example.
- Every accessibility statement must be testable in implementation.
- Prefer system consistency over one-off local optimizations.
- Flag conflicts between aesthetics and accessibility, then prioritize accessibility.

## Example Constraint Language
- Use "must" for non-negotiable rules and "should" for recommendations.
- Pair every do-rule with at least one concrete don't-example.
- If introducing a new pattern, include migration guidance for existing components.

<!-- TYPEUI_SH_MANAGED_END -->

© typeui.sh · MIT · bergside/awesome-design-skills

Похожие скиллы

Всё по теме «Дизайн» →
image-to-code plugin87 Переносит макеты и скриншоты интерфейсов в код дизайн-системы на дизайн-токенах DTCG с проверкой контрастности и доступности. CX Codex +1 719установок pixel-art-sprites omer-metin Настраивает ассистента на отрисовку спрайтов и тайлсетов. Пригодится при разработке ретро-игр с жёсткими лимитами палитры и кадров. CX Codex +1 2 700установок extract-design Manavarya09 Скилл анализирует сайт по URL и собирает его дизайн-систему в файлы для разработки и дизайна. Пригодится, когда нужно перенести цвета, шрифты и другие решения сайта в проект. CX Codex +1 2 900установок critique-color Owl-Listener Скилл разбирает цветовую схему одного экрана: измеряет контрастность текста и кнопок, проверяет палитру на лишние hex-значения и следит за доступностью интерфейса. CX Codex +1 1 600установок generate-ui-from-brand dembrandt Превращает URL сайта или файл DESIGN.md в дизайн-токены, решения по UX и готовую спецификацию интерфейса. CX Codex +1 870установок replica-design Jakeschincariol Воссоздаёт дизайн-систему приложения по скриншотам для клона: токены, стили и спецификации компонентов. Нужен, когда интерфейс должен повторить структуру и поведение исходного. CX Codex +1 630установок

Из того же набора67

shadcn Задаёт агенту правила дизайн-системы в стиле shadcn/ui: токены, типографику, состояния компонентов и критерии доступности. CX Codex +1 2 500установок immersive Скилл формулирует правила дизайн-системы для выставочных интерфейсов. Он задаёт глубокий зелёный фон, белые карточки с чёрными тенями и чёткие токены. CX Codex +1 2 300установок claude Задаёт агенту правила оформления интерфейса: тёплая бумажная основа, почти чёрные чернила, сдержанный акцент. Пригодится, когда нужен строгий редакционный вид без теней и градиентов. CX Codex +1 2 300установок tetris Скилл задаёт агенту правила дизайн-системы в духе классической блочной игры: яркие цвета, крупные шрифты, плотная вёрстка. CX Codex +1 2 300установок lingo Скилл задаёт правила для ярких и дружелюбных интерфейсов. Пригодится, когда агенту нужны токены, состояния компонентов и проверяемые требования доступности. CX Codex +1 2 300установок perspective Задаёт агенту правила дизайн-системы с изометрией, точками схода и слоями. Пригодится, когда интерфейсу нужна глубина, а не плоские блоки. CX Codex +1 2 300установок expressive Задаёт правила дизайн-системы с яркой палитрой и моноширинным шрифтом IBM Plex Mono. Помогает агенту собирать спецификации компонентов по стандарту WCAG 2.2 AA. CX Codex +1 2 300установок skeumorphism Скилл задаёт правила для интерфейсов в стиле скевоморфизма: текстуры, 3D-эффекты и знакомые физические метафоры. Нужен для проектирования UI. CX Codex +1 2 300установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой