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

gradient

Standardize Gradient design-system styling rules with WCAG 2.2 AA accessibility criteria.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It standardizes Gradient design-system guidance so teams can produce consistent gradient-rich interfaces that remain accessible and implementation-ready.

Core Features & Use Cases

  • Token-driven styling rules: Uses a shared foundation (typography, colors, spacing) based on the Gradient palette and scales.
  • Accessible interaction guidance: Provides explicit keyboard, focus, and touch target expectations aligned to WCAG 2.2 AA.
  • Component-level rule authoring: Defines an opinionated structure for writing anatomy, states, variants, responsive behavior, and QA checklists.
  • Use case: Applying Gradient rules while implementing a new button, card, or page section so gradients, typography, spacing, and states are consistent across the product.

Quick Start

Ask your AI to generate implementation-ready Gradient design-system rules for a new “primary button” component, including states, accessibility acceptance criteria, and a QA checklist.

Frequently Asked Questions about gradient

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

FAQPage Schema
How do I standardize gradient UI design system rules for consistent component styling?▼

Standardize gradient UI design system rules by applying token-first typography, spacing, and color values to author component-level anatomy, states, and variants. This ensures consistent gradient-rich interfaces across design and engineering workflows.

What's the best way to enforce WCAG 2.2 AA accessibility criteria for interactive UI components?▼

Enforce WCAG 2.2 AA accessibility criteria by defining explicit keyboard, focus, and touch target expectations within your component rules. This provides testable acceptance criteria for accessible interaction design.

How do I write implementation-ready component rules for a primary button with interaction states and variants?▼

Write implementation-ready component rules by defining an opinionated structure covering anatomy, states, variants, responsive behavior, and a QA checklist. This ensures buttons, cards, and page sections remain consistent and accessible.

Does this gradient design system guidance work for both design and engineering workflows?▼

Gradient design system guidance works for both design and engineering workflows by providing a shared foundation of tokens and testable accessibility acceptance criteria. This bridges the gap between visual interaction design and component implementation.

Why do I need a token-first approach for typography and color values in a gradient-rich interface?▼

A token-first approach for typography and color values is required to maintain visual consistency and scale across gradient-rich interfaces. Using shared tokens prevents fragmented styling and ensures layout rules are uniformly applied.

Can I use this to generate a QA checklist for component states and visual variants?▼

You can generate a QA checklist by authoring component-level rules that include explicit state definitions, responsive behavior, and WCAG 2.2 AA acceptance criteria. This provides a testable structure for validating visual variants.

Related Skills

Explore More Design & Creative Skills→
qazuorqazuor

frontend-design

Guide UI teams through pre-coding design foundations for typography, color, and layout.

Community
Basic
PiercingXXPiercingXX
1

sleek

Generate implementation-ready minimalist design-system guidance with tokens, component rules, and WCAG 2.2 AA acceptance criteria.

Community
Intermediate
AshesOfTheUndeadAshesOfTheUndead

lingo

Standardize design system implementation with semantic tokens and WCAG 2.2 AA compliance rules.

Community
Intermediate
superpollo02superpollo02

shadcn

Generate shadcn/ui-inspired component guidance with token-first rules and WCAG 2.2 AA constraints.

Community
Intermediate