Skill UI

An expert guide for creating comprehensive, implementation-ready design systems based on an expressive, high-contrast artistic style. It covers design tokens, component anatomy, advanced accessibility standards (WCAG 2.2 AA), and structured content guidelines for engineers and designers.

This skill provides comprehensive, expert-level guidelines for building an "Energetic" design system. It defines a bold, geometric, and high-contrast aesthetic using thick borders, specific color tokens, and expressive typography. It covers foundational constraints, component anatomy, accessibility (WCAG 2.2 AA), and a rigorous authoring workflow, ensuring all outputs are implementation-ready for engineers and designers.

This is an expert guide for creating a comprehensive design system based on the 'mono' aesthetic. It provides practical, implementation-ready rules for engineers and designers, covering visual foundations (color, typography, spacing), accessibility standards (WCAG 2.2 AA), component anatomy, and interaction behavior. The goal is to establish a consistent, high-contrast, and hacker-chic user experience.

This skill provides expert, implementation-ready guidelines for developing a Neobrutalism design system. It covers all foundational elements, including color tokens, spacing scales, and typography, while enforcing WCAG 2.2 AA accessibility standards. Use it to ensure consistency and clarity in creating high-contrast, modern UIs for both designers and engineers.

This comprehensive guide teaches how to author rigorous, implementation-ready design system documentation. It establishes foundational tokens (colors, spacing, typography) and defines component anatomy across all states (e.g., default, focus-visible, error). The focus is on creating accessible, high-contrast, bold interfaces that comply with WCAG 2.2 AA standards.

A comprehensive design system guide built around the retro, high-contrast, 8-bit aesthetic of Pac-Man. This document provides implementation-ready rules, defining foundational tokens (color, spacing, typography), accessibility standards (WCAG 2.2 AA), and detailed component anatomy. It serves as the single source of truth for engineers and designers to ensure consistency and quality across all product touchpoints.

This comprehensive skill provides expert guidelines for authors building a Retro-themed design system. It establishes foundational rules, including high-contrast color palettes, expressive typography scales (e.g., Macondo), and structured spacing tokens. It ensures strict adherence to WCAG 2.2 AA accessibility standards and outlines a rigorous workflow for component development, allowing engineers and designers to build consistent, visually rich, and usable UIs with a unique vintage flair.

This comprehensive guide provides expert, implementation-ready design system guidelines for creating a high-contrast, playful, and premium user interface inspired by Tetris. It covers typography, color tokens, spacing, accessibility (WCAG 2.2 AA), and a detailed component authoring workflow, ensuring consistency and usability across all platforms.

This comprehensive guide outlines the core principles for implementing effective and aesthetically pleasing dark mode across multiple platforms. It covers critical rules such as avoiding pure black backgrounds, defining elevation using lightness contrast, and utilizing desaturated accent colors to reduce eye strain. Detailed code examples for Web (CSS), iOS (SwiftUI), and Flutter are provided, ensuring a premium, high-fidelity user experience.

A comprehensive design guide for creating ultra-compact, high-utility user interfaces. Ideal for professional tools, financial dashboards, or IDEs where information density is paramount. Principles include compact layouts, monospace typography, high contrast dark themes, and maximizing functional pixels while minimizing whitespace.

This guide outlines the principles of duotone design, an aesthetic characterized by using only two highly contrasting colors for both UI and imagery. It provides comprehensive implementation examples for modern web (CSS), mobile (SwiftUI, Flutter), and cross-platform environments, showing how to achieve the two-color mapping effect using advanced blend modes and color filters.

This comprehensive guide provides core principles and implementation patterns for adopting the Flat Design aesthetic. It details how to build interfaces across web (CSS), mobile (SwiftUI, Flutter), and cross-platform frameworks, emphasizing zero depth, sharp geometries, and high-contrast solid colors while strictly avoiding shadows, gradients, and bevels. Use this when aiming for a modern, minimalist, and clean UI/UX experience.