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 rigorous, opinionated baseline for UI development, ensuring consistency across spacing, hierarchy, typography, and layout. It helps maintain high code quality by fixing structural and stylistic inconsistencies, particularly useful for polishing AI-generated or quickly developed interfaces to meet professional standards and accessibility requirements.

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.

This skill generates highly structured DESIGN.md files, acting as a semantic design system for Google Stitch. It translates complex, anti-generic frontend principles—including typography, color calibration, component behavior, and motion physics—into actionable, natural-language rules. Use it as the single source of truth to guide AI in generating premium, non-clichéd, professional user interfaces.

This skill generates new UI components that strictly adhere to the StyleSeed design system conventions. It ensures the component is structurally sound, accessible, and uses specified design tokens for colors, spacing, and typography. Use this when creating isolated, reusable UI parts following the defined design system standards.

This interactive wizard guides you through every step required to establish a consistent and professional design system for your new project. It walks users through selecting app type, defining brand colors, applying visual concepts (like Stripe or Notion), choosing typography, and finally scaffolding the initial page structure, ensuring a solid foundation for development.

This utility allows developers to view, add, and modify design tokens (such as colors, spacing, typography, and shadows) within the StyleSeed design system. It ensures visual consistency by managing the synchronization of changes across JSON source files and corresponding CSS custom properties, supporting both light and dark mode variations.

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).

This skill generates a complete, standalone, and highly structured pricing page in standalone HTML. It automatically respects the active design system (colors, typography, components) and supports defining 2-4 plan tiers, including feature cards, comprehensive comparison tables, and an FAQ section. Ideal for product marketing and sales-focused websites.