artistic

Name: artistic
Availability: InStock
Author: piercingxx

Generate implementation-ready design system instructions with WCAG 2.2 AA accessibility criteria.

1|Updated Jul 9, 2026

Search Tags:#typography #design system #qa checklist #interaction states #component guidelines #color tokens #ui accessibility

Ready to run

npx skills add https://github.com/PiercingXX/xx-stack --skill artistic

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: artistic
Source: https://github.com/PiercingXX/xx-stack/tree/main/packs/design/design-skills/artistic
Command: npx skills add https://github.com/PiercingXX/xx-stack --skill artistic

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It turns an Artistic design system vision into clear, implementation-ready rules so teams can build consistently styled, high-contrast interfaces with trustworthy accessibility.

Core Features & Use Cases

Design-system guideline authoring: Produces practical rules for tokens, component anatomy, states, and variants that engineers can apply directly.
Accessibility-first specifications: Defines WCAG-aligned requirements (keyboard-first, visible focus, semantic-first content, reduced-motion support, and testable touch targets).
Opinionated, anti-pattern-aware documentation: Includes do/don’t rules, prohibited implementations, and a QA checklist to prevent drift in UI quality.

Quick Start

Use the Artistic skill to generate component-level design guidance that follows its style foundations and includes testable accessibility acceptance criteria.

Frequently Asked Questions about artistic

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

FAQPage Schema

How do I create accessible UI component guidelines that align with WCAG 2.2 AA?▼

Accessible UI component guidelines define visual foundations, keyboard/pointer/touch state behaviors, and testable accessibility criteria aligned to WCAG 2.2 AA. This standardizes high-contrast interface rules into implementation-ready design system instructions for engineers.

What is the best way to standardize color tokens and interaction states in a design system?▼

Standardizing color tokens and interaction states requires defining token-driven theming rules, component anatomy, and responsive edge-case handling. This produces practical do/don't rules and QA checklists that prevent UI quality drift across design and engineering workflows.

How do I write design system documentation that prevents anti-patterns in UI components?▼

Design system documentation prevents anti-patterns by including opinionated do/don't rules, prohibited implementations, and a QA checklist. This turns artistic interface vision into clear rules so teams build consistently styled, high-contrast interfaces with trustworthy accessibility.

Can I use token-driven theming to specify reduced-motion support and visible focus states?▼

Token-driven theming can specify reduced-motion support and visible focus states by defining accessibility-first specifications. It establishes semantic-first content requirements, keyboard-first behaviors, and testable touch targets within component-level design guidance.

Does this design system approach handle responsive edge cases and touch target specifications?▼

This design system approach handles responsive edge cases and touch target specifications by defining visual foundations and interaction-state behaviors. It produces testable accessibility criteria covering keyboard, pointer, and touch states aligned to WCAG 2.2 AA standards.