contemporary

Name: contemporary
Availability: InStock
Author: superpollo02

Define contemporary design-system specs for minimalist UI with WCAG 2.2 AA accessibility.

Updated May 13, 2026

Search Tags:#typography #accessibility #design system #tokens #bento grid #WCAG 2.2 AA

Ready to run

npx skills add https://github.com/superpollo02/awesome-design-skill --skill contemporary-superpollo02

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: contemporary
Source: https://github.com/superpollo02/awesome-design-skill/tree/main/skills/contemporary
Command: npx skills add https://github.com/superpollo02/awesome-design-skill --skill contemporary-superpollo02

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It standardizes contemporary UI design so teams can consistently ship modern, minimalist interfaces that remain accessible and high-performing.

Core Features & Use Cases

Design tokens and style foundations: Defines a Jost/Overpass Mono typography system, a primary/secondary status palette, and a compact spacing/rounding rhythm for reliable visual hierarchy.
Accessibility-first interaction rules: Enforces WCAG 2.2 AA principles like keyboard-first behavior, visible focus states, semantic structure before ARIA, and testable touch/contrast expectations.
Component guidance with quality gates: Provides rules that require explicit states (default/hover/focus-visible/active/disabled/loading/error where relevant) and finishes with an executable QA checklist for review.

Quick Start

Ask an AI agent to generate contemporary UI guidance and component rules for a new dashboard, ensuring token-based styling and WCAG 2.2 AA, keyboard-first accessibility across all interactive elements.

Frequently Asked Questions about contemporary

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

FAQPage Schema

How do I design accessible bento grid layouts for dashboards?▼

To design accessible bento grid layouts, establish a contemporary design-system spec using typography and color tokenization, semantic-first markup, and WCAG 2.2 AA keyboard navigation rules. This ensures consistent visual hierarchy and responsive behavior across all interactive states.

What are WCAG 2.2 AA requirements for UI component states?▼

WCAG 2.2 AA requirements for UI component states mandate explicit default, hover, focus-visible, active, disabled, loading, and error definitions. Semantic structure must precede ARIA attributes, ensuring testable touch target and contrast expectations.

How do I build a minimalist design system using UI tokens?▼

Build a minimalist design system using UI tokens by defining a Jost and Overpass Mono typography system, a primary and secondary status palette, and a compact spacing and rounding rhythm. This creates reliable visual hierarchy across product interfaces.

Can I use this approach for high-performance product interfaces?▼

Yes, you can use this approach for high-performance product interfaces. The system applies standardized token constraints and minimalist design rules to dashboard builds, ensuring fast performance while maintaining strict accessibility compliance and responsive behavior.

What is the best way to enforce keyboard-first accessibility in UI components?▼

The best way to enforce keyboard-first accessibility is to apply design-system rules requiring visible focus states, semantic-first markup, and testable interaction patterns. This includes an executable QA checklist to review anti-patterns and verify compliance.

How do I QA test dashboard UI for accessibility anti-patterns?▼

QA test dashboard UI for accessibility anti-patterns by applying an executable review checklist defined within the design system. This validates that token constraints are met, component states are explicit, and WCAG 2.2 AA keyboard rules are followed.