vintage

Generate retro-vintage design system UI with skeuomorphic cues and pixel typography.

Updated May 13, 2026
One-click install
npx skills add https://github.com/superpollo02/awesome-design-skill --skill vintage-superpollo02
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vintage
Source: https://github.com/superpollo02/awesome-design-skill/tree/main/skills/vintage
Command: npx skills add https://github.com/superpollo02/awesome-design-skill --skill vintage-superpollo02

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It standardizes how to build retro-vintage user interfaces so teams can consistently apply pixel typography, skeuomorphic cues, and accessible interaction states.

Core Features & Use Cases

  • Token-first vintage theming: Defines a cohesive retro palette and typography/spacing scales (e.g., Silkscreen + JetBrains Mono, spacing and sizing ramps) for consistent styling.
  • Implementation-ready component guidance: Provides rule frameworks for component states (default, hover, focus-visible, active, disabled, loading, error) and interaction behavior across input types.
  • Accessibility and QA gates: Enforces WCAG 2.2 AA principles, keyboard-first interactions, explicit focus states, and testable quality gates to reduce regressions.

Quick Start

Ask the AI to generate a complete Vintage design-system implementation plan using the provided tokens and including WCAG 2.2 AA, keyboard focus-visible behavior, and a QA checklist for components.

Frequently Asked Questions about vintage

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

FAQPage Schema
How do I build a retro UI design system with accessible skeuomorphic components?

To build a retro UI design system, apply skeuomorphic visual cues using pixel-style typography and a defined token palette while enforcing WCAG 2.2 AA, keyboard-first focus-visible behavior, and explicit component states across buttons, inputs, and modals.

What are the best practices for standardizing component states in a vintage UI library?

Standardizing component states in a vintage UI library requires defining explicit visual rules for default, hover, focus-visible, active, disabled, loading, and error states, backed by testable QA anti-pattern constraints to prevent regressions.

Can I use pixel typography like Silkscreen while meeting WCAG 2.2 AA accessibility requirements?

Yes, you can use pixel typography like Silkscreen and JetBrains Mono while meeting WCAG 2.2 AA requirements by applying a token-first theming approach that defines cohesive typography, spacing ramps, and explicit keyboard-first focus-visible states.

How do I create a token palette for skeuomorphic design systems?

Creating a token palette for skeuomorphic design systems involves defining cohesive retro color scales, typography ramps, and spacing rules upfront, ensuring consistent styling across all component interactions and visual cues.

Does this vintage UI approach work for standardizing interaction patterns in product interfaces?

Yes, this vintage UI approach works for standardizing interaction patterns by providing implementation-ready guidance for navigation, modals, cards, and inputs, ensuring consistent behavior and accessible focus management across product interfaces.