Tetris design skill for AI agents

Overview

The Tetris design skill is a comprehensive, implementation-ready design system guideline built for AI agents. It encodes the entire visual identity, component specifications, and interaction standards of the Tetris brand into a single SKILL.md file that any AI coding assistant can follow.

Inspired by the most iconic game in history, the Tetris design system brings a high-contrast, playful, and premium visual language to modern interfaces. Bold typography, vivid color blocks, and compact layouts channel the energy of the original game while delivering a polished, production-ready experience. Every rule in this skill file is anchored to a concrete token, threshold, or example — no ambiguous adjectives.

Style foundations

The Tetris design system is built on a high-contrast, playful, and premium visual style with carefully defined foundations.

Typography

The type scale uses Bangers as both the primary and display font, giving interfaces an unmistakably bold, game-inspired personality that stands out instantly. JetBrains Mono is used for code and monospaced elements. The scale follows a desktop-first expressive progression, and all nine font weights (100–900) are available for precise typographic control.

Color palette

The system uses semantic tokens across six palettes — primary, secondary, success, warning, danger, and info — so components reference tokens rather than raw hex values. The deep navy primary paired with a vivid purple secondary on a cool blue-tinted surface creates the signature Tetris look: bold, energetic, and unmistakably playful.

Spacing

All spacing follows a compact density mode, keeping elements tightly packed for an information-dense, game-like interface that maximizes screen real estate without sacrificing clarity.

Component families

The Tetris skill covers a wide range of component families, organized into logical groups:

• Inputs and forms — buttons, inputs, textareas, selects/comboboxes, checkboxes, radios, switches, date/time pickers, file uploaders
• Data display — cards, tables, data lists, data grids, charts, stats/metrics, badges/chips, avatars
• Navigation — breadcrumbs, pagination, steppers, sidebars, top bars/headers, tabs, command palette
• Overlays — modals, drawers/sheets, tooltips, popovers/menus
• Feedback — alerts/toasts, notifications center, progress indicators, skeletons, empty states
• Pages — authentication screens, settings pages, onboarding, documentation layouts, pricing blocks, search
• Visualization — data visualization wrappers, carousels, accordions

Each component family includes defined states (default, hover, focus-visible, active, disabled, loading, error), interaction behavior for keyboard, pointer, and touch, explicit token usage, and responsive behavior with edge cases.

Accessibility

This skill targets WCAG 2.2 AA compliance with keyboard-first interactions and visible focus states. Every accessibility statement in the file is testable in implementation. When conflicts arise between aesthetics and accessibility, accessibility wins.

How to use this skill with AI agents

Pull the skill file into your project with a single command:

npx typeui.sh pull tetris

This saves the SKILL.md file directly into your project. From there you can use it with any AI coding tool — Claude, ChatGPT, Cursor, Windsurf, Copilot, or any other agent that accepts context files, system prompts, or knowledge documents.

The file is standard markdown. Copy it into a project knowledge base, reference it as context in a prompt, upload it as a knowledge file, or drop it into a rules directory. The structured format ensures consistent results regardless of which AI platform you use.

Design principles

The Tetris skill enforces three core rules:

1. Prefer semantic tokens over raw values — always reference design tokens instead of hardcoded colors, sizes, or spacing
2. Preserve visual hierarchy — maintain clear distinctions between headings, body text, and supporting elements
3. Keep interaction states explicit — every interactive element must define its full state set

And three strict anti-patterns to avoid:

1. No low contrast text — all text must meet WCAG AA contrast ratios
2. No inconsistent spacing rhythm — every measurement must align to the compact density grid
3. No ambiguous labels — interactive elements must have clear, descriptive labels

Writing tone

All content generated with this skill follows a concise, confident, and helpful tone. Labels are clear. Instructions are direct. There is no unnecessary jargon or decoration.