Skill UI

This comprehensive guide provides expert, implementation-ready guidelines for building narrative-driven digital experiences. It covers foundational elements like visual style, typography, color tokens, and spacing, alongside strict component rules and accessibility standards (WCAG 2.2 AA). Use it to transform functional interfaces into emotionally resonant and memorable user journeys.

A comprehensive, implementation-ready guide for building editorial interfaces. This system defines foundational tokens, typography (DM Serif Display), color palettes, and accessibility standards (WCAG 2.2 AA) to create clean, readable, and aesthetically rich long-form content layouts, perfect for blogs and storytelling platforms.

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 guide teaches you how to function as an expert design-system guideline author for the 'Vibrant' brand. It provides comprehensive, implementation-ready documentation covering foundational tokens (color, typography, spacing), detailed component rules (states, variants, interactions), and adherence to WCAG 2.2 AA accessibility standards. The output is structured, actionable, and includes quality assurance checklists for both designers and engineers.

Act as an expert guide author specializing in the Vintage design aesthetic (1950s–1990s). This skill provides comprehensive, implementation-ready guidelines for creating design systems, covering visual tokens, component anatomy, accessibility standards (WCAG 2.2 AA), and strict writing rules. It ensures output is structured, opinionated, and highly practical for engineers and designers.

This skill acts as an expert author for creating comprehensive, implementation-ready design system guidelines. It covers foundational elements, including brand identity, color tokens, typography scales, and spacing rules. It mandates structured documentation, component state definitions (default, hover, error, etc.), and strict adherence to WCAG accessibility standards, ensuring consistency and usability across all digital products.

Comprehensive tool for finding and fixing WCAG 2.2 accessibility violations across codebases or live web pages. Operates in two modes: Report mode generates a prioritized, detailed, non-editing audit report (ideal for code reviews), while Fix mode performs an audit-edit-verify loop directly on the target to apply necessary fixes.

This skill audits a live web page against WCAG standards. It precisely locates accessibility violations, providing a detailed, selector-grounded worklist of necessary fixes without making any changes to the code. Ideal for QA engineers and developers needing a comprehensive, non-destructive report of broken accessibility elements.

This tool converts markdown PR writeups containing unified diff blocks and severity-tagged callouts into a single, structured, 2-column HTML review document. It generates a jump-navigation, displays the diff on the left and detailed annotations on the right, and enforces a mandatory named reviewer footer, ensuring WCAG compliance.

Generates a comprehensive, structured audit based on WCAG 2.2 guidelines. This tool assesses UI and designs across perceivable, operable, understandable, and robust criteria, covering visual, motor, and cognitive accessibility. It produces a prioritized checklist with pass/fail assessments and specific, actionable remediation suggestions for developers and designers.

Runs a comprehensive, systematic QA check on Figma designs to ensure they are production-ready before handing off to engineering. The checklist rigorously evaluates file hygiene, component consistency, accessibility (WCAG AA), content completeness, and overall readiness across multiple platforms (iOS/Android/Web). Use this skill when needing to validate a design’s quality and structure to prevent costly development rework.

This comprehensive guide outlines the principles and technical implementation for creating highly accessible, high-contrast user interfaces. It ensures WCAG AAA compliance by specifying pure black/white color pairings, clear boundaries, and legible typography across web (CSS), iOS (SwiftUI), and Android (Flutter) platforms. Ideal for applications requiring maximum legibility and stark visual impact.