skills.rest
PiercingXX
PiercingXXCOMMUNITY
Explore all skills by this author →
GitHub

retro

Generate Retro design-system guidelines with tokens, interaction states, and accessibility criteria.

1|Updated Jul 9, 2026
Search Tags:#typography#accessibility#design system#interaction states#ui tokens#component guidelines#retro branding
One-click install
npx skills add https://github.com/PiercingXX/xx-stack --skill retro-piercingxx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: retro
Source: https://github.com/PiercingXX/xx-stack/tree/main/packs/design/design-skills/retro
Command: npx skills add https://github.com/PiercingXX/xx-stack --skill retro-piercingxx

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Retro helps teams produce a consistent vintage-inspired UI by standardizing typography, color tokens, spacing rhythm, interaction states, and authoring rules.

Core Features & Use Cases

  • Token-driven foundations: Defines retro palette tokens (primary/secondary/success/warning/danger/surface/text) plus a desktop-first typography scale using Macondo and JetBrains Mono, and a spacing scale of 4/8/12/16/24/32.
  • Implementation-ready guidance: Provides rules for semantic token usage, preserved visual hierarchy, explicit interaction states, and accessible focus styling.
  • System-level workflow: Includes a guideline authoring workflow with QA checklists, anti-patterns, and migration notes expectations to prevent drift across components.

Quick Start

Ask your AI assistant to generate Retro design-system component guidance that includes tokens, required states (default/hover/focus-visible/active/disabled/loading/error as relevant), and testable accessibility acceptance criteria for your target UI component.

Frequently Asked Questions about retro

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

FAQPage Schema
How do I create a retro design system with consistent UI tokens and accessible interaction states?▼

A retro design system standardizes vintage-inspired UI by defining design tokens, typography, spacing, and interaction states. It prevents visual drift by enforcing component guidelines with do/don't rules, anti-patterns, and QA checklists for consistent web and design workflows.

How do I ensure my vintage-inspired UI meets accessibility requirements?▼

Ensure vintage UI accessibility by applying testable acceptance criteria to components. The system enforces accessible focus styling, preserves visual hierarchy, and defines explicit interaction states including default, hover, focus-visible, active, disabled, loading, and error.

What typography and color tokens do I need for a retro branding design system?▼

Retro branding requires semantic color tokens for primary, secondary, success, warning, danger, surface, and text, plus a typography scale using Macondo and JetBrains Mono. These token-driven foundations ensure consistent visual styling across product components.

Does this retro UI design system work for web design workflows?▼

This retro UI design system works for web and design workflows by generating implementation-ready component rules. It applies to design-system authoring, standardizing token usage, interaction states, and accessibility-constrained UI patterns for desktop-first web contexts.

What are the limitations of using a token-driven retro design system for UI components?▼

A limitation of a token-driven retro design system is its strict dependency on specific Macondo and JetBrains Mono fonts and a fixed 4/8/12/16/24/32 spacing scale. Deviating from these predefined foundations can cause visual drift across UI components.

Related Skills

Explore More Design & Creative Skills→
roanbrasilroanbrasil
5

design-systems

Builds W3C-compliant design token systems and accessible component libraries with Storybook documentation.

Community
Advanced
PiercingXXPiercingXX
1

shadcn

Generate Shadcn/ui-inspired design-system rules with WCAG 2.2 AA accessibility criteria.

Community
Intermediate
superpollo02superpollo02

pacman

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

Community
Intermediate
guideopsguideops

minimal

Implement a minimalist design system with color palettes, typography scales, and spacing scales.

Community
Basic