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

artistic

Standardize high-contrast artistic UI design tokens with WCAG 2.2 AA accessibility rules.

2.3k|211|Updated Mar 9, 2026
Search Tags:#typography#accessibility#design tokens#component guidelines#focus states#high-contrast ui
One-click install
npx skills add https://github.com/bergside/awesome-design-skills --skill artistic-bergside
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: artistic
Source: https://github.com/bergside/awesome-design-skills/tree/main/skills/artistic
Command: npx skills add https://github.com/bergside/awesome-design-skills --skill artistic-bergside

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps teams consistently build visually striking, high-contrast interfaces without sacrificing accessibility or usability.

Core Features & Use Cases

  • Design system guidance: Defines high-contrast artistic visual rules, typography, spacing, and color tokens to keep implementations consistent.
  • Accessibility guardrails: Enforces WCAG 2.2 AA, keyboard-first interactions, visible focus states, and reduced-motion support.
  • Engineer-ready quality gates: Provides do/don’t rules and testable acceptance criteria so AI-generated UI code can be reviewed and verified.

Quick Start

Use the artistic skill to generate implementation-ready design-system instructions for a new “hero + form + card” page that must meet WCAG 2.2 AA and maintain the Artistic token/typography/spacing foundations.

Frequently Asked Questions about artistic

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

FAQPage Schema
How do I build a high-contrast UI design system that meets WCAG 2.2 AA?▼

Establish design tokens for spacing, typography, and colors to create high-contrast artistic UI guidelines. This standardizes visually striking interfaces while enforcing WCAG 2.2 AA accessibility, keyboard-first interactions, and visible focus states across all generated components.

What are the best practices for adding visible focus states to artistic user interfaces?▼

Best practices for visible focus states include enforcing keyboard-first behavior and applying standardized design tokens. This ensures high-contrast artistic interfaces remain accessible, providing clear visual feedback and reduced-motion support without sacrificing expressive typography or bold color usage.

Can I use design tokens to enforce accessibility guardrails in AI-generated frontends?▼

You can enforce accessibility guardrails in AI-generated frontends using token-based rules for spacing, typography, and colors. This provides engineer-ready do/don't rules and testable acceptance criteria to verify WCAG 2.2 AA compliance, keyboard-first behavior, and visible focus states.

How do I create component guidelines that support reduced-motion in high-contrast UI?▼

Create component guidelines supporting reduced-motion by applying token-based rules and accessibility guardrails. This ensures high-contrast artistic user interfaces maintain WCAG 2.2 AA compliance while standardizing expressive typography, bold color usage, and keyboard-first interaction states.

Does standardizing expressive typography conflict with WCAG 2.2 AA accessibility standards?▼

Standardizing expressive typography does not conflict with WCAG 2.2 AA standards when applying proper design tokens. You can maintain bold, high-contrast artistic interfaces by enforcing token-based rules for typography and colors alongside required keyboard-first behavior and visible focus states.

Related Skills

Explore More Design & Creative Skills→
AshesOfTheUndeadAshesOfTheUndead

artistic

Implement high-contrast design tokens and WCAG 2.2 accessibility rules.

Community
Intermediate
bergsidebergside
2.3k

professional

Generate WCAG 2.2 AA-aligned design system guidance with token-based constraints and QA criteria.

Official
Intermediate
superpollo02superpollo02

artistic

Generates high-contrast UI component guidance with expressive typography and token-based color systems.

Community
Intermediate
guideopsguideops

artistic

Define design tokens, typography scales, and color palettes for high-contrast artistic styles.

Community
Intermediate