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

vintage

Generate Vintage UI design-system rules with tokens, accessibility, and QA checklists.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the challenge of producing consistent, implementation-ready UI guidance for a Vintage design system so teams can build retro interfaces that still meet accessibility and quality expectations.

Core Features & Use Cases

  • Design-system foundations: Provides concrete typography, color palette, and spacing scales (e.g., Silkscreen/JetBrains Mono, defined hex tokens, and a 4/8/12/16/24/32 rhythm).
  • Component-ready rules: Guides creation of component anatomy, variants, and interaction states (default, hover, focus-visible, active, disabled, loading, error where relevant).
  • Accessibility and QA gates: Includes WCAG 2.2 AA requirements, testable acceptance criteria, anti-patterns, and a code-review friendly QA checklist.

Quick Start

Use the vintage skill to author component and interaction guidelines for a Vintage-themed product while enforcing token-based styling and WCAG 2.2 AA acceptance criteria.

Frequently Asked Questions about vintage

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

FAQPage Schema
How do I create a retro UI design system that meets accessibility standards?▼

Build implementation-ready vintage design-system guidance by defining typography, color tokens, and spacing rules, then enforcing WCAG 2.2 AA acceptance criteria and providing a QA checklist to validate retro UI accessibility.

What design tokens are needed for a vintage UI style?▼

A vintage UI style requires semantic design tokens for typography like Silkscreen or JetBrains Mono, defined hex color palettes, and a 4/8/12/16/24/32 spacing rhythm to maintain consistent retro aesthetics across product interfaces.

How do I define component states and variants for a retro interface?▼

Define component anatomy and interaction states for a retro interface by generating structured rulesets that cover default, hover, focus-visible, active, disabled, loading, and error states using semantic token constraints.

Can I use skeuomorphic and grainy textures in an accessible design system?▼

Yes, you can apply skeuomorphic and grainy textures in an accessible design system by following generated UI guidelines that include testable accessibility requirements and anti-pattern notes to prevent WCAG 2.2 AA violations.

How do I handle responsive design and edge cases for pixel-typographic UI components?▼

Handle responsive behavior and edge cases for pixel-typographic UI components by generating structured rulesets that define responsive constraints, identify anti-patterns, and provide migration notes for retro interface implementations.

What should be included in a QA checklist for a vintage design system?▼

A QA checklist for a vintage design system should include testable acceptance criteria for component states, WCAG 2.2 AA accessibility validation, semantic token compliance, and code-review checks against defined retro UI anti-patterns.

Related Skills

Explore More Design & Creative Skills→
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
BurburtonBurburton

component-design

Generate UI component design specifications covering anatomy, variants, props, styling, accessibility, and design system integration.

Community
Advanced
AshesOfTheUndeadAshesOfTheUndead

retro

Generate retro UI component rules with high-contrast palettes and WCAG 2.2 AA compliance.

Community
Intermediate
AshesOfTheUndeadAshesOfTheUndead

vintage

Generate design-system guidelines for 1950s-1990s retro UI aesthetics.

Community
Intermediate