Skill UI

A comprehensive guide to utilizing a core, token-driven component library and design system patterns. It details best practices for managing UI styles—including spacing, color, and typography—by using semantic design tokens instead of hard-coded values. Ideal for building consistent, scalable, and maintainable user interfaces across different platforms.

Handles PPTX creation, editing, and analysis by unpacking the ZIP/XML structure, extracting themes, typography, and media, and using html2pptx to build new decks with deliberate color, contrast, and hierarchy choices.

This skill enforces a strict, opinionated baseline for UI development in Tailwind CSS projects. It ensures adherence to best practices concerning accessibility (ARIA), motion, typography, and layout structure. Use it when building complex UI components, reviewing CSS utilities, or preventing sloppy, generic interface design, especially when mitigating potential issues from AI-generated code.

A comprehensive skill for advanced text and typography handling within the Makepad framework. It provides robust mechanisms for font configuration, text layout management (Layouter), and high-quality GPU-based text rendering using Signed Distance Fields (SDF). Use this skill when needing to implement rich text displays, manage complex font styles, or ensure crisp, scalable typography across different resolutions.

This skill provides a comprehensive framework for designing and reviewing native iOS applications. It covers adherence to Apple's Human Interface Guidelines (HIG), ensuring consistency across layout, typography, safe areas, and system components (e.g., Dynamic Island). Use this when building or reviewing SwiftUI/UIKit code to guarantee the app feels intuitive, highly polished, and genuinely native to the Apple ecosystem.

Guides building production-ready user interfaces with thoughtful component architecture, consistent spacing, typography, color, and accessibility standards while avoiding generic AI aesthetics and over-configured patterns.

This setup wizard, part of StyleSeed, guides users through establishing a structured, branded workspace. It systematically collects essential context—including app type, brand colors, visual references, and typography—to generate a coherent design system and scaffold the first page, ensuring the UI remains focused and avoids generic design pitfalls.

This workflow is designed for developers building design-to-code pipelines. It connects to Figma via API to extract core design tokens, including colors, typography styles, and spacing values. It converts these raw design assets into structured code formats, such as CSS custom properties, JSON tokens, and Tailwind configurations, ensuring design consistency across development environments.

This module provides a comprehensive set of abstractions, components, and hooks for building sophisticated rich text editors (based on Lexical). It includes essential UI components like Dividers and DropDowns, alongside powerful hooks for managing real-time selection state, applying typography actions, and handling complex content rendering. It is designed for developers building advanced administrative panels or Content Management Systems (CMS).