contemporary
CommunityDefine minimalist, accessible UI systems
Design & Creative#accessibility#design system#dark mode#ui tokens#bento grid#component states#wcag 2.2 aa
AuthorPiercingXX
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: contemporary Download link: https://github.com/PiercingXX/xx-stack/archive/main.zip#contemporary Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.