skills.rest
PiercingXX
PiercingXXCOMMUNITY
Explore all skills by this author →
GitHub

contemporary

Generate design-system guidance with WCAG 2.2 AA accessibility and QA checklists.

1|Updated Jul 9, 2026
Search Tags:#accessibility#design system#dark mode#ui tokens#bento grid#component states#wcag 2.2 aa
One-click install
npx skills add https://github.com/PiercingXX/xx-stack --skill contemporary
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: contemporary
Source: https://github.com/PiercingXX/xx-stack/tree/main/packs/design/design-skills/contemporary
Command: npx skills add https://github.com/PiercingXX/xx-stack --skill contemporary

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

contemporary turns vague aesthetic preferences into consistent, implementation-ready design-system rules that teams can apply confidently across products.

Core Features & Use Cases

  • Token-first foundations: codifies typography, color, and spacing as concrete constraints (e.g., Jost + Overpass Mono, primary/secondary/neutral tokens).
  • Accessible interaction guidance: specifies WCAG 2.2 AA expectations like focus-visible, keyboard-first behavior, touch target sizing, reduced-motion support, and semantic-before-ARIA practices.
  • Component-level authoring workflow: provides a structured method to produce anatomy, states (default/hover/focus-visible/active/disabled/loading/error as relevant), responsive behavior, acceptance criteria, anti-patterns, and a QA checklist.
  • Use case: use it when building a new UI kit, refactoring an existing component library for accessibility, or generating consistent design guidelines for a bento-grid, dark-mode-ready product.

Quick Start

Ask an AI to generate a contemporary design-system guideline pack for your next component library, including tokens, component states, accessibility acceptance criteria, and a code-review QA checklist.

Frequently Asked Questions about contemporary

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

FAQPage Schema
How do I create an accessible design system that meets WCAG 2.2 AA standards?▼

To create an accessible design system, enforce WCAG 2.2 AA expectations by specifying focus-visible states, keyboard-first behavior, touch target sizing, and reduced-motion support in your component guidelines.

How do I define UI tokens for a minimalist design system?▼

Define UI tokens by codifying typography, color, and spacing as concrete constraints, such as specifying font pairings like Jost and Overpass Mono alongside primary, secondary, and neutral color tokens.

What is the best way to document component states for a UI library?▼

Document component states using a structured method that provides anatomy, default, hover, focus-visible, active, disabled, loading, and error behaviors, alongside acceptance criteria and a QA checklist.

Can I generate dark mode and bento grid guidelines for a new UI kit?▼

Yes, you can generate dark-mode-ready and bento-grid product guidelines by converting aesthetic style directions into implementation-ready engineering rules for UI/UX system creation and component-library standardization.

Do I need semantic HTML before adding ARIA attributes to my design system components?▼

Yes, your design system must require semantic-first guidance, enforcing semantic HTML before applying ARIA practices to ensure accessible interaction guidance and compliance.

What should be included in a design system component library QA checklist?▼

A component library QA checklist should include accessibility acceptance criteria, anti-patterns, responsive behavior specifications, and token threshold usage to ensure consistent implementation-ready engineering rules.

Related Skills

Explore More Design & Creative Skills→
ViewWayViewWay

frontend-design

Defines visual identity and generates frontend code with specified typography, color, and motion constraints.

Community
Advanced
vobasevobase
59

extract

Extract reusable UI components, design tokens, and patterns from frontend codebases.

Official
Intermediate
bergsidebergside
2.3k

neumorphism

Define neumorphism design-system guidance for accessible UI components with WCAG 2.2 AA constraints.

Official
Intermediate
PiercingXXPiercingXX
1

colorful

Generate Colorful design-system guidelines with WCAG 2.2 AA accessibility requirements.

Community
Intermediate