contemporary

Name: contemporary
Availability: InStock
Author: Bergside

Guide UI component development with minimalist bento layouts and WCAG 2.2 AA accessibility.

2.3k|211|Updated Mar 9, 2026

Search Tags:#accessibility #design system #dark mode #component guidelines #bento grid #wcag 2.2 aa #token-driven UI

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It provides a practical blueprint for building contemporary, minimalist design system components that remain accessible and implementation-ready.

Core Features & Use Cases

Bento-based layouts and modern minimal styling with a bold, playful feel.
Token-driven typography and color foundations (Jost + Overpass Mono, plus explicit palette tokens).
Accessibility-first interaction guidance aligned to WCAG 2.2 AA, including keyboard-first behavior and focus-visible requirements.

Quick Start

Apply the contemporary skill to guide a new UI module so its tokens, component anatomy, states, and accessibility acceptance criteria are consistent from first implementation to QA.

Frequently Asked Questions about contemporary

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

FAQPage Schema

How do I build accessible bento grid layouts that meet WCAG 2.2 AA standards?▼

Accessible bento grid layouts require token-driven UI foundations, explicit interaction states, and testable WCAG 2.2 AA rules covering keyboard-first behavior and focus-visible requirements across navigation, forms, and cards.

What design tokens do I need for a modern minimalist UI with dark mode support?▼

Modern minimalist UI with dark mode requires typography, spacing, and color palette tokens, utilizing fonts like Jost and Overpass Mono to establish consistent visual foundations across light and dark surfaces.

How do I ensure my design system components have proper interaction states for accessibility?▼

Ensure proper interaction states by applying explicit keyboard-first behavior and focus-visible requirements for UI components, validating them against an implementation-focused QA checklist aligned with WCAG 2.2 AA standards.

Can I use this design system guidance for both light and dark mode responsive layouts?▼

Yes, this design system guidance applies to UI component development across common surfaces including responsive layouts, supporting both light and dark modes through token-first color and typography definitions.

What is the best way to structure component guidelines for contemporary bento UI?▼

Structure component guidelines by defining token-driven anatomy, explicit interaction states, and accessibility acceptance criteria from initial implementation through final QA checklist validation for contemporary bento UI.

When should I not use a token-driven approach for minimalist UI components?▼

A token-driven approach for minimalist UI components is unsuitable when a project requires highly bespoke, non-systematic styling that cannot adhere to consistent typography, spacing, and color palette foundations across surfaces.