Skills
.Work. You
Rest

tetris

Community

Turn design foundations into consistent UI rules

Design & Creative#accessibility#design system#design tokens#interaction patterns#ui guidelines#ui consistency#component states
AuthorPiercingXX
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: tetris
Download link: https://github.com/PiercingXX/xx-stack/archive/main.zip#tetris

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.