skills.rest
jbreel77888
jbreel77888COMMUNITY
Explore all skills by this author →
GitHub

retro

Generates implementation-ready design-system guidelines using retro tokens, typography, and accessibility rules.

Updated Jun 20, 2026
Search Tags:#typography#accessibility#WCAG#design system#design tokens#retro#component guidelines
One-click install
npx skills add https://github.com/jbreel77888/Ai-Agnet --skill retro-jbreel77888
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: retro
Source: https://github.com/jbreel77888/Ai-Agnet/tree/main/skills/design/design-systems/style-skills/retro
Command: npx skills add https://github.com/jbreel77888/Ai-Agnet --skill retro-jbreel77888

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams building retro-styled interfaces often lack consistent, documented design rules, leading to inconsistent spacing, low-contrast text, and ad-hoc component implementations that fail accessibility reviews. ## Core Features & Use Cases - Design Token Foundations: Provides a complete retro token set including colors (primary #3B82F6, secondary #8B5CF6), Macondo and JetBrains Mono typography, and a 4/8/12/16/24/32 spacing scale. - Structured Guideline Authoring: Enforces a required output structure covering component anatomy, states, variants, responsive behavior, and anti-patterns. - Accessibility Gates: Anchors every rule to WCAG 2.2 AA with testable acceptance criteria and explicit interaction states. - Use Case: A designer asks for button component rules for a vintage-themed web app; the Skill produces token-anchored specs with hover, focus-visible, disabled, and loading states plus a QA checklist for code review. ## Quick Start Use the retro skill to write design-system guidelines for a card component including tokens, states, and accessibility criteria.

Frequently Asked Questions about retro

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

FAQPage Schema
How do I create design system guidelines for a retro-themed UI?▼

Define foundational tokens first—colors, typography, and spacing—then specify component anatomy, states, and variants. This Skill provides a retro token set with Macondo typography and a structured authoring workflow ending in a QA checklist.

What color tokens does the retro design system use?▼

The palette includes primary #3B82F6, secondary #8B5CF6, success #16A34A, warning #D97706, danger #DC2626, surface #FFFFFF, and text #111827. Rules require semantic tokens over raw hex values in component specs.

Does the retro skill enforce accessibility standards?▼

Yes, it targets WCAG 2.2 AA with keyboard-first interactions and visible focus states. Every accessibility statement must be testable, and conflicts between aesthetics and accessibility are resolved in favor of accessibility.

What component states should retro design guidelines cover?▼

Guidelines must define default, hover, focus-visible, active, disabled, loading, and error states as relevant. They also describe keyboard, pointer, and touch interaction behavior plus responsive edge cases like long labels and overflow.

When should I not use a retro design system style?▼

Avoid it when brand requirements demand neutral corporate aesthetics or when the expressive Macondo display font harms readability in dense data interfaces. High-contrast retro palettes also require careful contrast validation for body text.

Related Skills

Explore More Design & Creative Skills→
hi-yuki-922hi-yuki-922
1

i-teach-impeccable

Gather design context from codebase and user input into CLAUDE.md.

Community
Intermediate
masanao-ohbamasanao-ohba
2

react-code-reviewer

Review React 19 TypeScript projects against structured code quality checklists.

Community
Basic
fusenginefusengine
22

validating-accessibility

Validate digital interfaces against WCAG 2.2 Level AA accessibility standards.

Community
Intermediate
hiyeshuhiyeshu
4

ui-design-styling

Creates theme-aware CSS classes and variables for OS-inspired web UI components.

Community
Intermediate