sleek

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

1|Updated Jul 9, 2026
One-click install
npx skills add https://github.com/PiercingXX/xx-stack --skill sleek
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: sleek
Source: https://github.com/PiercingXX/xx-stack/tree/main/packs/design/design-skills/sleek
Command: npx skills add https://github.com/PiercingXX/xx-stack --skill sleek

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Sleek turns minimalist design intent into concrete, consistent, implementation-ready guidance so teams can ship clean UI without guesswork.

Core Features & Use Cases

  • Sleek design foundations: defines typography (Inter + JetBrains Mono), spacing rhythm (8pt baseline grid), and a tokenized color palette for consistent visuals.
  • Component-ready rules: standardizes anatomy, variants, interaction states, responsive behavior, and edge-case handling (e.g., long labels, empty states, overflow).
  • Accessibility-first specification: enforces WCAG 2.2 AA expectations with visible focus and keyboard-first interaction guidance.
  • Quality gates for authors: provides a workflow and acceptance criteria so guidance is testable in code review and avoids ambiguous adjectives.

Quick Start

Ask the AI to produce Sleek UI guidance for a new button component that includes states, token usage, accessibility acceptance criteria, and anti-patterns.

Frequently Asked Questions about sleek

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

FAQPage Schema
How do I generate accessible UI component rules that meet WCAG 2.2 AA standards?

Generate accessible UI component rules by defining component anatomy, interaction states, and keyboard-first guidance aligned with WCAG 2.2 AA expectations. Include visible focus requirements and testable accessibility acceptance criteria to enforce compliance during code review.

What are design tokens for a minimalist design system and how do I define them?

Design tokens for a minimalist system define foundational typography, an 8pt baseline spacing grid, and a tokenized color palette. Establish these tokens to provide consistent visual foundations across product interfaces and prevent inconsistent UI decisions.

How do I create implementation-ready design system guidelines with testable acceptance criteria?

Create implementation-ready design system guidelines by providing do and don't rules with testable acceptance criteria for components. Include a QA checklist to validate component behavior, edge-case handling, and accessibility requirements during development.

Does this minimalist UI design system approach support responsive behavior and edge-case handling?

Yes, this minimalist UI design system approach standardizes component anatomy, variants, interaction states, and responsive behavior. It explicitly defines edge-case handling for long labels, empty states, and overflow to ensure consistent implementation across product interfaces.

What is the best way to standardize component interaction states and prevent inconsistent UI decisions?

The best way to standardize interaction states is to generate implementation-ready guidance covering component anatomy, variants, and responsive rules. Apply do and don't rules with testable acceptance criteria to eliminate ambiguous adjectives and prevent inconsistent UI decisions.