skills.rest
bergside
bergsideOFFICIAL
Explore all skills by this author →
WebsiteGitHub

contemporary

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
One-click install
npx skills add https://github.com/bergside/awesome-design-skills --skill contemporary-bergside
Or copy as Structured Prompt for Agent▼
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.

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
superpollo02superpollo02

contemporary

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

Community
Advanced
bergsidebergside
2.3k

energetic

Define energetic design-system tokens, component states, and WCAG 2.2 AA focus rules.

Official
Intermediate
bergsidebergside
2.3k

bento

Generate Bento-style modular grid layouts with token-based typography and WCAG 2.2 AA accessibility.

Official
Intermediate