Skill UI

A comprehensive skill for creating, editing, and automating vector graphics and technical diagrams using LibreOffice Draw. It supports the native ODG format and facilitates seamless format conversion between ODG, SVG, PDF, PNG, and JPG. Ideal for generating flowcharts, organizational charts, and technical schematics, and for batch processing graphics operations via command-line or Python UNO scripting.

Automates guidance for technical diagram analysis, offering best practices for diagrams, charts, presentations, and validating code or visuals to meet visual documentation standards.

This skill acts as an expert Design Systems Lead, analyzing complex technical assets (HTML, CSS, screenshots) from existing projects. It synthesizes a comprehensive 'Semantic Design System' into a structured DESIGN.md file. This output serves as the authoritative 'source of truth' for AI prompting, ensuring that any new UI generated by tools like Stitch adheres perfectly to the established visual language, color palette, and component standards.

This skill provides comprehensive, production-ready guidelines for building a consistent design system. It covers the brand's authoritative, research-journal aesthetic, defining typography, color tokens, component anatomy, and mandatory accessibility criteria (WCAG 2.2 AA). It ensures all UI elements adhere to technical and aesthetic standards.

Generate unique, 16:9 hand-drawn illustrations for articles, blog posts, and technical documentation. This skill translates abstract cognitive anchor points into clean, absurd, and memorable whiteboard sketches. It features a consistent, recurring character, 'Grav,' who actively drives the narrative, ensuring a unique and professional visual language across all your content.

A comprehensive guide detailing the aesthetic and technical implementation of AI-native user interfaces for web and mobile applications. It emphasizes conversational flow, adaptive layouts, and generative state visual cues, providing CSS, SwiftUI, and Flutter code examples.

This guide details the principles and implementation for Color Blocking design, an aesthetic characterized by large, solid, contrasting color sections (Mondrian style). It provides comprehensive technical implementations using CSS Grid (Web), SwiftUI, and Flutter for achieving striking, geometric layouts defined by bold colors and clean typography. Perfect for modern, impactful UIs.

A comprehensive guide covering the aesthetic and technical implementation of floating User Interface (UI) elements. Learn how to create detached, elevated components, such as cards and navigation bars, giving the application a light, airy, and modern feel across Web (CSS), iOS (SwiftUI), and Flutter platforms. Key principles include soft shadows, generous margins, and pill shapes.

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.

A comprehensive guide for designing futuristic, tactical Heads-Up Displays (HUDs) and user interfaces. This skill provides core principles, visual DNA, and ready-to-implement code snippets for Web (CSS/SVG), App (SwiftUI), and Mobile (Flutter) platforms. Perfect for creating high-tech, sci-fi, or military-themed dashboards, featuring circular radars, minimalist strokes, and technical monospace typography.

A comprehensive style guide for implementing the Synthwave and Outrun aesthetic across web and mobile applications. This guide details the core principles, including dark mode backgrounds, glowing neon accents (magenta, cyan), and the signature perspective grid. It provides technical examples using CSS, SwiftUI, Flutter, and React Native to achieve authentic retro-futuristic visual fidelity.

Create programmatic mathematical and technical animation videos with Manim, the Python animation engine. Use it to render explainer clips, equations, graphs, and 3D scenes into polished MP4 output.