Skill UI

This skill establishes an expert persona and comprehensive workflow for generating high-quality, implementation-ready design system guidelines. It mandates adherence to a specific "Sketch" hand-drawn aesthetic, defines foundational tokens (color, typography, spacing), and enforces best practices regarding accessibility (WCAG 2.2 AA) and structured documentation (e.g., anti-patterns, QA checklists).

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.

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 skill performs a systematic, visual, and structural audit of PowerPoint presentations. It checks for layout flaws, text overflow, style inconsistencies, and weak visual hierarchy. Ideal for QAing a deck before a meeting, ensuring readability for specific audiences (e.g., executives, clients), and pinpointing precise fixes with severity ranking.

Builds two parameterized UI modes—iridescent white and colorful black—using OKLCH palettes, procedural WebGL spectral fields with CSS fallback, vision gating, screenshot QA, and total/per-color intensity reports.