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

tetris

Generate Tetris design-system component rules with WCAG 2.2 AA accessibility criteria.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The Tetris design-systems skill converts Tetris brand and token foundations into clear, implementation-ready UI and interaction rules that keep teams consistent and accessible.

Core Features & Use Cases

  • Token-driven guidance: Establishes typography, color palette, and spacing foundations (e.g., primary/secondary/success/warning/danger/surface/text and compact density spacing) to prevent ad-hoc styling.
  • Component-level rule authoring: Produces actionable guidance for component anatomy, states (default/hover/focus-visible/active/disabled/loading/error as relevant), variants, and responsive/edge-case behavior.
  • Quality and accessibility gates: Requires testable accessibility acceptance criteria (WCAG 2.2 AA, visible focus states, keyboard-first interactions) plus do/don’t anti-patterns and a code-review QA checklist.

Quick Start

Use the tetris skill to generate a component rule document for a new button pattern that follows the Tetris tokens, includes all required interaction states, and passes WCAG 2.2 AA acceptance criteria.

Frequently Asked Questions about tetris

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

FAQPage Schema
How do I create consistent component states using design tokens?▼

You can create consistent component states by translating typography, color, and spacing design tokens into explicit rules for default, hover, focus-visible, active, disabled, loading, and error states. This prevents ad-hoc styling and ensures UI consistency across variants.

What's the best way to define interaction patterns that pass WCAG 2.2 AA accessibility criteria?▼

The best way to define accessible interaction patterns is to establish testable acceptance criteria requiring visible focus states and keyboard-first interactions. This approach embeds WCAG 2.2 AA compliance directly into component anatomy rules and edge-case behavior.

How do I generate a design system component anatomy document with QA checklists?▼

You generate a component rule document by specifying typography, color, and spacing foundations, then converting them into component-level rules. The output includes structured anatomy, variants, responsive behavior, anti-patterns, and a code-review QA checklist.

Can I use this design system guidance for compact density spacing and edge-case handling?▼

Yes, the design system guidance supports compact density spacing and edge-case handling. It translates specified spacing foundations into concrete token usage rules, ensuring responsive behavior and edge-case variants remain consistent across your UI components.

Why does my UI component lack testable accessibility for focus-visible and disabled states?▼

Your UI component lacks testable accessibility because it needs explicit focus-visible and disabled state rules derived from design tokens. Establishing concrete token usage and do/don't anti-patterns ensures all interaction states meet WCAG 2.2 AA acceptance criteria.

Does the tetris design-systems skill work without external UI framework dependencies?▼

Yes, the tetris design-systems skill operates without external dependencies. It translates your foundational design tokens into implementation-ready UI rules and interaction patterns, providing structured output with QA checklists independent of specific frameworks.

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

luxury

Generate tokenized design-system guidance for luxury dark UI components.

Community
Intermediate
bergsidebergside
2.3k

retro

Apply vintage typography and high-contrast palette rules to UI components.

Official
Intermediate
PiercingXXPiercingXX
1

lingo

Generate implementation-ready design-system guidelines with WCAG 2.2 AA acceptance criteria.

Community
Intermediate