skills.rest
jbreel77888
jbreel77888COMMUNITY
Explore all skills by this author →
GitHub

contemporary

Generates implementation-ready design-system guidelines using contemporary minimalist tokens and accessibility rules.

Updated Jun 20, 2026
Search Tags:#typography#accessibility#WCAG#design system#design tokens#dark mode#UI guidelines
One-click install
npx skills add https://github.com/jbreel77888/Ai-Agnet --skill contemporary-jbreel77888
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: contemporary
Source: https://github.com/jbreel77888/Ai-Agnet/tree/main/skills/design/design-systems/style-skills/contemporary
Command: npx skills add https://github.com/jbreel77888/Ai-Agnet --skill contemporary-jbreel77888

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams building modern interfaces often lack consistent, opinionated design-system guidance, leading to inconsistent spacing, low-contrast text, and inaccessible components. This Skill produces structured, implementation-ready design guidelines grounded in the contemporary minimalist style with defined tokens. ## Core Features & Use Cases - Token-Driven Foundations: Provides concrete color tokens (primary #C800DF, secondary #E60076), Jost/Overpass Mono typography scales, and spacing rules. - Component-Level Rules: Defines anatomy, variants, states (hover, focus-visible, disabled, loading, error), and responsive behavior for UI components. - Accessibility Acceptance Criteria: Anchors every rule to WCAG 2.2 AA requirements, keyboard interactions, and testable QA checklists. - Use Case: A designer-engineer pair building a bento-grid dashboard with dark mode can ask for button and card component rules and receive token-based specs with anti-patterns and a code-review QA checklist. ## Quick Start Generate design-system guidelines for a card component following the contemporary style with accessibility acceptance criteria.

Frequently Asked Questions about contemporary

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

FAQPage Schema
How do I create design-system guidelines for a modern minimalist UI?▼

Define design tokens first (colors, typography, spacing), then specify component anatomy, states, and variants. This Skill follows a structured workflow covering foundations, component rules, accessibility criteria, anti-patterns, and a QA checklist.

What color and typography tokens does the contemporary style use?▼

The contemporary style uses primary #C800DF, secondary #E60076, success #16A34A, warning #D97706, and danger #DC2626. Typography uses Jost for headings and body text with Overpass Mono for labels, across weights 100 through 900.

Does this design system support dark mode and bento grid layouts?▼

Yes, the contemporary style foundations explicitly cover bento grids and dark mode support within a minimalist, high-performance layout approach. Guidance includes token usage and responsive behavior for these patterns.

How are accessibility requirements enforced in generated guidelines?▼

Every accessibility statement must be testable in implementation, anchored to WCAG 2.2 AA, keyboard-first interactions, visible focus states, and 44px minimum touch targets. Conflicts between aesthetics and accessibility are flagged with accessibility prioritized.

When should I not use a token-based design-system approach?▼

Token-based systems add overhead for one-off prototypes or throwaway pages where consistency across a product is not needed. They deliver the most value when multiple components and contributors must share consistent visual rules.

Related Skills

Explore More Design & Creative Skills→
ahsanghalibahsanghalib

ui-design-system

Creates and audits project-grounded UI design systems with semantic tokens and component guidance.

Community
Intermediate
davila7davila7
30.5k

tailwind-design-system

Build Tailwind CSS design systems with tokens, component variants, and dark mode.

Community
Intermediate
anolilabanolilab
214

accessibility

Audit web interfaces against WCAG 2.2 accessibility standards.

Official
Intermediate
tasteskilltasteskill
130

brandkit

Generate minimalist brand-guide images for logo and typography presentation.

Community
Advanced